/* ── art.css — every scene's artwork, scrubbed by --p ─────────────────── */

/* Shared helper: an element that rises into place as --p passes --t0.
   translateY% = its own height, so 100% starts it fully hidden below. */
.rise {
  transform: translate3d(0, calc(100% * (1 - clamp(0, (var(--p, 0) - var(--t0, 0)) * var(--rate, 7), 1))), 0);
  opacity: clamp(0, (var(--p, 0) - var(--t0, 0)) * var(--fade, 9), 1);
}

.fig-glyph {
  width: 1em;
  height: 2.16em;
  fill: currentColor;
  display: block;
}

/* ── 1. scattered people ─────────────────────────────────────────────── */

.scatter { position: absolute; inset: 0; }

.scatter .fig {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: 30px;
  color: #cfd7e1;
  opacity: calc(var(--o) * (0.55 + 0.45 * var(--p, 0)));
  transform: translate(-50%, -50%) scale(var(--s));
  filter: drop-shadow(0 0 18px rgba(180, 205, 235, 0.16));
}

.scatter .fig::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 220%;
  height: 22%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  z-index: -1;
}

.scatter .fig::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520%;
  aspect-ratio: 1;
  transform: translate(-50%, -55%);
  background: radial-gradient(closest-side, rgba(196, 216, 240, 0.11), transparent 72%);
  z-index: -1;
}

.rain-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(120, 148, 180, 0.1), transparent 45%);
  opacity: var(--p, 0);
}

/* ── 2. the giants ───────────────────────────────────────────────────── */

.giants { position: absolute; inset: 0; overflow: hidden; }

.giants .hall {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(1500px, 190%);
  height: 46%;
  transform: translateX(-50%) perspective(700px) rotateX(64deg);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(90deg, rgba(127, 170, 214, 0.22) 0 1px, transparent 1px 116px),
    repeating-linear-gradient(0deg, rgba(127, 170, 214, 0.18) 0 1px, transparent 1px 92px);
  mask-image: linear-gradient(180deg, transparent, #000 42%, #000 100%);
  opacity: 0.55;
}

.giants .globe {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(58vmin, 620px);
  height: min(58vmin, 620px);
  transform: translate(-50%, -50%);
  opacity: 0.55;
  filter: blur(0.5px);
}
.giants .orbits {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(74vmin, 820px);
  height: min(74vmin, 820px);
  transform: translate(-50%, -50%);
}

.giants .orbits i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(127, 170, 214, 0.16);
  border-radius: 50%;
  animation: orbit 46s linear infinite;
}

.giants .orbits i:nth-child(1) { transform: rotate(0deg) scaleY(0.34); }
.giants .orbits i:nth-child(2) { transform: rotate(60deg) scaleY(0.34); animation-duration: 62s; animation-direction: reverse; }
.giants .orbits i:nth-child(3) { transform: rotate(120deg) scaleY(0.34); animation-duration: 78s; }

@keyframes orbit { to { rotate: 360deg; } }

.giants .node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  background: #cfe6ff;
  border-radius: 50%;
  box-shadow: 0 0 14px 2px rgba(150, 200, 255, 0.7);
  opacity: 0;
  animation: node-in 2.6s var(--ease) infinite;
  animation-delay: var(--dl, 0s);
}

@keyframes node-in {
  0%, 100% { opacity: 0.06; transform: scale(0.7); }
  45% { opacity: 0.85; transform: scale(1.15); }
}

.giants .craft {
  position: absolute;
  color: rgba(160, 196, 232, 0.34);
}

.giants .craft.rocket { left: 7%; top: 18%; width: 26px; }
.giants .craft.sat { right: 6%; bottom: 22%; width: 58px; }
.giants .craft svg { width: 100%; display: block; }

/* ── 3. subscription tiles ───────────────────────────────────────────── */

.plans {
  position: absolute;
  inset: 0;
}

.plans .row {
  position: absolute;
  left: 0;
  right: 0;
  top: 13%;
  display: flex;
  gap: clamp(8px, 1.2vw, 16px);
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 var(--pad);
}

