/* UI polish layer for the landing (ui-polish.js is its partner; Claude passes 62-63). Loaded after tech.css.
   Motion and feel for buttons, fields and popups, and sections easing in.
   Presentation only. Everything that moves stops under prefers-reduced-motion (last block).
   To revert, remove the two ui-polish tags. */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-soft:cubic-bezier(.22,1,.36,1);--gold-ring:rgba(241,191,0,.16)}

/* ---- Buttons: springy lift, a quick firm press, a light sweep on the red primaries, a tap ripple (ui-polish.js) ---- */
html .button,html .chip,html .pick,html .player-tab,html .lg-prov,html .rail .rb,html .tk,html .text-button,html .ask .chips button,html .ask-in button{
 transition:transform .38s var(--ease-spring),box-shadow .3s var(--ease-soft),background-color .2s,border-color .2s,color .2s,filter .2s}
/* the buttons that carry the sweep or the ripple hold them inside */
html .button,html .chip,html .pick,html .player-tab,html .lg-prov{position:relative;overflow:hidden}
html .button{isolation:isolate}
@media(hover:hover){
 html .button:hover{transform:translateY(-2px)}
 html .button.red:hover{box-shadow:0 16px 36px rgba(200,16,46,.36),0 0 0 1px rgba(255,255,255,.06) inset}
 html .button.cream:hover,html .button.ghost:hover{box-shadow:0 12px 28px rgba(0,0,0,.28)}
 html .button.red::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 48%,transparent 66%);transform:translateX(-120%);transition:none}
 html .button.red:hover::after{transform:translateX(120%);transition:transform .75s var(--ease-soft)}
 html .chip:hover,html .player-tab:hover,html .pick:hover{transform:translateY(-1px)}
 html .rail .rb:hover{transform:scale(1.06)}
}
html .button:active,html .chip:active,html .pick:active,html .player-tab:active,html .lg-prov:active,html .text-button:active,html .ask .chips button:active,html .ask-in button:active{
 transform:translateY(0) scale(.965);transition-duration:.08s}
html .rail .rb:active{transform:scale(.92);transition-duration:.08s}
/* the tap ripple (ui-polish.js adds the span) */
.ui-ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:uiRipple .6s var(--ease-soft) forwards;z-index:0}
html .button.red .ui-ripple{background:#fff;opacity:.28}
@keyframes uiRipple{to{transform:scale(1);opacity:0}}
/* the arrow keeps its nudge, now springy */
html .button .ui-icon{transition:transform .35s var(--ease-spring)}
/* focus rings ease in instead of snapping */
html button:focus-visible,html a:focus-visible,html summary:focus-visible,html input:focus-visible{transition:outline-offset .2s var(--ease-soft)}

/* ---- Text fields: soft gold glow on focus, lighter surface, hover hint, a shake for an invalid submit ---- */
html .lg-form input,html .ask-in input{transition:border-color .2s,box-shadow .25s var(--ease-soft),background-color .2s}
@media(hover:hover){html .lg-form input:hover:not(:focus),html .ask-in input:hover:not(:focus){border-color:rgba(244,241,233,.28)}}
html .lg-form input:focus,html .ask-in input:focus{border-color:rgba(241,191,0,.7);background:rgba(244,241,233,.08);box-shadow:0 0 0 4px var(--gold-ring)}
html .lg-form input::placeholder,html .ask-in input::placeholder{transition:opacity .2s,transform .25s var(--ease-soft)}
html .lg-form input:focus::placeholder,html .ask-in input:focus::placeholder{opacity:.45;transform:translateX(3px)}
html .lg-form input:user-invalid{border-color:rgba(255,122,110,.75);box-shadow:0 0 0 4px rgba(255,122,110,.14)}
.ui-shake{animation:uiShake .42s var(--ease-soft)}
@keyframes uiShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* ---- Login popup: backdrop fades, card springs in, contents rise in sequence; exit stays quick (the script hides it at 200 ms) ---- */
html .lg .lg-bg{opacity:0;transition:opacity .2s}
html .lg.open .lg-bg{opacity:1;transition:opacity .3s}
html .lg .lg-card{transition:opacity .16s,transform .18s ease-in}
html .lg.open .lg-card{transition:opacity .25s,transform .5s var(--ease-spring)}
html .lg.open .lg-card>*{animation:uiRise .5s var(--ease-soft) both}
html .lg.open .lg-card>*:nth-child(2){animation-delay:.04s}html .lg.open .lg-card>*:nth-child(3){animation-delay:.08s}
html .lg.open .lg-card>*:nth-child(4){animation-delay:.12s}html .lg.open .lg-card>*:nth-child(5){animation-delay:.16s}
html .lg.open .lg-card>*:nth-child(n+6){animation-delay:.2s}
@keyframes uiRise{from{opacity:0;transform:translateY(8px)}}
html .lg-x{transition:transform .35s var(--ease-spring),background-color .2s}
@media(hover:hover){html .lg-x:hover{transform:rotate(90deg)}}

/* ---- Menu and assistant popovers: grow from the button they belong to ---- */
html .jm,html .ask{transform-origin:100% 100%}
html .jm.open,html .ask.open{transition:opacity .22s,transform .45s var(--ease-spring),visibility 0s}
html .jm.open a,html .jm.open button{animation:uiRise .4s var(--ease-soft) both}
html .jm.open a:nth-child(2),html .jm.open button:nth-child(2){animation-delay:.03s}
html .jm.open a:nth-child(3),html .jm.open button:nth-child(3){animation-delay:.06s}
html .jm.open a:nth-child(n+4),html .jm.open button:nth-child(n+4){animation-delay:.09s}

/* ---- FAQ: answers open smoothly (where the browser can animate details), the + turns with a spring, the question lights up ---- */
html .faq summary{transition:color .2s}
@media(hover:hover){html .faq summary:hover{color:#fff}html .faq summary:hover>span{color:#f1bf00}}
html .faq summary>span{transition:transform .45s var(--ease-spring),color .2s}
html .faq details[open] summary>span{color:#f1bf00}
@supports (interpolate-size:allow-keywords){
 html .faq{interpolate-size:allow-keywords}                        /* scoped: only the FAQ animates to height:auto */
 html .faq details::details-content{height:0;overflow:clip;transition:height .4s var(--ease-soft),content-visibility .4s allow-discrete}
 html .faq details[open]::details-content{height:auto}
}
html .faq details[open] p{animation:uiRise .45s var(--ease-soft) both}

/* ---- Toast: springs up and settles ---- */
html #toast{transition:opacity .25s,transform .45s var(--ease-spring)}

/* ---- Sections ease in: ui-polish.js marks only what is below the fold at load ---- */
html.ui-reveal .ui-rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-soft),transform .8s var(--ease-soft)}
html.ui-reveal .ui-rv.ui-in{opacity:1;transform:none}

/* ---- Reduced motion: nothing moves; states still change ---- */
@media (prefers-reduced-motion:reduce){
 html.ui-reveal .ui-rv{opacity:1!important;transform:none!important;transition:none!important}
 html .button,html .chip,html .pick,html .player-tab,html .lg-prov,html .rail .rb,html .tk,html .text-button,html .lg-x,html .faq summary>span,html #toast,html .jm,html .ask{transition:none!important}
 html .button.red::after,.ui-ripple{display:none}
 html .lg.open .lg-card>*,html .jm.open a,html .jm.open button,html .faq details[open] p,.ui-shake{animation:none!important}
 html .faq details::details-content{transition:none!important}
 html .button:hover,html .chip:hover,html .pick:hover,html .player-tab:hover,html .rail .rb:hover,html .lg-x:hover{transform:none}
}