/* Walley landing — scene styles. Order mirrors the scroll: dead →
   multi-monitor → native → auto-pause → finale. */

/* pinned scenes manage their own centering via [data-pin] */
.scene:has([data-pin]) { padding: 0; min-height: 100svh; }
[data-pin] {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 11vh, 8rem) var(--gutter);
  overflow: hidden;
}

/* gradient keyword ink, ignited by life */
.kw--alive {
  background: var(--grad-wave);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kw em { font-style: normal; color: var(--cyan); }

/* shared fake "live wallpaper" surfaces — different per use, all GPU-cheap */
.flow { will-change: background-position, transform, opacity; }
body:not(.alive) .flow { animation-play-state: paused; }

/* mascot styling (used by the finale + footer cameos) */
.ghost { width: 100%; height: 100%; overflow: visible; }
.ghost .g-body { filter: drop-shadow(0 0 16px rgba(54, 182, 255, 0.5)); }
.ghost .g-gloss, .ghost .g-streak { opacity: calc(0.15 + 0.85 * var(--life)); }

/* =====================================================================
   §1 DEAD DESKTOP
   ===================================================================== */
.scene--dead { position: relative; }
.mac__menubar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 30px;
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: rgba(220, 232, 245, 0.62);
  background: rgba(8, 16, 30, 0.52);
  backdrop-filter: blur(8px) saturate(0.4);
  -webkit-backdrop-filter: blur(8px) saturate(0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mac__apple {
  width: 13px; height: 15px; display: inline-block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath d='M788 340c-6 4-114 65-114 199 0 155 136 210 140 211-1 3-22 74-72 147-44 64-90 128-160 128s-88-41-169-41c-79 0-107 42-171 42s-108-59-159-131C18 814-21 657 18 540 53 437 130 380 222 366c52-9 100 23 134 23 32 0 95-29 159-29 23 0 89 2 158 73-4 4-2 2-46-93zM557 130c30-36 51-86 51-136 0-7-1-14-2-19-49 2-107 33-141 73-27 31-52 81-52 132 0 8 1 15 2 18 3 1 8 1 13 1 44 0 99-29 129-69z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 814 1000'%3E%3Cpath d='M788 340c-6 4-114 65-114 199 0 155 136 210 140 211-1 3-22 74-72 147-44 64-90 128-160 128s-88-41-169-41c-79 0-107 42-171 42s-108-59-159-131C18 814-21 657 18 540 53 437 130 380 222 366c52-9 100 23 134 23 32 0 95-29 159-29 23 0 89 2 158 73-4 4-2 2-46-93zM557 130c30-36 51-86 51-136 0-7-1-14-2-19-49 2-107 33-141 73-27 31-52 81-52 132 0 8 1 15 2 18 3 1 8 1 13 1 44 0 99-29 129-69z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mac__app { font-weight: 700; color: rgba(230, 240, 250, 0.85); }
.mac__spacer { flex: 1; }
.mac__menus { opacity: 0.6; }
@media (max-width: 560px) { .mac__menus { display: none; } }

.s1-center { text-align: center; z-index: 2; }
.s1-state { color: rgba(180, 200, 220, 0.5); margin: 0 0 1rem; }
.s1-tag { color: rgba(225, 238, 250, 0.9); font-size: clamp(1.6rem, 6.4vw, 4rem); }
.scene--dead .s1-tag em { color: rgba(150, 210, 245, 0.9); }

.mac__dock {
  position: absolute; bottom: clamp(1rem, 3.5vh, 2.4rem); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.55rem; padding: 0.5rem 0.7rem;
  border-radius: 22px;
  background: rgba(12, 22, 40, 0.4);
  backdrop-filter: blur(12px) saturate(0.5);
  -webkit-backdrop-filter: blur(12px) saturate(0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
  z-index: 3;
}
.mac__dock .tile {
  width: clamp(34px, 6vw, 50px); aspect-ratio: 1;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(120, 150, 180, 0.5), rgba(40, 60, 90, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.mac__dock .tile--walley { background: none; overflow: hidden; }
.mac__dock .tile--walley img { width: 100%; height: 100%; object-fit: contain; }
.mac__dock[data-dead] { filter: grayscale(1) brightness(0.8); }

.scrollcue {
  position: absolute; bottom: clamp(6.5rem, 13vh, 8.5rem); left: 50%;
  transform: translateX(-50%);
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  font-family: var(--mono); letter-spacing: 0.34em;
  text-transform: uppercase; color: rgba(225, 238, 250, 0.8);
  z-index: 3;
}
.scrollcue__label { font-size: 13px; font-weight: 700; color: #eaf6ff; text-shadow: 0 1px 12px rgba(0, 20, 50, 0.6); }
.scrollcue__chev {
  width: 12px; height: 12px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: cueBounce 1.8s ease-in-out infinite;
}
@keyframes cueBounce { 0%,100% { transform: translateY(-3px) rotate(45deg); opacity: 0.4; } 50% { transform: translateY(3px) rotate(45deg); opacity: 1; } }

/* =====================================================================
   §2 HERO / AWAKEN
   ===================================================================== */
.hero__ring {
  position: absolute; left: 50%; top: 46%;
  width: 40vmax; height: 40vmax; margin: -20vmax 0 0 -20vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 231, 255, 0.32) 0%, rgba(54, 182, 255, 0.12) 38%, transparent 62%);
  transform: scale(0);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero__center { text-align: center; z-index: 2; position: relative; }
.hero__kicker { color: var(--cyan); opacity: 0.8; margin: 0 0 0.8rem; }
.hero__word {
  margin: 0;
  background: var(--grad-wave);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px rgba(10, 132, 255, 0.25));
}
.hero__sub { margin: 0.6rem 0 0; color: rgba(230, 244, 255, 0.92); letter-spacing: 0.02em; line-height: 1.04; font-size: clamp(1.1rem, 3.4vw, 2.3rem); }

/* §1 intro — the kept Mac frame over the persistent wallpaper */
.scene--intro { padding: 0; }
/* the wordmark wakes from grey to colour with the wallpaper */
.intro__center { position: relative; z-index: 2; text-align: center; filter: grayscale(calc(1 - var(--life))); }

/* =====================================================================
   persistent Mac frame — menu bar + dock + edge, kept the whole way down
   ===================================================================== */
.macframe { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
/* the bar/dock reuse .mac__menubar / .mac__dock; anchored to the fixed frame, above the edge */
.macframe__bar { position: fixed; z-index: 2; }
.macframe__dock { position: fixed; z-index: 2; }
/* a hairline (plus the faintest vignette) reads the whole viewport as one Mac screen */
.macframe__edge {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow:
    inset 0 0 0 1px rgba(180, 215, 245, 0.12),
    inset 0 0 90px rgba(2, 8, 22, 0.22);
}

/* =====================================================================
   §3 MULTI-MONITOR
   ===================================================================== */
.mm__head, .play__head, .nap__head, .nat__head {
  /* sits clear of the persistent menu bar at the top of the frame */
  position: absolute; top: clamp(2.8rem, 7vh, 4rem); left: 50%;
  transform: translateX(-50%);
  z-index: 4; text-align: center; pointer-events: none;
  font-size: clamp(1.7rem, 5.6vw, 4rem); line-height: 0.92; max-width: 96vw;
}
.mm__head span, .play__head span, .nap__head span, .nat__head span { display: block; white-space: nowrap; }
/* this title is a longer phrase — slightly smaller cap so it never clips */
.nat__head { font-size: clamp(1.55rem, 5vw, 3.5rem); }
@media (max-width: 620px) {
  .mm__head, .play__head, .nap__head, .nat__head { white-space: normal; font-size: clamp(1.5rem, 8vw, 2.4rem); }
  /* let each line wrap on phones so long titles never clip */
  .mm__head span, .play__head span, .nap__head span, .nat__head span { white-space: normal; }
}
.mm__head span:last-child, .play__head span:last-child,
.nap__head span:last-child { color: var(--cyan); }

.mm__stage {
  position: relative;
  width: min(1040px, 92vw); aspect-ratio: 16 / 9;
}

.dev { position: absolute; }
.dev__screen {
  position: relative; overflow: hidden;
  border-radius: 10px;
  background: #050b16;
  box-shadow: 0 30px 60px rgba(0, 20, 50, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.dev__screen::after { /* inner depth on the glass */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.4);
  pointer-events: none; z-index: 3;
}
.wp { position: absolute; inset: 0; }
.wp + .wp { opacity: 0; } /* the "next" variant, revealed on rotation */

/* three AGGRESSIVELY different loops (hue + direction + speed) */
.wp--A  { background: linear-gradient(90deg, #0066FF, #7FE7FF, #36B6FF, #0066FF); background-size: 300% 100%; animation: flowX 9s linear infinite; }
.wp--A2 { background: linear-gradient(90deg, #00E0C6, #7FE7FF, #2BD1FF, #00E0C6); background-size: 300% 100%; animation: flowX 9s linear infinite; }
.wp--B  { background: linear-gradient(0deg, #021a44, #0A84FF, #36B6FF, #021a44); background-size: 100% 320%; animation: flowY 13s linear infinite; }
.wp--B2 { background: linear-gradient(0deg, #04122B, #6A5CFF, #36B6FF, #04122B); background-size: 100% 320%; animation: flowY 13s linear infinite; }
.wp--C  { background: conic-gradient(from 200deg at 50% 50%, #7FE7FF, #36B6FF, #0A84FF, #0066FF, #7FE7FF); background-size: 220% 220%; animation: spinHue 7s linear infinite; }
.wp--C2 { background: conic-gradient(from 20deg at 50% 50%, #FF9FB0, #7FE7FF, #36B6FF, #0A84FF, #FF9FB0); background-size: 220% 220%; animation: spinHue 7s linear infinite; }
@keyframes flowX { to { background-position: 300% 0; } }
@keyframes flowY { to { background-position: 0 320%; } }
@keyframes spinHue { to { transform: rotate(360deg) scale(1.4); } }

/* =====================================================================
   reusable "video footage" scenes — CSS art that reads as a real clip
   playing as a wallpaper (the whole point: custom VIDEO live wallpaper)
   ===================================================================== */
.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden; background: #04122B; }
.vid::before, .vid::after { content: ""; position: absolute; inset: 0; }

/* sunset over the ocean */
.vid--ocean { background: linear-gradient(#243a7a 0%, #6a4f8e 26%, #c8607a 44%, #ff9d5c 55%, #ffd089 60%, #0f3a63 60.4%, #0a2c4d 80%, #061d36 100%); }
.vid--ocean::before { background: radial-gradient(circle at 50% 55%, #fff6d4 0 3.5%, rgba(255,205,130,0.9) 7%, rgba(255,165,95,0.28) 16%, transparent 27%); }
.vid--ocean::after {
  top: 60.4%;
  background:
    radial-gradient(60% 100% at 50% 0, rgba(255,210,150,0.7), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,225,180,0) 0 7px, rgba(255,225,180,0.18) 7px 10px);
  -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%);
  animation: oceanShimmer 7s linear infinite;
}
@keyframes oceanShimmer { to { background-position: 0 0, 90px 0; } }

/* night city skyline */
.vid--city { background: linear-gradient(#02091a 0%, #071f38 60%, #0b3354 80%, #114a6e 100%); }
.vid--city::before {
  background: bottom / 100% auto no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='200'%3E%3Cg fill='%23020a16'%3E%3Crect x='0' y='130' width='46' height='70'/%3E%3Crect x='40' y='95' width='34' height='105'/%3E%3Crect x='78' y='120' width='40' height='80'/%3E%3Crect x='120' y='70' width='28' height='130'/%3E%3Crect x='150' y='110' width='44' height='90'/%3E%3Crect x='196' y='55' width='32' height='145'/%3E%3Crect x='230' y='100' width='38' height='100'/%3E%3Crect x='270' y='125' width='46' height='75'/%3E%3Crect x='318' y='85' width='30' height='115'/%3E%3Crect x='350' y='115' width='40' height='85'/%3E%3Crect x='392' y='95' width='28' height='105'/%3E%3C/g%3E%3C/svg%3E");
}
.vid--city::after {
  background-image:
    radial-gradient(1px 1px at 14% 72%, #ffd98a 99%, transparent), radial-gradient(1px 1px at 17% 84%, #ffe6a8 99%, transparent),
    radial-gradient(1px 1px at 33% 66%, #ffd98a 99%, transparent), radial-gradient(1px 1px at 52% 78%, #cfe9ff 99%, transparent),
    radial-gradient(1px 1px at 56% 64%, #ffd98a 99%, transparent), radial-gradient(1px 1px at 74% 80%, #ffe6a8 99%, transparent),
    radial-gradient(1px 1px at 84% 70%, #cfe9ff 99%, transparent), radial-gradient(1px 1px at 47% 90%, #ffd98a 99%, transparent);
  animation: cityTwinkle 3.5s steps(1) infinite;
}
@keyframes cityTwinkle { 0%,100% { opacity: 0.85; } 33% { opacity: 0.4; } 66% { opacity: 1; } }

/* aurora over the arctic */
.vid--aurora { background: radial-gradient(130% 90% at 50% 120%, #0c3a52 0%, #06203b 42%, #02060f 100%); }
.vid--aurora::before {
  top: -18%; height: 96%;
  background: linear-gradient(102deg, transparent 18%, rgba(43,209,160,0.5) 40%, rgba(127,231,255,0.62) 52%, rgba(106,92,255,0.5) 66%, transparent 84%);
  filter: blur(16px); transform: skewY(-8deg);
  animation: auroraDrift 9s ease-in-out infinite alternate;
}
.vid--aurora::after {
  background-image:
    radial-gradient(1px 1px at 18% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 64% 14%, #cfe 99%, transparent),
    radial-gradient(1px 1px at 82% 30%, #fff 99%, transparent), radial-gradient(1px 1px at 40% 28%, #bdf 99%, transparent),
    radial-gradient(1px 1px at 30% 12%, #fff 99%, transparent);
}
@keyframes auroraDrift { from { transform: skewY(-8deg) translateX(-9%) scaleY(1); } to { transform: skewY(-13deg) translateX(9%) scaleY(1.18); } }

/* drone over a valley (cool alt) */
.vid--valley { background: linear-gradient(#3a6ea8 0%, #6fa6cf 30%, #bfe0ec 46%, #0e3a52 47%, #0a2c45 100%); }
.vid--valley::before {
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(to top, #08263e 0 14%, transparent 30%),
    linear-gradient(to top, rgba(20,74,110,0.9) 0 22%, transparent 40%);
}
.vid--valley::after { background: linear-gradient(to top, rgba(200,230,240,0.22), transparent 35%); animation: mist 10s ease-in-out infinite alternate; }
@keyframes mist { from { transform: translateX(-4%); opacity: 0.5; } to { transform: translateX(4%); opacity: 0.9; } }

.vid.is-still::before, .vid.is-still::after { animation-play-state: paused; }

/* =====================================================================
   .bg — the one persistent wallpaper, fixed behind everything.
   B&W + still at the top, wakes to colour + slow motion as --life rises.
   ===================================================================== */
.bg {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* B&W when asleep → colour as --life rises; motion comes from the video itself
     (JS pauses it at the top and during auto-pause = the frozen still) */
  filter: grayscale(calc(1 - var(--life))) brightness(calc(0.55 + 0.45 * var(--life)));
  will-change: filter;
}

/* video footage placed as a real wallpaper inside the scenes */
.deadwall { z-index: 0; filter: grayscale(1) brightness(0.6) contrast(0.95); }
.hero__wall { z-index: 0; filter: grayscale(1) brightness(0.7); }
.hero__chip { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.2rem; padding: 0.42rem 0.85rem; border-radius: 99px; background: rgba(4,18,43,0.5); border: 1px solid rgba(127,231,255,0.32); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--cyan); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__chip i { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--cyan); }

.dev__screen .vid + .vid { opacity: 0; }
.dev__clip { position: absolute; left: 8px; top: 7px; z-index: 4; font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; color: #fff; background: rgba(0,0,0,0.34); padding: 1px 5px; border-radius: 4px; }

.card .vid { border-radius: inherit; }
.card__name { position: absolute; left: 8px; top: 7px; z-index: 3; font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

.nap__screen { position: relative; width: clamp(118px, 16vw, 196px); aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,20,50,0.5), inset 0 0 0 2px rgba(255,255,255,0.08); }

.dots { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 4; }
.dots i { width: 5px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.4); transition: all 0.4s; }
.dots i.on { background: #fff; width: 14px; }

/* =========================================================
   realistic device chassis: external display + MacBook on a
   shared desk baseline. Aluminium = layered gradients; each
   screen holds its own rotating <video> playlist.
   ========================================================= */
.dev--monitor, .dev--mac { bottom: 8%; }

/* ---- external display (Studio-Display-ish), left + larger ---- */
.dev--monitor { left: 1%; width: 53%; z-index: 1; }
.dev--monitor .dev__panel {
  position: relative; border-radius: 15px; padding: 3.2%;
  background: linear-gradient(180deg, #30353d, #181b21 58%, #0d0f13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(0,0,0,0.55), 0 44px 80px rgba(0,8,26,0.6);
}
.dev--monitor .dev__screen { aspect-ratio: 16 / 9; border-radius: 4px; }
.dev--monitor .dev__neck {
  display: block; width: 16%; height: 0; padding-bottom: 6.5%; margin: 0 auto;
  background: linear-gradient(90deg, #5f6772, #9aa3af 34%, #c4cbd4 50%, #8b94a0 66%, #565d68);
  clip-path: polygon(36% 0, 64% 0, 58% 100%, 42% 100%);
}
.dev--monitor .dev__foot {
  display: block; width: 32%; height: 0; padding-bottom: 1.5%; margin: 0 auto;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #c4ccd6, #828b97 58%, #565d68);
  box-shadow: 0 22px 30px -12px rgba(0,8,26,0.75);
}

/* ---- MacBook, right + smaller ---- */
.dev--mac { right: 1%; width: 41.5%; z-index: 2; }
.dev--mac .dev__lid {
  position: relative; border-radius: 13px 13px 10px 10px; padding: 2.4%;
  background: linear-gradient(180deg, #262b33, #0f1216);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(0,0,0,0.65), 0 34px 60px rgba(0,8,26,0.52);
}
.dev--mac .dev__screen { aspect-ratio: 16 / 10; border-radius: 3px; }
.dev--mac .dev__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 17%; height: 8%; border-radius: 0 0 5px 5px;
  background: #07080b; z-index: 5;
}
/* the deck: wider than the lid, foreshortened, with a front lip */
.dev--mac .dev__deck {
  display: block; position: relative; left: -8%; width: 116%;
  height: 0; padding-bottom: 4.4%; margin-top: 0.4%;
  border-radius: 2px 2px 8px 8px;
  background: linear-gradient(180deg, #cdd4dd 0 14%, #aeb6c1 15%, #8a929d 68%, #656c77);
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 100%, 0 100%);
  box-shadow: 0 26px 32px -14px rgba(0,8,26,0.75);
}
.dev--mac .dev__deck::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12%; height: 36%; border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #767d88, #a7afba);
}

/* per-display caption + directional screen glare */
.dev__cap {
  position: absolute; left: 0; right: 0; bottom: -7%; text-align: center;
  font-family: var(--mono); font-size: clamp(8px, 0.95vw, 11px);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(159,180,204,0.7);
}
.dev__glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(116deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 24%, transparent 44%);
  mix-blend-mode: screen;
}

.mm__count { position: absolute; right: -2%; top: 2%; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 5vw, 4rem); color: var(--cyan); opacity: 0; }
.mm__count em { font-style: normal; }
.mm__foot, .play__foot, .nat__os { position: absolute; bottom: clamp(1.4rem, 5vh, 2.6rem); left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* =====================================================================
   §4 PLAYLISTS — dealing deck
   ===================================================================== */
.play__inf { position: absolute; font-family: var(--display); font-weight: 800; font-size: clamp(16rem, 40vw, 40rem); color: rgba(127,231,255,0.05); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.play__stage { position: relative; width: min(900px, 92vw); aspect-ratio: 16/10; display: grid; place-items: center; }
.play__screen {
  position: relative; width: 64%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,30,70,0.5), inset 0 0 0 2px rgba(255,255,255,0.08);
  z-index: 2;
}
.pscreen { position: absolute; inset: 0; }
.pscreen--b { opacity: 0; }
.play__sweep { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, transparent, #fff, transparent); transform: scaleX(0); transform-origin: left; z-index: 4; }
.deck { position: absolute; right: 3%; top: 50%; width: 30%; aspect-ratio: 16/10; }
.card { position: absolute; inset: 0; border-radius: 11px; overflow: hidden; box-shadow: 0 16px 34px rgba(0,20,60,0.45), inset 0 0 0 1.5px rgba(255,255,255,0.1); backface-visibility: hidden; }
.card__play { position: absolute; left: 10px; bottom: 10px; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent rgba(255,255,255,0.92); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.card__time { position: absolute; right: 8px; bottom: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; color: #fff; background: rgba(0,0,0,0.32); padding: 1px 5px; border-radius: 4px; }

.ladder { position: absolute; right: clamp(0.6rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.4rem; padding-left: 26px; }
.ladder__rung { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,220,240,0.45); transition: color 0.3s; }
.ladder__rung b { font-weight: 700; color: rgba(127,231,255,0.5); }
.ladder__rung.is-on { color: #fff; }
.ladder__rung.is-on b { color: var(--cyan); }
.ladder__puck { position: absolute; left: 6px; top: 0; width: 10px; height: 10px; border-radius: 99px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); transition: top 0.4s var(--ease-liquid); }
@media (max-width: 720px) { .ladder { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; transform: none; padding: 0; gap: 0.3rem 0.9rem; margin-top: 1.2rem; } .ladder__puck { display: none; } }

/* =====================================================================
   §6 AUTO-PAUSE — the nap
   ===================================================================== */
.scene--nap .nap__pin { transition: filter 0.1s linear; }
.nap__frost { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(200,240,255,0.08), rgba(180,225,255,0.3)); clip-path: inset(0 100% 0 0); }
.nap__stage { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 5vw, 4rem); flex-wrap: wrap; }
.nap__ghost { width: clamp(130px, 16vw, 220px); aspect-ratio: 240/200; }
.battery { width: clamp(240px, 40vw, 480px); height: auto; filter: drop-shadow(0 24px 60px rgba(0,20,50,0.5)); }
.battery__shell { fill: none; stroke: rgba(127,231,255,0.5); stroke-width: 5; }
.battery__nub { fill: rgba(127,231,255,0.5); }
.battery__fill { fill: #1aa3ff; }
.battery__wave { fill: #7FE7FF; opacity: 0.85; }
.battery__pct { font-family: var(--display); font-weight: 800; font-size: 30px; fill: #04122B; text-anchor: middle; }
.nap__meter { display: flex; align-items: center; gap: 4px; height: 60px; }
.nap__meter i { width: 5px; height: 14px; border-radius: 3px; background: var(--cyan); opacity: 0.6; }
.nap__chips { position: absolute; bottom: clamp(3.4rem, 9vh, 5rem); left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: 99px; border: 1px solid rgba(127,231,255,0.25); color: rgba(200,225,245,0.5); }
.chip.is-on { color: var(--ink); background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 22px rgba(127,231,255,0.5); }
.nap__foot { position: absolute; bottom: clamp(1.4rem, 5vh, 2.4rem); left: 50%; transform: translateX(-50%); color: var(--cyan); }

/* =====================================================================
   §7 NATIVE — desktop + lock flip
   ===================================================================== */
.nat__plus { color: var(--cyan); }

/* full-screen lock takeover — the whole viewport becomes a lock screen over the
   same wallpaper (blurred, macOS-style), then fades back to the desktop */
.lockfull {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; opacity: 0;
  /* no blur — the same wallpaper stays sharp; a light scrim keeps text legible */
  background: linear-gradient(180deg, rgba(4,12,30,0.22), rgba(4,12,30,0.42));
}
.lockfull__clock { text-align: center; color: #fff; text-shadow: 0 6px 34px rgba(0,0,0,0.5); }
.lockfull__clock span { font-family: var(--display); font-weight: 800; font-size: clamp(4rem, 14vw, 11rem); display: block; line-height: 0.9; letter-spacing: -0.03em; }
.lockfull__clock small { display: block; margin-top: clamp(0.6rem, 1.8vh, 1.3rem); font-family: var(--mono); font-size: clamp(0.9rem, 2vw, 1.3rem); letter-spacing: 0.16em; opacity: 0.9; }
.lockfull__pad { position: absolute; top: clamp(4.5rem, 12vh, 8rem); width: clamp(34px, 5vw, 52px); height: auto; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4)); }
.lockfull__user { position: absolute; bottom: clamp(3rem, 9vh, 6rem); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: #fff; font-family: var(--mono); font-size: clamp(0.85rem, 1.6vw, 1.1rem); }
.lockfull__user img { width: clamp(56px, 6vw, 80px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 99px; background: rgba(255,255,255,0.18); box-shadow: 0 6px 24px rgba(0,0,0,0.4); }

.nat__perspective { perspective: 2000px; }
.screenframe {
  position: relative; width: min(560px, 84vw); aspect-ratio: 16/10;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 50px 100px rgba(0,20,60,0.55), inset 0 0 0 2px rgba(255,255,255,0.08);
}
.nat__wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.flipper { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 0; }
.face--lock { transform: rotateX(180deg); }
.nat__topbar { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; gap: 0.7rem; padding: 0 0.9rem; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.85); background: rgba(8,16,30,0.32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nat__topbar .mac__apple { width: 11px; height: 13px; }
.nat__spacer { flex: 1; }
.nat__icons { position: absolute; top: 40px; left: 16px; display: grid; gap: 12px; }
.nat__icons i { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.16); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nat__dock { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; padding: 6px 9px; border-radius: 16px; background: rgba(12,22,40,0.34); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nat__dock span { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(150deg, #7FE7FF, #0A84FF); }
.tile--walley2 { background: none !important; overflow: hidden; }
.tile--walley2 img { width: 100%; height: 100%; object-fit: contain; }
.lock__clock { position: absolute; top: 16%; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.4); }
.lock__clock span { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 8vw, 4.4rem); display: block; line-height: 1; }
.lock__clock small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.85; }
.lock__user { position: absolute; bottom: 16%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #fff; font-family: var(--mono); font-size: 12px; }
.lock__user img { width: 46px; height: 46px; border-radius: 99px; background: rgba(255,255,255,0.2); }
.lock__pill { padding: 0.25rem 0.7rem; border-radius: 99px; border: 1px solid rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }
.lock__pad { position: absolute; top: 12px; right: 14px; width: 26px; height: auto; }
.nat__seam { position: absolute; left: 0; right: 0; top: -12%; height: 14px; background: radial-gradient(closest-side, var(--cyan), transparent); opacity: 0; z-index: 6; filter: blur(2px); }
.nat__tags { position: absolute; bottom: clamp(1.4rem, 5vh, 2.6rem); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.8rem; }
.tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.35rem 0.8rem; border-radius: 99px; border: 1px solid rgba(127,231,255,0.3); color: rgba(200,225,245,0.5); transition: all 0.4s; }
.tag[data-on] { color: var(--ink); background: var(--cyan); border-color: var(--cyan); }

/* =====================================================================
   §8 FINALE — coming soon + footer
   ===================================================================== */
.scene--finale { display: block; min-height: auto; padding: 0; }
/* extra bottom room so content clears the persistent dock */
.fin__beat { min-height: 100svh; display: grid; place-items: center; position: relative; padding: var(--gutter); padding-bottom: clamp(5rem, 12vh, 8rem); }
.fin__ghost { width: clamp(160px, 22vw, 320px); aspect-ratio: 240/200; }
.pricetag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); width: clamp(150px, 22vw, 230px); aspect-ratio: 3/2; background: linear-gradient(150deg, #fff, #cfeaff); border-radius: 14px; box-shadow: 0 24px 50px rgba(0,30,80,0.4); display: grid; place-content: center; text-align: center; transform-origin: top center; opacity: 0; }
.pricetag::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; border-radius: 99px; background: var(--ink); box-shadow: inset 0 0 0 4px #cfeaff; }
.pricetag__lab { font-family: var(--mono); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(4,18,43,0.6); }
.pricetag__soon { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); color: var(--ink); position: relative; }
.pricetag__soon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.9) 50%, transparent 65%); transform: translateX(-130%); }
.pricetag.lit .pricetag__soon::after { animation: tagSweep 1.1s ease forwards; }
@keyframes tagSweep { to { transform: translateX(130%); } }

.fin__beat--dl { flex-direction: column; gap: 2rem; }
.dlbtn { position: relative; overflow: hidden; cursor: not-allowed; border: 2px solid rgba(127,231,255,0.5); background: rgba(8,20,40,0.3); border-radius: 99px; padding: clamp(1rem,2.4vw,1.4rem) clamp(2.4rem,6vw,4rem); font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 3.4vw, 2.2rem); color: #fff; }
.dlbtn__fill { position: absolute; inset: 0; background: var(--grad-wave); transform: scaleY(0); transform-origin: 50% 100%; z-index: 0; }
.dlbtn__label, .dlbtn__soon { position: relative; z-index: 1; display: inline-block; }
.dlbtn__soon { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--ink); }
.dlbtn:hover { animation: jiggle 0.6s var(--ease-liquid); }
@keyframes jiggle { 0%,100%{transform:scale(1);} 30%{transform:scale(1.04,0.96);} 60%{transform:scale(0.98,1.02);} }

.stay { display: flex; gap: 0.5rem; align-items: center; opacity: 0.85; }
.stay__in { background: rgba(8,20,40,0.4); border: 1px solid rgba(127,231,255,0.25); border-radius: 99px; padding: 0.7rem 1.1rem; font-family: var(--mono); font-size: 13px; color: #fff; width: min(240px, 60vw); }
.stay__in::placeholder { color: rgba(180,205,230,0.4); }
.stay__in:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(127,231,255,0.45); }
.stay__go { background: var(--cyan); color: var(--ink); border: 0; border-radius: 99px; padding: 0.7rem 1.2rem; font-family: var(--display); font-weight: 800; cursor: pointer; }

.foot { position: relative; min-height: 60svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; text-align: center; padding: var(--gutter); padding-bottom: clamp(7rem, 16vh, 10rem); }
/* soft dark scrim so the footer text stays legible over a bright wallpaper */
.foot::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 75% at 50% 58%, rgba(2, 8, 22, 0.62) 0%, rgba(2, 8, 22, 0.28) 42%, transparent 72%);
}
.foot > * { position: relative; z-index: 1; }
.foot__mark { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 8vw, 5rem); display: flex; align-items: center; gap: 0.5rem; background: var(--grad-wave); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot__ghost { width: clamp(40px, 6vw, 64px); aspect-ratio: 240/200; display: inline-block; }
.foot__site {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em;
  color: #fff; text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 10, 30, 0.9), 0 2px 16px rgba(0, 10, 30, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.foot__site:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.foot__up {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 10, 30, 0.9), 0 2px 16px rgba(0, 10, 30, 0.8);
  transition: color 0.3s;
}
.foot__up:hover { color: var(--cyan); }

/* =====================================================================
   responsive
   ===================================================================== */
@media (max-width: 900px) {
  .mm__stage { aspect-ratio: 4/3; }
  .dev--monitor { width: 58%; left: 0; }
  .dev--mac { width: 46%; right: 0; }
}
@media (max-width: 600px) {
  .nap__stage { gap: 1.4rem; }
  .play__screen { width: 84%; }
  .deck { right: -4%; width: 36%; }
  .screenframe { width: 92vw; }
}

/* phones: shrink the big keywords so nothing clips, stack the monitors */
@media (max-width: 620px) {
  .kw--mega { font-size: clamp(1.8rem, 11vw, 2.6rem); }
  .kw--l { font-size: clamp(1.4rem, 6.6vw, 2rem); }
  .hero__sub { font-size: clamp(1rem, 5vw, 1.5rem); line-height: 1.05; }

  .mm__stage { position: static; aspect-ratio: auto; height: auto; width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 2.6rem; margin-top: 4.5rem; }
  .dev { position: relative; width: 80%; left: auto; right: auto; top: auto; bottom: auto; }
  .dev--monitor, .dev--mac { width: 80%; }
  .dev__cap { bottom: -1.5rem; }
  .mm__count { display: none; }
  .mm__foot { bottom: 1rem; }
}

/* reduced motion: kill ambient loops, soften */
@media (prefers-reduced-motion: reduce) {
  .flow, .wp, .pscreen, .scrollcue__chev, .play__inf { animation: none !important; }
}