.plans .tile {
  width: clamp(54px, 6.4vw, 92px);
  aspect-ratio: 1;
  border-radius: 16px;
  background: linear-gradient(150deg, #2a333e, #131920);
  border: 1px solid rgba(255, 255, 255, 0.07);
  filter: blur(3.5px);
  opacity: 0.55;
  transform: translateY(calc((1 - clamp(0, (var(--p, 0) - var(--t0, 0)) * 6, 1)) * 18px));
}

.plans .tile.is-new {
  border-color: rgba(127, 170, 214, 0.5);
  box-shadow: 0 0 40px -8px rgba(127, 170, 214, 0.6);
  filter: blur(2px);
  opacity: 0.95;
}

.plans .plan {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  max-width: min(520px, 82vw);
  text-align: center;
  padding: clamp(14px, 1.7vw, 22px) clamp(20px, 2.6vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(7, 12, 18, 0.72);
  backdrop-filter: blur(9px);
  box-shadow: 0 40px 120px -50px #000;
}

.plans .plan-k {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--steel);
}

.plans .plan-v {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.9vw, 27px);
  color: #fff;
}

/* ── 4. the membership card and the doors ────────────────────────────── */

.doors {
  position: absolute;
  inset: 0;
}

.doors .card {
  position: absolute;
  left: 50%;
  top: 15%;
  width: clamp(150px, 15vw, 214px);
  aspect-ratio: 1.58;
  transform: translateX(-50%) scale(calc(0.94 + 0.06 * clamp(0, var(--p, 0) * 4, 1)));
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(231, 189, 114, 0.22), rgba(255, 255, 255, 0.04) 40%, rgba(127, 170, 214, 0.16));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 90px -20px rgba(231, 189, 114, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}

.doors .card-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 26px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(255, 226, 168, 0.9), rgba(198, 154, 70, 0.5));
}

.doors .card-name {
  margin: 0;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.doors .row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 19%;
  display: flex;
  gap: clamp(16px, 3.4vw, 54px);
  align-items: flex-start;
  justify-content: center;
}

.doors .door {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(220, 232, 245, 0.5);
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: calc(0.25 + 0.75 * clamp(0, (var(--p, 0) - var(--t0, 0)) * 5, 1));
}

.doors .door svg { width: clamp(22px, 2.4vw, 34px); height: auto; }

/* ── 5. company perks / the gate ─────────────────────────────────────── */

.employee { position: absolute; inset: 0; }

.employee .perks {
  position: absolute;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(24px, 5vw, 74px);
}

.employee .perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(216, 228, 240, 0.62);
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: calc(1 - 0.65 * clamp(0, (var(--p, 0) - 0.45) * 4, 1));
}

.employee .perk svg { width: clamp(34px, 4vw, 54px); height: auto; }

.employee .tagline-mini {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: rgba(127, 170, 214, 0.6);
}

.gate {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(430px, 68vw);
  height: 26%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: flex-end;
  overflow: hidden;
}

.gate i {
  flex: 1;
  height: 100%;
  background: linear-gradient(180deg, rgba(74, 88, 104, 0.42), rgba(8, 11, 16, 0.98));
  border-top: 1px solid rgba(190, 210, 232, 0.32);
  box-shadow: inset 0 -20px 30px -20px #000;
  transform: translateY(calc(100% * clamp(0, (var(--p, 0) - 0.5) * 3.2, 1)));
}

/* ── 6. the phone that ends cover ────────────────────────────────────── */

.cover { position: absolute; inset: 0; }

/* the handset is an out-of-focus prop in the background — never a second
   headline competing with the line that's actually being spoken */
.cover .phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, 46vw);
  aspect-ratio: 0.48;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0.7;
  filter: blur(4px) saturate(0.85);
  box-shadow: 0 40px 120px -40px #000;
}

.cover .ph-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(200, 212, 226, 0.5);
}

.cover .ph-row b { color: rgba(255, 255, 255, 0.8); font-weight: 500; }

.cover .ph-kill {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(220, 90, 80, 0.45);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #d8604f;
}

/* ── 7. the light switch ─────────────────────────────────────────────── */

