/* public/css/hero-rotator.css
   Rotating "KIND & CURIOUS / creative." homepage header.
   Vanilla port of the /home-tester React experiment. Driven by
   /js/hero-rotator.js — it swaps the three transparent PNGs per slide and
   toggles .hh-run / .hh-exit on #hhStage to fire these keyframes.

   Three PNGs per slide, all on one 3793x573 canvas:
     kind.png + kind&curious.png + curious.png  -> creative.
     brand.png + brand&soul.png  + soul.png     -> design.
     thrive.png + thrive&defy.png + defy.png     -> bravely.
   Everything is sized as (canvas px * --k), so the layers reassemble the
   artwork exactly, scaled to fit. */

@property --rev {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* one screen tall, minus the fixed header + footer bars, so the header
   never forces a scroll — the screen is the frame, content fits inside it */
.sticky-stack { position: relative; }

.hh-hero {
  position: sticky;
  top: var(--header-h, 76px);
  width: 100%;
  height: calc(100svh - var(--header-h, 76px) - var(--footer-h, 68px));
  min-height: 420px;
  overflow: hidden;
  background: #0a0908;
  z-index: 0;
}

.hh-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hh-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    #0a0908 0%,
    rgba(10, 9, 8, 0.55) 50%,
    rgba(10, 9, 8, 0.32) 100%
  );
}

.hh-stage {
  --k: min(1px, calc(94vw / 3793), calc(46vh / 573));
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* the lockup is recentred per slide via --nudge-x (canvas px, set inline) */
.hh-lockup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + var(--nudge-x, 0) * var(--k)), -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  visibility: hidden; /* revealed by JS once the alpha scan finishes */
}

.hh-line1 {
  position: relative;
  width: calc(3793 * var(--k));
  height: calc(573 * var(--k));
  will-change: transform;
}
/* inner wrapper carries the fast exit drift so it can be added without
   restarting the slow hold drift on .hh-line1 */
.hh-line1-x {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hh-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(3793 * var(--k));
  height: auto;
  user-select: none;
}
.hh-amp { will-change: opacity; }

.hh-crop {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
}
.hh-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, -webkit-mask-position, mask-position;
}
/* --rev (0..1) sweeps a soft-edged mask across each word from the & edge
   outward; the 32% band is the feather. At --rev 1 the edge is crisp. */
.hh-crop--l .hh-slide {
  -webkit-mask-image: linear-gradient(
    to left,
    #000 calc(var(--rev, 1) * 132% - 32%),
    transparent calc(var(--rev, 1) * 132%)
  );
  mask-image: linear-gradient(
    to left,
    #000 calc(var(--rev, 1) * 132% - 32%),
    transparent calc(var(--rev, 1) * 132%)
  );
}
.hh-crop--r .hh-slide {
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(var(--rev, 1) * 132% - 32%),
    transparent calc(var(--rev, 1) * 132%)
  );
  mask-image: linear-gradient(
    to right,
    #000 calc(var(--rev, 1) * 132% - 32%),
    transparent calc(var(--rev, 1) * 132%)
  );
}

/* sub-word slides through a gradient-masked band so its edges feather */
.hh-line2 {
  display: flex;
  justify-content: center;
  width: calc(1700 * var(--k));
  transform: translateX(calc(var(--sub-shift, 0) * var(--k)));
  margin-top: calc(-40 * var(--k) - 0.3em);
  margin-bottom: -0.3em;
  padding-block: 0.3em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 84%, transparent 100%);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: calc(190 * var(--k));
  color: #f5f0e6;
}
.hh-sub {
  display: block;
  white-space: nowrap;
  letter-spacing: 0.18em;
  will-change: transform, opacity;
}

/* ---------- enter ---------- */
.hh-run .hh-crop--l .hh-slide {
  animation: hh-rev 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both,
             hh-wl 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.hh-run .hh-crop--r .hh-slide {
  animation: hh-rev 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both,
             hh-wr 0.82s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.hh-run .hh-amp {
  animation: hh-ampin 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.hh-run .hh-line1 {
  animation: hh-dh 10s linear 1s forwards;
}
.hh-run .hh-sub {
  animation: hh-subin 3.4s linear 1.4s both;
}

/* ---------- exit (replaces the enter animation on each element; --rev and
   transform fall back to their settled defaults, opacity fades) ---------- */
.hh-run.hh-exit .hh-crop--l .hh-slide,
.hh-run.hh-exit .hh-crop--r .hh-slide,
.hh-run.hh-exit .hh-amp {
  animation: hh-fo 0.6s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.hh-run.hh-exit .hh-line1-x {
  animation: hh-dx 0.75s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.hh-run.hh-exit .hh-sub {
  animation: hh-subout 1s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes hh-rev {
  from { --rev: 0; }
  to   { --rev: 1; }
}
@keyframes hh-wl {
  from { transform: translateX(14%); }
  to   { transform: translateX(0); }
}
@keyframes hh-wr {
  from { transform: translateX(-14%); }
  to   { transform: translateX(0); }
}
@keyframes hh-ampin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hh-dh {
  to { transform: translateX(calc(1000 * var(--k))); }
}
@keyframes hh-dx {
  to { transform: translateX(calc(400 * var(--k))); }
}
@keyframes hh-fo {
  to { opacity: 0; }
}
@keyframes hh-subin {
  0%    { transform: translateX(92%); opacity: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  21%   { opacity: 1; }
  29.4% { transform: translateX(0%); animation-timing-function: linear; }
  100%  { transform: translateX(-14%); }
}
@keyframes hh-subout {
  from { transform: translateX(-9%); opacity: 1; }
  to   { transform: translateX(-118%); opacity: 0; }
}

/* ---------- AI section — scrolls up over the pinned header ---------- */
.ai-embed {
  position: relative;
  z-index: 1;            /* rides over the sticky header */
  width: 100%;
  /* exactly the band between the fixed header and fixed footer, so the
     embedded /ai.html scene never runs behind either bar (its mobile chat
     panel anchors to the bottom edge — any extra height there would hide
     the Send row behind the footer). The panel itself is made to fit this
     height in matt-ai-standalone.css. */
  height: calc(100svh - var(--header-h, 76px) - var(--footer-h, 68px));
  min-height: 420px;
  background: #0a0908;   /* opaque so it actually covers the header */
}
.ai-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hh-run .hh-crop .hh-slide,
  .hh-run .hh-amp,
  .hh-run .hh-line1,
  .hh-run .hh-sub,
  .hh-run.hh-exit .hh-crop .hh-slide,
  .hh-run.hh-exit .hh-amp,
  .hh-run.hh-exit .hh-line1-x,
  .hh-run.hh-exit .hh-sub { animation: none !important; }
  .hh-sub { opacity: 1; }
}