/* ================================================================
   HOME — SECOND ACT (one-shot clip)

   One scroll push arms it; the clip then plays at its own rate. There
   is no scroll runway, so the landing keeps its original
   `height:100%; overflow:hidden` model — nothing about the landing
   page is altered. The stage is a fixed overlay above it.

   Every rule is gated behind `body.page-index.has-hs`, which
   home-scroll.js only adds once the clip can play through.
   ================================================================ */

/* ── LANDING HAND-OFF ───────────────────────────────────────────
   .hs-on = armed. The name lockup leaves first and fastest so the cut
   into the video has nothing left to jump against.
   !important is load-bearing: main.js runs reveal keyframes on these
   elements, and CSS animations outrank normal declarations. */
body.page-index.has-hs .slide-group,
body.page-index.has-hs .side,
body.page-index.has-hs .bg-layer {
  transition: opacity 420ms ease 90ms;
}
body.page-index.has-hs.hs-on .slide-group,
body.page-index.has-hs.hs-on .side,
body.page-index.has-hs.hs-on .bg-layer {
  opacity: 0 !important;
  pointer-events: none !important;
}
/* The base .name-section is opacity:0 — the `nameReveal` keyframes supply
   the 1, and once that animation finishes and is cleared the element falls
   back to 0. has-hs is only added after the boot sequence has settled, so
   pinning it visible here restores the landing's resting state rather than
   skipping the reveal. */
body.page-index.has-hs .name-section {
  opacity: 1 !important;
  transition: opacity 260ms ease;
}
body.page-index.has-hs.hs-on .name-section { opacity: 0 !important; }

/* ── STAGE ──────────────────────────────────────────────────────
   Fixed overlay. Below the CRT frame/overlay (9950+) and the nav, so
   the television treatment still sits on top of the clip. */
.hs-stage {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease;
}
body.page-index.has-hs.hs-on .hs-stage { opacity: 1; }

.hs-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* keep the clip on its own compositor layer so scaling the 4K surface
     does not repaint the page behind it */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* white-cyc studio plate, same key as the landing portrait, so the
     two cross-fade without a colour step */
  background: #f2f2f2;
}

.hs-freeze {
  position: absolute;
  z-index: 1;
  display: block;
  opacity: 0;
  pointer-events: none;
  background: #f2f2f2;
  transform: translateZ(0);
}
.hs-freeze.is-visible { opacity: 1; }

/* ── BLUE / RED TREATMENT ───────────────────────────────────────
   Carries the landing's palette across the clip: a standing chromatic
   split (blue left, red right) plus scanlines, so the video reads as
   the same television signal rather than a dropped-in movie. */
/* PERF: no mix-blend-mode and no running animation here. Blending a
   full-viewport layer over a 3840x2160 video surface forces the
   compositor to re-read and re-blend the whole frame every tick, which
   is what made playback stutter. Plain translucent gradients composite
   on the GPU for free. */
.hs-rgb {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
  background:
    linear-gradient(90deg,  rgba(40, 130, 255, 0.26) 0%, rgba(40,130,255,0) 24%),
    linear-gradient(270deg, rgba(255, 60,  40,  0.26) 0%, rgba(255,60,40,0)  24%);
}

.hs-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.20;
  /* see the PERF note above — no mix-blend-mode */
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0.42) 0 1px, transparent 1px 3px);
}

/* ── GLITCH — the hand-off ──────────────────────────────────────
   Fires once as the clip is armed, in the same blue/red as above so
   the cut belongs to the signal. */
.hs-glitch {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg,  rgba(0, 150, 255, 0.55), transparent 18%),
    linear-gradient(270deg, rgba(255, 40, 30, 0.55), transparent 18%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.10) 0 2px, transparent 2px 7px);
}
.hs-stage.is-glitching .hs-glitch { animation: hsGlitch 420ms steps(4) 1; }
.hs-stage.is-glitching .hs-video  { animation: hsSlip   420ms steps(4) 1; }

@keyframes hsGlitch {
  0%   { opacity: 0;    transform: translate3d(0,0,0); }
  18%  { opacity: 1;    transform: translate3d(-3.5%,0,0); }
  42%  { opacity: 0.75; transform: translate3d(2.5%,-0.6%,0); }
  68%  { opacity: 1;    transform: translate3d(-1.5%,0.4%,0); }
  100% { opacity: 0;    transform: translate3d(0,0,0); }
}
@keyframes hsSlip {
  0%, 100% { transform: translate3d(0,0,0) scale(1); filter: none; }
  22%      { transform: translate3d(-1.1%,0,0) scale(1.015);
             filter: saturate(1.8) hue-rotate(-12deg); }
  55%      { transform: translate3d(0.8%,0,0)  scale(1.008);
             filter: saturate(0.7) hue-rotate(10deg); }
}