.switch { position: absolute; inset: 0; }

.switch .cone {
  position: absolute;
  left: 68%;
  top: 50%;
  width: 80vw;
  height: 90vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(60% 50% at 50% 40%, rgba(255, 250, 235, 0.16), transparent 62%);
  opacity: 0.7;
}

.switch .plate {
  position: absolute;
  left: 68%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 138px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: linear-gradient(180deg, #161a20, #0b0e12);
  box-shadow: 0 0 60px -10px rgba(255, 250, 230, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
}

.switch .toggle {
  width: 26px;
  height: 48px;
  border-radius: 3px;
  background: linear-gradient(180deg, #e8edf3, #8d97a3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  transform-origin: 50% 50%;
  transform: rotate(calc(-14deg + var(--p, 0) * 28deg));
}

/* ── 8. the ladder ───────────────────────────────────────────────────── */

.ladder { position: absolute; inset: 0; }

/* keep the centred line readable against the rungs */
.ladder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 42% at 50% 52%, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45) 60%, transparent 84%);
  pointer-events: none;
}

.ladder .post {
  position: absolute;
  top: 6%;
  bottom: 10%;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(231, 189, 114, 0.85), rgba(150, 164, 180, 0.55));
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
}

.ladder .post.l { left: calc(50% - min(23vw, 190px)); }
.ladder .post.r { left: calc(50% + min(23vw, 190px)); }

.ladder .rung {
  position: absolute;
  top: var(--y, 40%);
  left: calc(50% - min(23vw, 190px));
  width: min(46vw, 380px);
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(150, 165, 182, 0.35), rgba(186, 200, 218, 0.6), rgba(150, 165, 182, 0.35));
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.9);
  transform-origin: 50% 50%;
}

.ladder .rung .crowd {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 30px;
  display: flex;
  justify-content: space-around;
  color: rgba(210, 224, 240, 0.55);
}

.ladder .rung .crowd svg { width: 9px; height: 19px; }

.ladder .rung.hi {
  background: linear-gradient(90deg, rgba(231, 189, 114, 0.2), rgba(255, 232, 176, 1), rgba(231, 189, 114, 0.2));
  box-shadow: 0 0 30px 2px rgba(231, 189, 114, 0.55);
}

.ladder .rung.mid {
  transform: translate3d(0, calc(var(--p, 0) * 160px * var(--k, 1)), 0)
             rotate(calc(var(--p, 0) * 26deg * var(--k, 1)));
  opacity: clamp(0, 1 - var(--p, 0) * 1.5, 1);
}
/* ── 9. the wall ─────────────────────────────────────────────────────── */

.wall {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%);
}

.wall .sec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: clamp(42px, 5.8vw, 88px);
  transform: translate3d(0, calc(100% * (1 - clamp(0, (var(--p, 0) - var(--t0, 0)) * 6, 1))), 0);
}

.wall .sec i {
  height: clamp(20px, 2.5vw, 34px);
  background: linear-gradient(180deg, #5c5748, #34322b);
  border-top: 1px solid rgba(255, 226, 168, 0.16);
  border-radius: 1px;
}

.wall .foe {
  position: absolute;
  top: -34px;
  right: 8%;
  display: flex;
  gap: 14px;
  color: rgba(150, 164, 180, 0.4);
}

.wall .foe svg { width: 9px; height: 20px; }

/* ── 10. the stones ──────────────────────────────────────────────────── */

.stones {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(5px, 0.7vw, 10px);
  padding: 0 var(--pad);
}

.stones .stone {
  position: relative;
  flex: 0 0 auto;
  width: calc(clamp(70px, 8.6vw, 148px) * var(--w, 1));
  height: clamp(86px, 8.4vw, 132px);
  display: grid;
  place-items: center;
  padding: 8px 7px;
  overflow: hidden;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px),
    linear-gradient(168deg, #57503f 0%, #38332a 52%, #1b1813 100%);
  border: 1px solid rgba(255, 226, 168, 0.22);
  border-radius: 2px 2px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, 0.3),
    inset 0 -14px 24px -14px rgba(0, 0, 0, 0.9),
    0 26px 50px -28px #000;
  transform: translate3d(0, calc(100% * (1 - clamp(0, (var(--p, 0) - var(--t0, 0)) * 8, 1)) + 12px), 0);
}

