/* ECHOTAKE ULTRA — cinematic motion layer. Kept separate so the core UI remains easy to maintain. */
:root{--motion-fast:180ms;--motion-mid:420ms;--motion-slow:850ms;--motion-ease:cubic-bezier(.2,.75,.25,1);--glow-red:rgba(255,38,51,.22)}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;background-image:radial-gradient(rgba(255,255,255,.16) .65px,transparent .65px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent 78%)}
#scrollProgress{position:fixed;top:0;left:0;width:0;height:3px;z-index:2000;background:linear-gradient(90deg,#ff2633,#ff7a54,#ff2633);box-shadow:0 0 14px rgba(255,38,51,.6);pointer-events:none;transition:width 80ms linear}
#cursorGlow{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.65;background:radial-gradient(380px circle at var(--pointer-x,50%) var(--pointer-y,25%),rgba(255,38,51,.075),transparent 72%)}
.topbar{transition:background var(--motion-mid) ease,border-color var(--motion-mid) ease,box-shadow var(--motion-mid) ease}
.topbar.is-scrolled{background:rgba(3,6,11,.94);border-color:rgba(255,38,51,.2);box-shadow:0 12px 42px rgba(0,0,0,.25)}
.brand{transition:transform var(--motion-mid) var(--motion-ease),filter var(--motion-mid) ease}
.brand:hover{transform:translateY(-1px) scale(1.025);filter:drop-shadow(0 0 12px rgba(255,38,51,.4))}
.nav a{position:relative;transition:color var(--motion-fast) ease,background var(--motion-fast) ease}
.nav a::after{content:"";position:absolute;left:14%;right:86%;bottom:2px;height:2px;border-radius:4px;background:#ff2633;box-shadow:0 0 10px rgba(255,38,51,.65);transition:right var(--motion-mid) var(--motion-ease)}
.nav a:hover::after,.nav a:focus-visible::after{right:14%}
.hero{isolation:isolate}
.hero-backdrop{transform:scale(1.045);animation:hero-drift 28s ease-in-out infinite alternate;will-change:transform}
.hero-content>*{animation:hero-rise .75s var(--motion-ease) both}
.hero-content .eyebrow{animation-delay:.06s}.hero-content h1{animation-delay:.13s}.hero-content p{animation-delay:.22s}.hero-content .hero-actions{animation-delay:.3s}.hero-content .hero-meta{animation-delay:.38s}
.eyebrow{transition:letter-spacing var(--motion-mid) ease,text-shadow var(--motion-mid) ease}
.section-heading:hover .eyebrow{letter-spacing:.2em;text-shadow:0 0 18px rgba(255,38,51,.25)}
main>section{animation:section-arrive .7s var(--motion-ease) both}
main>section:nth-of-type(2){animation-delay:.04s}main>section:nth-of-type(3){animation-delay:.07s}
.movie-card,.collection-card,.person-card,.about-card,.dna-card,.command-center,.ai-movie-assistant,.concierge,.filter-grid>*,.decade-row>*{transition:transform var(--motion-mid) var(--motion-ease),border-color var(--motion-mid) ease,box-shadow var(--motion-mid) ease,background var(--motion-mid) ease;will-change:transform}
.movie-card{position:relative;isolation:isolate;overflow:hidden;animation:card-arrive .6s var(--motion-ease) both;animation-delay:calc(min(var(--i,0),12)*35ms)}
.movie-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid transparent;border-radius:inherit;transition:border-color var(--motion-mid) ease,box-shadow var(--motion-mid) ease}
.movie-card:hover,.movie-card:focus-within{transform:translateY(-8px) scale(1.018);z-index:3;box-shadow:0 22px 55px rgba(0,0,0,.38),0 0 28px rgba(255,38,51,.09)}
.movie-card:hover::before,.movie-card:focus-within::before{border-color:rgba(255,65,76,.4);box-shadow:inset 0 0 22px rgba(255,38,51,.055)}
.movie-card .poster{overflow:hidden}
.movie-card .poster img{transition:transform .75s var(--motion-ease),filter .6s ease}
.movie-card:hover .poster img{transform:scale(1.075);filter:saturate(1.13) contrast(1.035)}
.movie-card .rating{transition:transform var(--motion-mid) var(--motion-ease),box-shadow var(--motion-mid) ease}
.movie-card:hover .rating{transform:translateY(-2px);box-shadow:0 0 18px rgba(255,38,51,.15)}
.save-btn{transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.save-btn:hover{transform:scale(1.12) rotate(-5deg);box-shadow:0 0 20px rgba(255,38,51,.3)}
.primary-btn,.ghost-btn,.icon-btn,.section-tools button,.chips button,.decade-row button{position:relative;overflow:hidden;transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-mid) ease,border-color var(--motion-fast) ease,background var(--motion-fast) ease}
.primary-btn::after,.ghost-btn::after{content:"";position:absolute;inset:-120% auto -120% -45%;width:28%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .65s var(--motion-ease)}
.primary-btn:hover::after,.ghost-btn:hover::after{left:130%}
.primary-btn:hover,.ghost-btn:hover,.icon-btn:hover,.section-tools button:hover,.chips button:hover,.decade-row button:hover{transform:translateY(-2px)}
.primary-btn:hover{box-shadow:0 10px 32px rgba(255,38,51,.22)}
.collection-grid>*:hover,.person-grid>*:hover,.about-card:hover,.dna-card:hover,.ai-movie-assistant:hover,.concierge:focus-within{transform:translateY(-4px);border-color:rgba(255,38,51,.28);box-shadow:0 20px 55px rgba(0,0,0,.2),0 0 25px rgba(255,38,51,.05)}
input,textarea,select{transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background var(--motion-fast) ease}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:rgba(255,38,51,.62)!important;box-shadow:0 0 0 3px rgba(255,38,51,.1),0 0 24px rgba(255,38,51,.06)}
.modal:not(.hidden){animation:modal-fade .22s ease both}
.modal:not(.hidden) .modal-card,.modal:not(.hidden)>article,.modal:not(.hidden) .search-panel{animation:modal-pop .38s var(--motion-ease) both}
.detail-hero{animation:detail-reveal .75s var(--motion-ease) both}
.detail-poster{animation:poster-reveal .7s .08s var(--motion-ease) both}
.detail-copy>*{animation:hero-rise .5s var(--motion-ease) both}
.detail-copy>*:nth-child(2){animation-delay:.05s}.detail-copy>*:nth-child(3){animation-delay:.1s}.detail-copy>*:nth-child(4){animation-delay:.15s}.detail-copy>*:nth-child(5){animation-delay:.2s}
#cinemaLoadingScreen{transition:opacity .65s ease,visibility .65s ease}
#cinemaLoadingScreen .cinema-loader-brand{animation:brand-breathe 2.4s ease-in-out infinite}
.loading span,.loading-pulse{animation:loading-beat 1s ease-in-out infinite}
.loading span:nth-child(2){animation-delay:.13s}.loading span:nth-child(3){animation-delay:.26s}
.ai-status i{animation:status-pulse 1.8s ease-in-out infinite}
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,38,51,.55),transparent);transform-origin:center;animation:line-breathe 5s ease-in-out infinite}
.reveal-ready .reveal-on-scroll{opacity:0;transform:translateY(22px);transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease)}
.reveal-ready .reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.reveal-ready .reveal-on-scroll.reveal-left{transform:translateX(-22px)}.reveal-ready .reveal-on-scroll.reveal-left.is-visible{transform:translateX(0)}
.reveal-ready .reveal-on-scroll.reveal-right{transform:translateX(22px)}.reveal-ready .reveal-on-scroll.reveal-right.is-visible{transform:translateX(0)}
button:active,.movie-card:active{transform:scale(.985)}
:focus-visible{outline:2px solid rgba(255,75,84,.85);outline-offset:3px}
@keyframes hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes section-arrive{from{opacity:.6}to{opacity:1}}
@keyframes card-arrive{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hero-drift{from{transform:scale(1.045) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1%,1%,0)}}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes detail-reveal{from{opacity:.4;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes poster-reveal{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes loading-beat{0%,80%,100%{transform:scale(.7);opacity:.45}40%{transform:scale(1.1);opacity:1}}
@keyframes brand-breathe{0%,100%{filter:drop-shadow(0 0 0 rgba(255,38,51,0))}50%{filter:drop-shadow(0 0 18px rgba(255,38,51,.35))}}
@keyframes status-pulse{0%,100%{opacity:.55;box-shadow:0 0 0 0 rgba(255,38,51,.3)}50%{opacity:1;box-shadow:0 0 0 5px rgba(255,38,51,0)}}
@keyframes line-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@media(hover:none){#cursorGlow{display:none}.movie-card:hover,.collection-grid>*:hover,.person-grid>*:hover{transform:none}.movie-card:hover .poster img{transform:none}}
@media(max-width:700px){.hero-backdrop{animation-duration:38s}.movie-card:hover{transform:translateY(-3px)}.reveal-ready .reveal-on-scroll{transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;will-change:auto!important}#cursorGlow{display:none}.reveal-ready .reveal-on-scroll{opacity:1;transform:none}}