/* Opening sequence for the hero (preview).
   Wide screens (html.hdw-video): a 10-second Runway film plays once over the hero, then cross-fades
   onto the approved still while the title stamps in. Phones (html.hdw-intro + hdw-reveal at once):
   only the title animation. Nothing plays for reduced motion or when the page opens at an anchor.
   See the inline script in index.html and intro.js. */

.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,65% 0%);pointer-events:none}
.hdw-video .hero-art{animation:none}
.hdw-video:not(.hdw-reveal) .hero-art{opacity:0}
.hdw-ended .hero-video{opacity:0;transition:opacity 1.5s cubic-bezier(.4,0,.2,1)}

/* Until the film has downloaded, hold back the big pictures nobody can see yet (the hidden still and the story
   photos further down) so the film gets the connection to itself. They load while the film plays. */
.hdw-video:not(.hdw-loaded) .hero-art,.hdw-video:not(.hdw-loaded) .screen-art,.hdw-video:not(.hdw-loaded) .story-section .mini-photo{background-image:none!important}

/* While the film plays: no shading, no text, no menu. */
.hdw-video .hero-shade{opacity:0}
.hdw-video.hdw-reveal .hero-shade{opacity:1;transition:opacity 2.2s ease-in-out}
.hdw-video:not(.hdw-reveal) .hero-content,.hdw-video:not(.hdw-reveal) .hero-bottom,.hdw-video:not(.hdw-reveal) body>header{opacity:0}

.hero-skip{position:absolute;right:28px;bottom:58px;z-index:3;border:1px solid #f8e9c955;background:#14110c66;color:#f1e6cf;font:11px/1 Arial,sans-serif;letter-spacing:1.5px;padding:9px 14px;border-radius:2px;cursor:pointer;backdrop-filter:blur(3px);opacity:.75}
.hero-skip:hover,.hero-skip:focus-visible{opacity:1}
.hdw-reveal .hero-skip{display:none}

/* Poster lettering: the three title lines are cut from the poster artwork (title-*.webp); the h1 keeps its
   aria-label so the title is still read as text. */
.hero h1.title-art{width:clamp(300px,28vw,430px);max-width:100%;filter:none}
.hero h1.title-art span{display:block;width:100%;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;will-change:transform,opacity}
/* The shadow sits on each word once; only movement and fading are animated, so nothing is redrawn per frame. */
.hero h1.title-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 12px #000b) drop-shadow(1px 2px 0 #1a0f0866)}
@media(max-width:740px){.hero h1.title-art{width:min(82vw,360px)}}

/* Title and copy settle in as the film lands: each line slams down with a pause between, the title shudders
   on every impact, then the red rule, copy, buttons and menu follow. */
.hdw-reveal .hero .eyebrow{animation:hdw-rise .9s ease-out both}
.hdw-reveal .hero h1 span{transform-origin:left 70%;animation:hdw-stamp .62s cubic-bezier(.3,.1,.3,1) both}
.hdw-reveal .hero h1 span:nth-child(1){animation-delay:.2s}
.hdw-reveal .hero h1 span:nth-child(2){animation-delay:1s}
.hdw-reveal .hero h1 span:nth-child(3){animation-delay:1.8s}
.hdw-reveal .hero h1{will-change:transform;animation:hdw-quake .34s .55s both,hdw-quake .34s 1.35s both,hdw-quake .34s 2.15s both}
.hdw-reveal .hero .red-rule{transform-origin:left center;animation:hdw-rule .55s 2.6s cubic-bezier(.6,0,.2,1) both}
.hdw-reveal .hero-subtitle{animation:hdw-rise .8s 2.9s ease-out both}
.hdw-reveal .hero-copy{animation:hdw-rise .8s 3.1s ease-out both}
.hdw-reveal .hero .actions{animation:hdw-rise .8s 3.3s ease-out both}
.hdw-reveal .hero-meta{animation:hdw-rise .8s 3.5s ease-out both}
.hdw-reveal .hero-bottom,.hdw-reveal body>header{animation:hdw-fade 1s 3s ease-out both}

@keyframes hdw-stamp{0%{opacity:0;transform:scale(2.3) translateY(-14px)}40%{opacity:.9}52%{opacity:1;transform:scale(.93)}68%{transform:scale(1.035)}84%{transform:scale(.99)}100%{opacity:1;transform:none}}
@keyframes hdw-quake{0%,100%{transform:none}20%{transform:translate(-4px,3px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}
@keyframes hdw-rule{from{transform:rotate(-.35deg) scaleX(0)}to{transform:rotate(-.35deg) scaleX(1)}}
@keyframes hdw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hdw-fade{from{opacity:0}to{opacity:1}}