.stones .stone span {
  display: block;
  max-width: 100%;
  font-family: var(--sans);
  font-size: clamp(7px, 0.62vw, 9.5px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.55;
  color: rgba(255, 236, 200, 0.9);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}

.stones::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 189, 114, 0.6), transparent);
}

/* ── 11. two futures ─────────────────────────────────────────────────── */

.split {
  position: absolute;
  inset: 0;
  display: flex;
}

.split .side {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
}

.split .side.cold {
  background: linear-gradient(180deg, #10151b, #05070a 70%);
  filter: saturate(0.5);
}

.split .side.warm {
  background: radial-gradient(90% 75% at 62% 26%, #6b4a17, #2e1f0b 55%, #0c0805);
}

.split .divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0.4) 70%, transparent);
  z-index: 2;
}

/* keep the centred line legible over both halves */
.split::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 46% at 50% 52%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 62%, transparent 82%);
  pointer-events: none;
  z-index: 1;
}

.split .win {
  position: absolute;
  left: 10%;
  top: 16%;
  width: 44%;
  height: 36%;
  border: 1px solid rgba(160, 176, 194, 0.22);
  background-image:
    repeating-linear-gradient(90deg, rgba(160, 176, 194, 0.14) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg, rgba(160, 176, 194, 0.14) 0 1px, transparent 1px 33%);
  opacity: 0.45;
}

.split .cardx {
  position: absolute;
  left: 10%;
  top: 58%;
  padding: 8px 11px;
  border: 1px solid rgba(216, 96, 79, 0.55);
  background: rgba(8, 10, 14, 0.85);
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #d8604f;
  white-space: nowrap;
}

.split .sun {
  position: absolute;
  right: 6%;
  top: 14%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 180, 0.85), rgba(231, 189, 114, 0.2) 42%, transparent 68%);
  filter: blur(3px);
  opacity: 0.9;
}

