/* ============================================================ HERO INTRO — curtain reveal, per-character headline, parallax Only active when hero-intro.js adds .js-hero to . ============================================================ */ /* ---------- curtain ---------- */ .hero-curtain{position:absolute;inset:0;z-index:6;display:flex;pointer-events:none} .hero-curtain b{flex:1;background:var(--teal-darkest);transform-origin:top;transform:scaleY(1);animation:curtainUp 1.15s cubic-bezier(.76,0,.24,1) forwards;animation-delay:var(--cd,0ms)} @keyframes curtainUp{to{transform:scaleY(0)}} /* ---------- photo settle ---------- */ /* scale + opacity only — a full-viewport blur() repaints every frame and was the main cost of this intro */ .js-hero .hero-photo{animation:none;transform:scale(1.22);opacity:.35;transition:transform 2.2s cubic-bezier(.16,.84,.32,1),opacity 1.2s ease} .js-hero .hero-photo.is-settled,.js-hero .hero-slide.is-active .hero-photo.is-settled{transform:scale(1.06);opacity:1} .js-hero .hero-slide:not(.is-active) .hero-photo{transform:scale(1.12);opacity:1;transition:none} .js-hero .hero-veil{opacity:0;transition:opacity 1.6s ease .5s} .js-hero.hero-lit .hero-veil{opacity:1} /* ---------- staged entrances ---------- */ .js-hero .hero-tag,.js-hero .hero-sub,.js-hero .hero-link,.js-hero .hero-quick{animation:none;opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,.84,.32,1);transition-delay:var(--hd,0ms)} .js-hero.hero-lit .hero-tag,.js-hero.hero-lit .hero-sub,.js-hero.hero-lit .hero-link,.js-hero.hero-lit .hero-quick{opacity:1;transform:none} .js-hero .hero-tag-line{width:0;transition:width 1s cubic-bezier(.16,.84,.32,1) .78s} .js-hero.hero-lit .hero-tag-line{width:48px} /* ---------- headline, per character ---------- */ .js-hero .hero-title{perspective:900px} .js-hero .hero-title-line{animation:none;opacity:1;transform:none;display:block} .js-hero .hc{display:inline-block;overflow:hidden;vertical-align:top} .js-hero .hc i{display:inline-block;font-style:inherit;transform:translate3d(0,105%,0) rotateX(-48deg);opacity:0;transform-origin:top center;transition:transform 1.05s cubic-bezier(.16,.84,.32,1),opacity .5s ease;transition-delay:var(--cdl,0ms)} .js-hero.hero-lit .hc i{transform:none;opacity:1} /* vertical setting: characters arrive from the leading edge instead */ @media (max-width: 600px){ .js-hero .hc i{transform:translate3d(60%,0,0) rotateY(42deg);transform-origin:right center} } /* ---------- sweep rule under the headline ---------- */ .hero-rule{display:block;height:1px;width:min(420px,62%);margin-top:30px;background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.05));transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.16,.84,.32,1) 1.45s} .js-hero.hero-lit .hero-rule{transform:none} @media (max-width: 600px){ /* The desktop sweep sits before the vertical headline in the mobile flex flow, which makes it read as an unintended rule through the header area. Keep the accent on larger screens and remove it from the compact hero. */ .hero-rule{display:none} } /* ---------- scroll cue ---------- */ .hero-cue{position:absolute;right:var(--pad-x);bottom:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transition:opacity 1s ease 2.3s;pointer-events:none} .js-hero.hero-lit .hero-cue{opacity:1} .hero-cue span{font-family:var(--en);font-size:10px;letter-spacing:.28em;writing-mode:vertical-rl;color:rgba(255,255,255,.75)} .hero-cue b{display:block;width:1px;height:96px;background:rgba(255,255,255,.28);position:relative;overflow:hidden} .hero-cue b::after{content:"";position:absolute;inset:0;background:#fff;transform:translateY(-100%);animation:cueRun 2.4s cubic-bezier(.65,0,.35,1) infinite} @keyframes cueRun{0%{transform:translateY(-100%)}55%{transform:translateY(100%)}100%{transform:translateY(100%)}} @media (max-width: 880px){.hero-cue{display:none}} /* ---------- slide crossfade with drift ---------- */ .js-hero .hero-slide{transition:opacity 1.9s cubic-bezier(.4,0,.2,1)} /* ---------- scroll parallax ---------- */ .js-hero .hero-content,.js-hero .hero-slides{will-change:transform} .js-hero.hero-done .hero-content,.js-hero.hero-done .hero-slides,.js-hero.hero-done .hc i{will-change:auto} .js-hero.hero-done .hc{overflow:visible} @media (prefers-reduced-motion: reduce){ .hero-curtain{display:none} .js-hero .hero-photo,.js-hero .hero-slide.is-active .hero-photo{transform:scale(1.06)!important;opacity:1!important;transition:none!important} .js-hero .hero-tag,.js-hero .hero-sub,.js-hero .hero-link,.js-hero .hero-quick,.js-hero .hc i{opacity:1!important;transform:none!important;transition:none!important} .js-hero .hero-tag-line{width:48px} .js-hero .hero-veil{opacity:1} .hero-rule{transform:none} .hero-cue b::after{animation:none} .js-hero .hero-content,.js-hero .hero-slides{transform:none!important} }