/* User-supplied animated generate button, adapted to the static studio. */

/* User-supplied Pearl button: scaled for secondary studio actions. */
.pearl-button {
  position:relative; border:0; padding:0; border-radius:100px; background:#102c43; color:#fff; cursor:pointer;
  box-shadow:inset 0 .3rem .9rem #ffffff4d,inset 0 -.1rem .3rem #000b,inset 0 -.4rem .9rem #ffffff80,0 10px 15px -10px #07304c66,0 6px 8px -6px #0009;
  transition:box-shadow .2s,transform .2s;
}
.pearl-wrap { display:block; padding:13px 20px; border-radius:inherit; position:relative; overflow:hidden; }
.pearl-content { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:550; color:#e5f2fc; position:relative; z-index:1; transform:translateY(2%); transition:transform .2s; }
.pearl-stars { display:grid; width:14px; font-size:18px; line-height:1; }
.pearl-stars>span { grid-area:1/1; }.pearl-stars>span:last-child { visibility:hidden; }
.pearl-wrap::before,.pearl-wrap::after { content:""; position:absolute; pointer-events:none; transition:transform .3s,opacity .3s; }
.pearl-wrap::before { left:-15%; right:-15%; bottom:25%; top:-100%; border-radius:50%; background:#ffffff1f; }
.pearl-wrap::after { left:6%; right:6%; top:12%; bottom:40%; border-radius:22px 22px 0 0; box-shadow:inset 0 10px 8px -10px #fffc; background:linear-gradient(180deg,#ffffff4d,transparent 50%); }
.pearl-button:is(:hover,:focus-visible) { box-shadow:inset 0 .3rem .5rem #fff6,inset 0 -.1rem .3rem #000b,inset 0 -.4rem .9rem #fffb,0 10px 15px -10px #07304c66,0 6px 8px -6px #0009; }
.pearl-button:is(:hover,:focus-visible) .pearl-stars>span:first-child { visibility:hidden; }
.pearl-button:is(:hover,:focus-visible) .pearl-stars>span:last-child { visibility:visible; }
.pearl-button:is(:hover,:focus-visible) .pearl-wrap::before { transform:translateY(-5%); }
.pearl-button:is(:hover,:focus-visible) .pearl-wrap::after { opacity:.4; transform:translateY(5%); }
.pearl-button:is(:hover,:focus-visible) .pearl-content { transform:translateY(-4%); }
.pearl-button:active:not(:disabled) { transform:translateY(2px); }
.pearl-button:focus-visible { outline:3px solid #009ed7; outline-offset:4px; }
.pearl-button:disabled { opacity:.6; cursor:not-allowed; }
@media (prefers-reduced-motion:reduce) { .pearl-button,.pearl-button *,.pearl-wrap::before,.pearl-wrap::after { transition:none!important; } }
.ui-anim-shell { position:relative; isolation:isolate; width:100%; padding:4px; margin:4px 0; }
.ui-anim-btn {
  --highlight-hue:200deg; --highlight:hsl(var(--highlight-hue) 100% 70%);
  --highlight-30:hsl(var(--highlight-hue) 100% 70% / .3);
  --highlight-80:hsl(var(--highlight-hue) 100% 70% / .8);
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center;
  width:100%; min-height:56px; gap:10px; padding:15px 22px; border-radius:24px;
  border:1px solid #6488a333; background:#10283c; color:#e8e8e8; font-size:16px; font-weight:550;
  cursor:pointer; user-select:none;
  box-shadow:inset 0 1px 1px #ffffff33,inset 0 2px 2px #ffffff26,inset 0 4px 4px #ffffff1a,inset 0 8px 8px #ffffff0d,inset 0 16px 16px #ffffff0d,0 -1px 1px #00000005,0 -2px 2px #00000008,0 -4px 4px #0000000d,0 -8px 8px #0000000f,0 -16px 16px #00000014;
  transition:box-shadow .4s,border-color .4s,background-color .4s,transform .2s;
}
.ui-anim-btn::before {
  content:""; position:absolute; inset:-4px; border-radius:28px; pointer-events:none; z-index:-1;
  background:linear-gradient(0deg,#0004,#000a);
  box-shadow:0 -8px 8px -6px #0000 inset,0 -16px 16px -8px #0000 inset,1px 1px 1px #fff2,2px 2px 2px #fff1,-1px -1px 1px #0002,-2px -2px 2px #0001;
  transition:box-shadow .4s,filter .4s;
}
.ui-anim-btn::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(0deg,#fff 0%,var(--highlight) 2%,var(--highlight-30) 5%,transparent 15%);
  opacity:0; transition:opacity .4s,filter .4s;
}
.ui-anim-btn-svg { flex-shrink:0; width:24px; height:24px; fill:#e8e8e8; filter:drop-shadow(0 0 2px #fff9); animation:evo-btn-flicker 2s .5s linear infinite; transition:fill .4s,filter .4s,opacity .4s; }
.ui-anim-txt-wrapper { display:grid; align-items:center; min-width:6.4em; line-height:1.4; }
.ui-anim-txt-1,.ui-anim-txt-2 { grid-area:1/1; white-space:nowrap; transition:opacity .25s; }
.ui-anim-txt-1 { opacity:1; }.ui-anim-txt-2 { opacity:0; pointer-events:none; }
.ui-anim-letter { display:inline-block; color:#ccd7e0; animation:evo-btn-letter 2s ease-in-out infinite; animation-delay:var(--letter-delay); transition:color .4s,text-shadow .4s; }
.ui-anim-btn:is(:hover,:focus-visible):not(:disabled) { border-color:hsl(var(--highlight-hue) 100% 80% / .4); }
.ui-anim-btn:is(:hover,:focus-visible):not(:disabled)::before {
  box-shadow:0 -8px 8px -6px #fffa inset,0 -16px 16px -8px var(--highlight-30) inset,1px 1px 1px #fff2,2px 2px 2px #fff1,-1px -1px 1px #0002,-2px -2px 2px #0001;
}
.ui-anim-btn:is(:hover,:focus-visible):not(:disabled)::after { opacity:1; }
.ui-anim-btn:is(:hover,:focus-visible):not(:disabled) .ui-anim-btn-svg { fill:#fff; filter:drop-shadow(0 0 3px var(--highlight)) drop-shadow(0 -4px 6px #0009); animation:none; }
.ui-anim-btn:active:not(:disabled) { transform:scale(.99); border-color:hsl(var(--highlight-hue) 100% 80% / .7); background:#163c53; }
.ui-anim-btn:active:not(:disabled)::before { box-shadow:0 -8px 12px -6px #fffa inset,0 -16px 16px -8px var(--highlight-80) inset,1px 1px 1px #fff4,2px 2px 2px #fff2,-1px -1px 1px #0002,-2px -2px 2px #0001; }
.ui-anim-btn:active:not(:disabled)::after { filter:brightness(1.5); }
.ui-anim-btn:focus-visible { outline:3px solid #009ed7; outline-offset:8px; }
/* Real request state drives the text change; tabbing to the control never starts it. */
.ui-anim-btn[data-generating="true"] .ui-anim-txt-1 { opacity:0; }
.ui-anim-btn[data-generating="true"] .ui-anim-txt-2 { opacity:1; }
.ui-anim-btn[data-generating="true"] .ui-anim-txt-2 .ui-anim-letter { animation:evo-btn-focused 1s ease-in-out both,evo-btn-letter 1.2s 1s ease-in-out infinite; animation-delay:var(--letter-delay),calc(1s + var(--letter-delay)); }
.ui-anim-btn[data-generating="true"]::after { opacity:.7; }
.ui-anim-btn[data-generating="true"] .ui-anim-btn-svg { animation-duration:1.2s; }
.ui-anim-btn:disabled { cursor:not-allowed; }
.ui-anim-btn:disabled:not([data-generating="true"]) { opacity:.6; }
.ui-anim-btn:disabled:not([data-generating="true"])::after { opacity:0; }
.ui-anim-btn:disabled:not([data-generating="true"]) .ui-anim-letter,.ui-anim-btn:disabled:not([data-generating="true"]) .ui-anim-btn-svg { animation:none; filter:none; }
.ui-anim-btn[data-generating="true"] { cursor:wait; }
@keyframes evo-btn-letter { 50% { color:#fff; text-shadow:0 0 3px #fff8; } }
@keyframes evo-btn-flicker { 50% { opacity:.3; } }
@keyframes evo-btn-focused { 0%,100% { filter:blur(0); transform:scale(1); } 50% { transform:scale(1.5); filter:blur(5px) brightness(1.5) drop-shadow(-18px 6px 6px var(--highlight)); } }
@media (max-width:760px) { .ui-anim-btn { min-height:54px; font-size:15px; padding:14px 18px; } }
@media (prefers-reduced-motion:reduce) {
  .ui-anim-btn,.ui-anim-btn::before,.ui-anim-btn::after,.ui-anim-btn * { animation:none!important; transition:none!important; }
}