/* ==========================================================
   REZN® — hero entrance (plays when the preloader curtain lifts)
   html.intro-wait  → everything sits in its start position
   html.intro-go    → (intro-wait removed) everything travels home, staggered
   intro.js splits the texts into letters / words and flips the classes.
   ========================================================== */
:root { --in-ease: cubic-bezier(.16, 1, .3, 1); --in-ease-io: cubic-bezier(.76, 0, .24, 1); }

/* ---------- masked pieces: letters of REZN, words of the claim / manifest ---------- */
.in-m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.in-m > .in-i { display: inline-block; will-change: transform; }
.brand__word.is-split { display: flex; }
.brand__word .in-m { padding-top: .06em; margin-top: -.06em; }

html.intro-wait .in-m > .in-i { transform: translateY(110%) rotate(4deg); }
html.intro-wait .brand__word .in-m > .in-i { transform: translateY(105%); }
html.intro-go .in-m > .in-i {
  transform: none;
  transition: transform 1.25s var(--in-ease);
  transition-delay: calc(var(--in-base, 0s) + var(--k) * var(--in-step, 40ms));
}
.brand__word { --in-base: .05s; --in-step: 70ms; }
.hero__claim { --in-base: .55s; --in-step: 55ms; }
.hero__manifest { --in-base: .8s; --in-step: 22ms; }

/* ---------- simple fades ---------- */
html.intro-wait :is(.brand__reg, .brand__sub, .meta, .hero__services li, .author, .trusted, .hero__ctas > *, .hero__manifest .slash) {
  opacity: 0;
}
html.intro-wait :is(.brand__sub, .hero__services li, .author, .trusted, .hero__ctas > *) { transform: translateY(18px); }
html.intro-wait .meta { transform: translateY(-14px); }
html.intro-wait .hero__manifest .slash { transform: rotate(-60deg) translateX(-20px); }
html.intro-go :is(.brand__reg, .brand__sub, .meta, .hero__services li, .author, .trusted, .hero__ctas > *, .hero__manifest .slash) {
  transition: opacity 1s var(--in-ease), transform 1.2s var(--in-ease);
}
html.intro-go .brand__reg { transition-delay: .55s; }
html.intro-go .brand__sub { transition-delay: .6s; }
html.intro-go .meta { transition-delay: .45s; }
html.intro-go .hero__services li { transition-delay: calc(.35s + var(--k, 0) * 70ms); }
html.intro-go .hero__manifest .slash { transition-delay: .75s; }
html.intro-go .author { transition-delay: 1.05s; }
html.intro-go .trusted { transition-delay: 1.15s; }
html.intro-go .hero__ctas > * { transition-delay: calc(1.2s + var(--k, 0) * 90ms); }
.hero__manifest .slash { display: inline-block; }

/* ---------- portrait: the screen rises in, the photo settles (transform + opacity only, cheap for the GPU) ---------- */
html.intro-wait .portrait__stage { opacity: 0; transform: translateY(90px) scale(.9); }
html.intro-go .portrait__stage { transition: opacity 1.2s var(--in-ease) .15s, transform 1.6s var(--in-ease) .15s; }
.portrait__screen img { will-change: transform; }
html.intro-wait .portrait__screen img { transform: scale(1.3); opacity: .35; }
html.intro-wait .portrait__reflect { opacity: 0; }
html.intro-wait .portrait__code > * { opacity: 0; }
html.intro-go .portrait__screen img { transition: transform 2.2s var(--in-ease) .2s, opacity 1.6s var(--in-ease) .35s; }
html.intro-go .portrait__reflect { transition: opacity 1.4s ease 1s; }
html.intro-go .portrait__code > * { transition: opacity 1.6s ease; transition-delay: calc(1.1s + var(--k, 0) * .25s); }


@media (prefers-reduced-motion: reduce) {
  html.intro-wait * { transform: none !important; clip-path: none !important; filter: none !important; translate: none !important; }
  html.intro-go * { transition-duration: .4s !important; transition-delay: 0s !important; }
}

/* keep the GPU free for the entrance: the animated grain waits until it is over */
html.intro-wait .grain, html.intro-go .grain { animation-play-state: paused; }