/* Noir motion: readable without JS; entrance choreography, then scroll-driven depth. */
:root{--motion-duration:900ms;--motion-ease:cubic-bezier(.16,1,.3,1)}
.motion-reveal{opacity:0;translate:0 44px;transition:opacity var(--motion-duration) ease,translate var(--motion-duration) var(--motion-ease),clip-path 1.2s var(--motion-ease)}
.motion-reveal.motion-left{translate:-42px 0}.motion-reveal.motion-right{translate:42px 0}
.motion-reveal.is-visible,.motion-reveal:focus-within{opacity:1;translate:0 0}
.motion-reveal.delay-1{transition-delay:90ms}.motion-reveal.delay-2{transition-delay:180ms}.motion-reveal.delay-3{transition-delay:270ms}
.noir-intro h1.motion-reveal{opacity:1;translate:none}
.noir-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.noir-line>span,.noir-line>em{display:block}
h1.motion-reveal .noir-line>span,h1.motion-reveal .noir-line>em{transform:translateY(115%) rotate(2deg);opacity:0;transition:transform 1.15s var(--motion-ease),opacity .5s ease;transition-delay:90ms}
h1.motion-reveal .noir-line:nth-child(2)>em{transition-delay:230ms}
h1.motion-reveal.is-visible .noir-line>span,h1.motion-reveal.is-visible .noir-line>em{transform:translateY(0) rotate(0);opacity:1}
.noir-scene .motion-reveal{clip-path:inset(12% 0 12% 0)}
.noir-scene .motion-reveal.is-visible{clip-path:inset(0 0 0 0)}
.noir-main.motion-reveal{translate:0 65px;transition-delay:100ms}
.noir-main.motion-reveal.is-visible{translate:0 0}
.noir-side.motion-reveal{transition-delay:250ms}
.noir-side-right.motion-reveal{transition-delay:380ms}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:#e7eded;transform:scaleX(0);transform-origin:left;z-index:100;pointer-events:none}
.button{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,border-color .3s,box-shadow .4s,transform .35s var(--motion-ease)}
.button:after{content:"";position:absolute;inset:-100% auto -100% -70%;width:35%;background:linear-gradient(90deg,transparent,#ffffff65,transparent);transform:rotate(24deg) translateX(-120%);pointer-events:none;transition:transform .85s var(--motion-ease);z-index:-1}
.button:hover:after,.button:focus-visible:after{transform:rotate(24deg) translateX(1000%)}
.button:hover{transform:translateY(-4px)}
.button>span,.header-contact>span,.noir-explore>span,.noir-foot a>span{transition:transform .4s var(--motion-ease)}
.button:hover>span,.header-contact:hover>span,.noir-explore:hover>span{transform:translate(4px,-4px)}
.button:active{transform:translateY(0) scale(.98)}
header nav a{position:relative;padding:10px 0}
header nav a:after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--motion-ease)}
header nav a:hover:after,header nav a:focus-visible:after{transform:scaleX(1)}
.film-link .play-icon,.gallery-video .play-icon{transition:transform .5s var(--motion-ease),box-shadow .5s,border-color .5s}
.film-link:hover .play-icon,.gallery-video:hover .play-icon{transform:scale(1.14);box-shadow:0 0 0 9px #d9e2e50d}
.plan{transition:border-color .4s,background .4s,box-shadow .4s}.plan:hover{border-color:#bac5ca;box-shadow:0 20px 60px #0004}
.studio-credit{display:inline-block;margin-top:9px;color:var(--text);font-size:10px}
.copy-status{margin-top:14px;padding:12px;border:1px solid var(--line);font-size:12px;color:var(--text)}
@media(prefers-reduced-motion:no-preference){
 .logo-crop.is-visible{animation:noir-emblem 4.6s var(--motion-ease) 1}
 .logo-crop.is-visible:after{content:"";position:absolute;inset:-60% -80%;background:linear-gradient(110deg,transparent 39%,#ffffff45 49%,transparent 59%);transform:translateX(-70%);animation:emblem-glint 2.3s ease 1;pointer-events:none}
 .brand:hover .logo-crop{animation:noir-emblem-hover 1.4s ease 1}
 .hero-noir:after{animation:noir-light 4.6s ease-out 1}
 .strip-symbol{animation:mark-turn 4.6s ease-in-out 1}
 dialog[open]{animation:dialog-enter .45s var(--motion-ease)}
 dialog[open]::backdrop{animation:backdrop-enter .35s ease}
 details[open]>p{animation:info-enter .45s var(--motion-ease)}
}
@keyframes noir-emblem{0%{transform:perspective(220px) rotateY(-60deg) scale(.8)}32%{transform:perspective(220px) rotateY(12deg) scale(1.07)}65%{transform:perspective(220px) rotateY(-8deg) scale(1)}100%{transform:perspective(220px) rotateY(0) scale(1)}}
@keyframes noir-emblem-hover{0%,100%{transform:perspective(220px) rotateY(0)}45%{transform:perspective(220px) rotateY(25deg) scale(1.08)}}
@keyframes emblem-glint{0%,15%{transform:translateX(-70%)}80%,100%{transform:translateX(70%)}}
@keyframes noir-light{from{opacity:.15;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes mark-turn{to{transform:rotate(180deg)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(35px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes info-enter{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.motion-reveal,.motion-reveal.motion-left,.motion-reveal.motion-right{opacity:1!important;translate:none!important;clip-path:none!important}h1.motion-reveal .noir-line>span,h1.motion-reveal .noir-line>em{transform:none!important;opacity:1!important}}
/* Keep entrance transitions when component hover rules set their own transition. */
body[data-theme="noir"] .motion-reveal{transition-property:opacity,translate,clip-path,background,color,border-color,box-shadow,transform;transition-duration:var(--motion-duration),var(--motion-duration),1.2s,.3s,.3s,.3s,.4s,.35s;transition-timing-function:ease,var(--motion-ease),var(--motion-ease),ease,ease,ease,ease,var(--motion-ease)}
body[data-theme="noir"] .motion-reveal.delay-1{transition-delay:90ms}body[data-theme="noir"] .motion-reveal.delay-2{transition-delay:180ms}body[data-theme="noir"] .motion-reveal.delay-3{transition-delay:270ms}