.split .field {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 19%;
  background:
    repeating-linear-gradient(80deg, rgba(255, 214, 140, 0.13) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(96deg, rgba(255, 214, 140, 0.09) 0 1px, transparent 1px 21px),
    linear-gradient(180deg, #3c2b10, #120c07);
  transform: skewY(-1.5deg);
  opacity: 0.7;
}

.split .granary {
  position: absolute;
  right: 14%;
  bottom: 17%;
  width: 20%;
  height: 18%;
  background: linear-gradient(180deg, #7d5f26, #241a0b);
  border-radius: 50% 50% 6% 6% / 46% 46% 4% 4%;
  box-shadow: 0 0 70px -12px rgba(255, 214, 150, 0.55);
}

.split .lbl {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: clamp(7.5px, 0.66vw, 9.5px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  z-index: 2;
}
/* ── 12. stepping stones across the river ────────────────────────────── */

.path { position: absolute; inset: 0; }

.path .river {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  background:
    repeating-linear-gradient(180deg, rgba(140, 176, 210, 0.09) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(20, 42, 62, 0.9), rgba(6, 12, 18, 0.98));
  mask-image: linear-gradient(180deg, transparent, #000 20%);
}

.path .stone {
  position: absolute;
  bottom: calc(20% + var(--i) * 4%);
  left: var(--x);
  width: clamp(42px, 6vw, 92px);
  height: clamp(14px, 1.6vw, 22px);
  border-radius: 50%;
  background: linear-gradient(180deg, #3d3a33, #1a1814);
  border-top: 1px solid rgba(255, 226, 168, 0.25);
  transform: translateX(-50%) scale(clamp(0.7, 0.7 + (var(--p, 0) - var(--t0, 0)) * 4, 1));
  box-shadow: 0 0 calc(var(--p, 0) * 40px) rgba(255, 206, 130, 0.5);
}

.path .stone.lit {
  background: linear-gradient(180deg, #8d6f34, #3a2d13);
  box-shadow: 0 0 34px rgba(255, 206, 130, 0.7);
}

/* ── 13. the storm ───────────────────────────────────────────────────── */

.storm .rain-fx {
  position: absolute;
  inset: -20%;
  background-image: repeating-linear-gradient(76deg, rgba(180, 205, 232, 0.16) 0 1px, transparent 1px 22px);
  animation: rain-slide 0.7s linear infinite;
  opacity: 0.85;
}

@keyframes rain-slide { to { transform: translate3d(-16px, 42px, 0); } }

.storm .winds {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(168deg, rgba(200, 220, 240, 0.07) 0 1px, transparent 1px 60px);
  filter: blur(0.6px);
}

/* ── 14. the stars and the tents ─────────────────────────────────────── */

.stars { position: absolute; inset: 0; overflow: hidden; }

.stars .sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 78%, #1b2a3c, #0a1018 55%, #04060a);
}

.stars .star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz);
  height: var(--sz);
  border-radius: 50%;
  background: #fff;
  opacity: var(--o);
  animation: twinkle var(--tw) ease-in-out infinite alternate;
  animation-delay: var(--dl);
}

@keyframes twinkle {
  from { opacity: calc(var(--o) * 0.35); }
  to { opacity: var(--o); }
}

.stars .dune {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 30%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #171208, #08060a);
}

.stars .tent {
  position: absolute;
  bottom: 12%;
  width: 0;
  height: 0;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
  border-bottom: 34px solid rgba(30, 24, 14, 0.96);
  filter: drop-shadow(0 0 22px rgba(255, 200, 120, 0.18));
}

/* ── 15. the city ────────────────────────────────────────────────────── */

.city { position: absolute; inset: 0; }

/* horizon glow behind the hill */
.city::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 120%;
  aspect-ratio: 2.4;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 206, 132, 0.4), rgba(255, 206, 132, 0.1) 55%, transparent 78%);
  opacity: clamp(0, var(--p, 0) * 2, 1);
}

.city svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 130%;
  max-width: none;
  height: 92%;
  transform: translateX(-50%) translateY(calc((1 - clamp(0, var(--p, 0) * 2.6, 1)) * 8%));
  opacity: clamp(0, var(--p, 0) * 2.2, 1);
}

/* ── 16. leader on camera ────────────────────────────────────────────── */

.leader { position: absolute; inset: 0; display: grid; place-items: center; }

.leader .view {
  position: relative;
  width: min(64vmin, 520px);
  aspect-ratio: 0.82;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(60% 50% at 50% 76%, #1a1f26, #0a0d11 70%);
  display: grid;
  place-items: end center;
  padding-bottom: 4%;
  box-shadow: 0 40px 140px -60px #000;
}

.leader .view i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.leader .view i:nth-child(1) { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.leader .view i:nth-child(2) { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.leader .view i:nth-child(3) { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.leader .view i:nth-child(4) { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.leader .view .fig-glyph {
  font-size: clamp(70px, 9vw, 120px);
  color: rgba(200, 214, 230, 0.3);
}

.leader .rec {
  position: absolute;
  top: 20px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.leader .rec::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8604f;
  animation: rec 1.6s steps(1) infinite;
}

@keyframes rec { 50% { opacity: 0.1; } }

/* ── small screens ───────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .scatter .fig { font-size: 20px; }
  .giants .hall { height: 34%; }
  .stones { bottom: 19%; }
  .wall { height: 52%; }
  .employees .perks,
  .employee .perks { gap: 18px; }
  .split .lbl { letter-spacing: 0.18em; font-size: 7px; }
  .split .win { left: 6%; width: 52%; }
  .stones .stone { height: 84px; }
  .switch .plate { left: 50%; top: 15%; }
  .switch .cone { left: 50%; top: 15%; width: 150vw; }
  .plans .row { top: 9%; }
  .employee .perks { top: 10%; gap: 18px; }
  .plans .plan { bottom: 12%; }
  .ladder .post.l { left: 12%; }
  .ladder .post.r { right: 12%; left: auto; }
  .ladder .rung { left: 12%; width: 76%; }
}