/* Shared interaction language for the library and commercial surfaces. */
:root{--ui-ease:cubic-bezier(.22,1,.36,1);--ui-fast:140ms;--ui-enter:240ms;--ui-control-radius:10px;--ui-panel-radius:16px;--ui-focus:var(--brand-text-secondary)}
button,a,input,textarea,select{touch-action:manipulation}
button,.btn,.nav{transition:background-color var(--ui-fast),color var(--ui-fast),border-color var(--ui-fast),box-shadow var(--ui-fast),transform var(--ui-fast) var(--ui-ease)}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ui-focus);outline-offset:4px}
.btn,.lead-form input,.lead-form textarea,.field input,.field textarea,.field select{border-radius:var(--ui-control-radius)}
.capture-dialog{border-radius:20px;box-shadow:0 24px 80px color-mix(in srgb, var(--brand-text) 16%, transparent),0 4px 16px color-mix(in srgb, var(--brand-text) 6%, transparent);max-height:calc(100dvh - 32px);overflow-y:auto}
.capture-dialog[open]{animation:ui-enter var(--ui-enter) var(--ui-ease)}
.capture-dialog::backdrop{animation:ui-fade var(--ui-enter) ease-out}
.lead-options{padding:4px;border-radius:12px;background:var(--brand-surface);gap:4px}
.lead-options button{flex:1}
.lead-feedback{animation:ui-enter var(--ui-enter) var(--ui-ease)}
.capture-actions button{border-radius:50%;background:var(--brand-surface-light)}
.studio-label{display:block;font-size:10px;letter-spacing:.09em;font-weight:600;color:var(--brand-text-secondary)}
.film-image{isolation:isolate}.episode-preview-loop{transition:opacity 220ms var(--ui-ease)}
.film-card{transition:border-color var(--ui-fast),box-shadow var(--ui-fast)}
.episode-v2-title h1,.heading h1{text-wrap:balance}
.episode-standfirst,.description,.heading p{text-wrap:pretty}
.episode-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.episode-faq summary::-webkit-details-marker{display:none}
.episode-faq summary::after{content:'+';font-size:20px;font-weight:400;transition:transform var(--ui-fast)}
.episode-faq details[open] summary::after{transform:rotate(45deg)}
.episode-faq details[open] p{animation:ui-enter var(--ui-enter) var(--ui-ease)}
@keyframes ui-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@media(hover:hover){.film-card:hover{box-shadow:0 3px 12px color-mix(in srgb, var(--brand-text) 4%, transparent)}.nav:not(.active):hover{background:var(--brand-surface-light)}}
@media(max-width:750px){.card-action,.capture-actions button,.mobile-menu{min-height:44px}.capture-dialog{width:calc(100% - 24px);margin:auto}.lead-options{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:enabled:active,.btn:active{transform:none}}

/* Center modal dialogs in the viewport at every breakpoint. */
dialog.capture-dialog{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px)}
dialog.capture-dialog::backdrop{background:color-mix(in srgb,var(--brand-text) 25%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Shared surface and control tokens: editorial, episode and studio. */
:root{--ui-panel-border:color-mix(in srgb,var(--brand-border) 65%,transparent);--ui-panel-shadow:4px 5px 14px rgba(58,53,46,.04),inset 1px 1px 0 rgba(254,251,252,.8);--ui-inner-radius:10px}
.ui-panel,.plan,.about-capture,.review{background:var(--brand-surface-light);border:1px solid var(--ui-panel-border);border-radius:var(--ui-panel-radius);box-shadow:var(--ui-panel-shadow)}
.btn,.field input,.field textarea,.field select{border-radius:var(--ui-control-radius);font-family:inherit}
.ui-tooltip{z-index:100;padding:8px 11px;border-radius:8px;background:var(--brand-text);color:var(--brand-surface-light);font-size:11px;line-height:1.4;box-shadow:0 3px 12px rgba(26,24,21,.12);animation:ui-fade 120ms ease-out;pointer-events:none}.ui-tooltip-arrow{fill:var(--brand-text)}

/* Tactile controls: one motion language across editorial and studio. */
:root{--ui-hover-scale:1.035;--ui-press-scale:.97;--ui-motion:220ms;--ui-fast:160ms}
body :is(button,.btn,.nav,.studio-link-block,[data-ui-button]){
 transition:scale var(--ui-motion) var(--ui-ease),background-color var(--ui-fast) ease-out,color var(--ui-fast) ease-out,border-color var(--ui-fast) ease-out,box-shadow var(--ui-motion) var(--ui-ease),transform var(--ui-motion) var(--ui-ease);
}
body :is(.channel-link,.season-nav,.nav,.film-title,.studio-link-block){--ui-hover-scale:1.015;--ui-press-scale:.985}
body :is(.film-title,.brand){transform-origin:left center}
body :is(.film-image,.episode-start){--ui-hover-scale:1;--ui-press-scale:1}
@media(hover:hover) and (pointer:fine){
 body :is(button,.btn,.nav,.studio-link-block,[data-ui-button]):not(:disabled):not([aria-disabled=true]):hover{scale:var(--ui-hover-scale)}
}
body :is(button,.btn,.nav,.studio-link-block,[data-ui-button]):not(:disabled):not([aria-disabled=true]):active{scale:var(--ui-press-scale);transition-duration:90ms}
@media(hover:hover) and (pointer:fine){}
body .capture-dialog[open]{animation:ui-dialog-enter var(--ui-enter) var(--ui-ease)}
@keyframes ui-dialog-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
body .episode-faq summary{transition:color var(--ui-fast) ease-out}
body .episode-faq summary::after{transition:transform var(--ui-motion) var(--ui-ease)}
body .ai-research-box .lead-form{animation:ui-enter var(--ui-enter) var(--ui-ease)}
@media(prefers-reduced-motion:reduce){
 body :is(button,.btn,.nav,.studio-link-block,[data-ui-button],.image-play){scale:1!important;transition:none!important}
}

/* Preserve primary button contrast when rendered as a link. */
body a[data-ui-button].text-primary-foreground{color:var(--primary-foreground,var(--brand-background))}

/* Keep the full-frame hit target out of a new stacking context on hover.
   Its poster stays below the loop; the glass control stays above it. */
body .episode-player .episode-start{scale:none!important;transform:none!important}
body .episode-faq .yield-question{overflow:hidden}
body .episode-faq .yield-question summary{font-weight:500}
body .episode-faq .yield-question summary::after{transform:rotate(0deg)}
body .episode-faq .yield-question[data-expanded=true] summary::after{transform:rotate(45deg)}
body .episode-faq .yield-question p{animation:none;margin:12px 0 0}
body .episode-faq .yield-answer{opacity:0;transition:opacity 180ms ease-out}
body .episode-faq .yield-question[data-expanded=true] .yield-answer{opacity:1}

/* Library preview uses the same glass play as the episode player. */
body .film-visual .film-image{background:transparent;z-index:2;scale:none!important;transform:none!important}
body .film-visual:has(.episode-preview-loop.is-ready) .film-image>img{opacity:0}
body .film-visual .preview-toggle{z-index:3}
@media(hover:none){}

body .film-card{transition:scale 240ms var(--ui-ease),border-color var(--ui-fast) ease-out,box-shadow 240ms var(--ui-ease);transform-origin:center}
@media(hover:hover) and (pointer:fine){body .film-card:hover{scale:1.008}}
@media(prefers-reduced-motion:reduce){body .film-card{scale:1!important;transition:none!important}}