/* ── THE TWO DESTINATION PILLS ──────────────────────────────────
   Exact 1920x1080 reference proportions: 371x125 capsules centred at
   28.4% and 69.2% across the open palms. They arrive only after the
   footage freezes, with one quiet simultaneous settle. */
.hs-choice {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}
body.page-index.has-hs.hs-pill-in .hs-choice { opacity: 1; }
.hs-choice[data-ready="1"] { pointer-events: none; }
body.page-index.has-hs.hs-done .hs-choice[data-ready="1"] { pointer-events: auto; }

.hs-pill {
  --light-dx: 0%;
  --light-dy: 0%;
  position: absolute;
  width: clamp(220px, 19.323vw, 371px);
  aspect-ratio: 2.968 / 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: visible;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  scale: 1;
  box-shadow:
    0 13px 28px rgba(15, 10, 12, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    inset 0 3px 5px rgba(255, 255, 255, 0.34),
    inset 0 -14px 22px rgba(0, 0, 0, 0.13);
  transition: scale 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms ease;
  isolation: isolate;
  -webkit-backdrop-filter: blur(8px) saturate(1.32);
  backdrop-filter: blur(8px) saturate(1.32);
}
/* Fallback only. home-scroll.js overwrites these values after measuring
   the displayed video frame so cropping can never move the pills away
   from the hands. */
.hs-pill--blue {
  left: 28.4%;
  top: 44.4%;
  background:
    radial-gradient(ellipse 54% 112% at 64% 74%,
      rgba(178, 245, 255, 0.78) 0%,
      rgba(47, 189, 239, 0.38) 30%,
      rgba(74, 171, 210, 0) 62%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.025) 42%,
      rgba(8, 39, 62, 0.18) 100%),
    linear-gradient(102deg,
      rgba(21, 113, 176, .82) 0%,
      rgba(31, 157, 213, .80) 24%,
      rgba(73, 210, 244, .78) 48%,
      rgba(153, 238, 255, .74) 64%,
      rgba(53, 183, 230, .79) 80%,
      rgba(20, 111, 176, .84) 100%);
}
.hs-pill--red {
  left: 69.2%;
  top: 44.4%;
  background:
    radial-gradient(ellipse 52% 112% at 38% 72%,
      rgba(255, 222, 116, 0.82) 0%,
      rgba(255, 105, 45, 0.44) 28%,
      rgba(255, 111, 45, 0) 58%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.02) 42%,
      rgba(69, 10, 6, 0.19) 100%),
    linear-gradient(102deg,
      rgba(181, 35, 24, .84) 0%,
      rgba(232, 58, 35, .82) 24%,
      rgba(255, 145, 68, .80) 40%,
      rgba(246, 73, 38, .82) 62%,
      rgba(217, 47, 28, .84) 80%,
      rgba(177, 31, 24, .86) 100%);
}

/* A quiet visual link to the real tablet below each control. */
.hs-pill-pointer {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  z-index: 2;
  width: 1.5px;
  height: clamp(42px, 5.3vw, 82px);
  transform-origin: top;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.76), rgba(255,255,255,.22));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
  opacity: 0;
  transition: opacity 420ms 360ms ease, transform 600ms 260ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.hs-pill--blue .hs-pill-pointer { left: 56%; transform: rotate(13deg) scaleY(.25); }
.hs-pill--red  .hs-pill-pointer { left: 44%; transform: rotate(-13deg) scaleY(.25); }
.hs-pill-pointer::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  height: 6px;
  border-right: 1px solid rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.62);
  transform: translateX(-50%) rotate(45deg);
}
body.page-index.has-hs.hs-done .hs-pill-pointer { opacity: .78; }
body.page-index.has-hs.hs-done .hs-pill--blue .hs-pill-pointer { transform: rotate(13deg) scaleY(1); }
body.page-index.has-hs.hs-done .hs-pill--red  .hs-pill-pointer { transform: rotate(-13deg) scaleY(1); }

/* Resin-like reflections copied from the two physical capsules. Their
   highlights stay anchored to the object and move only a few percent,
   rather than sweeping across like a generic glass UI control. */
.hs-pill::before,
.hs-pill::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.hs-pill::before {
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  transform: translate3d(-3%, 1%, 0);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.38),
    inset 0 -2px 4px rgba(15, 24, 31, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition:
    opacity 620ms 120ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hs-pill--blue::before {
  background:
    radial-gradient(ellipse 50% 105% at 64% 74%,
      rgba(207, 248, 255, 0.40) 0%,
      rgba(154, 229, 248, 0.12) 42%,
      rgba(154, 229, 248, 0) 72%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.02) 44%,
      rgba(0, 0, 0, 0.09));
}
.hs-pill--red::before {
  background:
    radial-gradient(ellipse 48% 105% at 38% 72%,
      rgba(255, 220, 137, 0.40) 0%,
      rgba(255, 151, 80, 0.12) 42%,
      rgba(255, 151, 80, 0) 72%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.018) 44%,
      rgba(0, 0, 0, 0.10));
}
.hs-pill::after {
  z-index: 2;
  opacity: 0;
  transition: opacity 620ms 180ms ease;
}
.hs-pill--blue::after {
  left: 15%;
  top: 15%;
  width: 68%;
  height: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.32) 18%,
    rgba(255, 255, 255, 0.08) 58%,
    rgba(255, 255, 255, 0.38) 80%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(0.45px);
}
.hs-pill--red::after {
  left: 76%;
  top: 27%;
  width: 10%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.48) 42%,
    rgba(255, 255, 255, 0) 76%);
  filter: blur(0.35px);
}

/* Retained in the markup for compatibility with already cached HTML,
   but the old circular halo/pulse treatment is intentionally gone. */
.hs-pill-halo { display: none; }

.hs-pill-label {
  position: relative;
  z-index: 3;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: clamp(1.15rem, 1.5vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #090909;
  text-shadow: none;
}

body.page-index.has-hs.hs-pill-in .hs-pill {
  animation: hsPillSettle 580ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
body.page-index.has-hs.hs-pill-in .hs-pill::before {
  opacity: 1;
  transform: translate3d(var(--light-dx), var(--light-dy), 0);
}
body.page-index.has-hs.hs-done .hs-pill::after {
  opacity: 0.82;
  animation: hsSpecularDrift 3.8s 180ms ease-in-out infinite alternate;
}
body.page-index.has-hs.hs-done .hs-pill--red::after {
  opacity: 0.94;
  animation-delay: 620ms;
}
@keyframes hsPillSettle {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hsSpecularDrift {
  0% {
    transform: translate3d(calc(var(--light-dx) - 2%),
                           calc(var(--light-dy) + 0.5%), 0);
  }
  100% {
    transform: translate3d(calc(var(--light-dx) + 2%),
                           calc(var(--light-dy) - 0.5%), 0);
  }
}

.hs-pill:hover,
.hs-pill:focus-visible {
  scale: 1.015;
  box-shadow:
    0 17px 38px rgba(18, 12, 16, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.23),
    inset 0 3px 4px rgba(255, 255, 255, 0.30),
    inset 0 -13px 20px rgba(0, 0, 0, 0.17);
}
.hs-pill:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 5px; }
.hs-pill:active { scale: 0.985; }

/* ── SCROLL CUE ─────────────────────────────────────────────────
   Only while the clip is still waiting to be armed. */
.hs-cue {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 45;
  font-family: 'Type Machine', 'Space Grotesk', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(28, 25, 23, 0.5);
  pointer-events: none;
  opacity: 1;
  transition: opacity 240ms ease;
  animation: hsCue 2.4s ease-in-out infinite;
}
body.page-index.has-hs.hs-on .hs-cue { opacity: 0; }
@keyframes hsCue {
  0%, 100% { transform: translate(-50%, 0);   opacity: 0.5; }
  50%      { transform: translate(-50%, 5px); opacity: 0.95; }
}

/* Portrait / narrow: `cover` crops a 16:9 clip so hard on a tall screen
   that both hands fall outside the viewport — the blue capsule landed at
   x = -113px on a 375x812 phone. Letterbox instead so the whole frame,
   and therefore both pills, stay on screen. home-scroll.js reads the
   computed object-fit and switches its maths to match. */
@media (max-aspect-ratio: 1/1), (max-width: 768px) {
  .hs-video { object-fit: contain; }
}

@media (max-width: 768px) {
  /* The sawtooth scanline overlay comes off on phones: 1px stripes on a
     2-3x screen alias into a coarse crawling moire over the video rather
     than reading as CRT texture, and it costs a full-viewport composite
     every frame on the weakest hardware. The blue/red .hs-rgb split
     stays, so the clip still matches the landing's treatment. */
  .hs-scan { display: none; }
}

/* Motion-sensitive users: no glitch or settle. The stage still fades in
   and the clip still plays. */
@media (prefers-reduced-motion: reduce) {
  .hs-stage.is-glitching .hs-glitch,
  .hs-stage.is-glitching .hs-video { animation: none; }
  body.page-index.has-hs.hs-pill-in .hs-pill {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  body.page-index.has-hs.hs-done .hs-pill::after,
  body.page-index.has-hs.hs-done .hs-pill:hover::after,
  body.page-index.has-hs.hs-done .hs-pill:focus-visible::after {
    animation: none;
    transform: none;
  }
  .hs-pill::before { transition: none; }
  .hs-cue { animation: none; }
  .hs-rgb { animation: none; }
}