/* The stage and the phones on it.

   The stage is the tariff screen's (paywall_exhibit.dart): one lamp over
   black lacquer, its cone widening towards the floor and gone before it,
   the warmth around the piece, a sheen where the floor begins and a pool of
   light on it. Every phone on the site stands on one, running one of the
   app's screens, laid out at the phone's own 402 × 874 points and scaled
   into the glass by js/phone.js. */

.stage { --float: 14px; --floor-gap: var(--s-6); position: relative; display: grid; justify-items: center; isolation: isolate; padding-bottom: calc(var(--float) + var(--floor-gap)); }
.stage-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage-cone {
  position: absolute;
  left: 50%;
  top: var(--cone-top, -240px);
  bottom: var(--floor-gap);
  width: calc(var(--w) * 2.1);
  transform: translateX(-50%);
  filter: blur(28px);
}
.stage-cone::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(40% 0, 60% 0, 96% 100%, 4% 100%);
  background: linear-gradient(180deg, rgba(var(--lamp), 0.15) 0%, rgba(var(--lamp), 0.065) 46%, rgba(var(--lamp), 0) 92%);
}
.stage-warmth {
  position: absolute;
  left: 50%;
  top: 6%;
  width: calc(var(--w) * 2.2);
  height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--warmth), 0.085) 0%, rgba(var(--warmth), 0.03) 50%, rgba(var(--warmth), 0) 100%);
}
.stage-floor { position: absolute; left: 50%; bottom: var(--floor-gap); width: calc(var(--w) * 2.6); height: 0; transform: translateX(-50%); }
.stage-floor::before {
  content: "";
  position: absolute;
  inset: 0 0 -70px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 10%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 50%, transparent 92%);
          mask-image: linear-gradient(90deg, transparent 8%, #000 50%, transparent 92%);
}
.stage-floor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: 64%;
  height: 84px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--lamp), 0.12) 0%, rgba(var(--lamp), 0.04) 50%, rgba(var(--lamp), 0) 100%);
}
.stage-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--floor-gap) - 11px);
  width: calc(var(--w) * 0.9);
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Three sizes, one phone: the opening's, a chapter's and a lineup's. */
.stage.is-l { --w: clamp(232px, min(21vw, calc((100vh - var(--topbar) - 168px) * 0.4793)), 300px); }
.stage.is-m { --w: clamp(236px, 21vw, 288px); --cone-top: -160px; }
.stage.is-s { --w: clamp(188px, 16vw, 228px); --cone-top: -120px; --floor-gap: var(--s-5); }
@media (max-width: 899px) {
  .stage.is-l { --w: min(72vw, 300px); }
  .stage.is-m { --w: min(70vw, 288px); }
  .stage.is-s { --w: min(62vw, 240px); }
}

/* ---------------------------------------------------------------- phone */

.device {
  --rim: calc(var(--w) * 0.0155);
  --bezel: calc(var(--w) * 0.025);
  --radius: calc(var(--w) * 0.172);
  position: relative;
  width: var(--w);
  aspect-ratio: 719 / 1500;
  border-radius: var(--radius);
  /* Dark aluminium lit from above: the top of the band takes the lamp,
     the flanks a cooler grey, the foot falls into shadow. */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 1.6%, rgba(255, 255, 255, 0) 98.4%, rgba(255, 255, 255, 0.12) 100%),
    linear-gradient(180deg, #9a9ca1 0%, #4a4c51 1.2%, #2a2b2f 12%, #1b1c1f 55%, #111113 92%, #26272a 100%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.9),
    0 30px 60px -24px rgba(0, 0, 0, 0.95),
    0 70px 120px -50px rgba(0, 0, 0, 0.9);
  -webkit-box-reflect: below calc(var(--float) * 2) linear-gradient(transparent 0%, transparent 64%, rgba(255, 255, 255, 0.09) 100%);
}
.device::before {
  content: "";
  position: absolute;
  inset: var(--rim);
  border-radius: calc(var(--radius) - var(--rim));
  background: #000;
  box-shadow: inset 0 0 0 0.6px rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.device-screen {
  position: absolute;
  inset: calc(var(--rim) + var(--bezel));
  border-radius: calc(var(--radius) - var(--rim) - var(--bezel));
  overflow: hidden;
  background: #000;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.device-glass {
  position: absolute;
  inset: var(--rim);
  z-index: 4;
  border-radius: calc(var(--radius) - var(--rim));
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 24%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(var(--lamp), 0.05) 0%, rgba(var(--lamp), 0) 12%);
  pointer-events: none;
}
.device-island {
  position: absolute;
  z-index: 3;
  top: 1.3%;
  left: 50%;
  width: 31.3%;
  height: 4.25%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}
.device-island::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16%;
  width: 11%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #10131c 0%, #06070b 55%, #000 100%);
}
.device-key {
  position: absolute;
  width: calc(var(--w) * 0.011);
  border-radius: 2px;
  background: linear-gradient(90deg, #121214 0%, #47494e 45%, #1a1b1e 100%);
}
.device-key.is-action { left: calc(var(--w) * -0.009); top: 17%; height: 4.2%; }
.device-key.is-up { left: calc(var(--w) * -0.009); top: 25%; height: 7%; }
.device-key.is-down { left: calc(var(--w) * -0.009); top: 33.6%; height: 7%; }
.device-key.is-side { right: calc(var(--w) * -0.009); top: 27%; height: 10.5%; }
.device-key.is-camera { right: calc(var(--w) * -0.006); top: 56%; height: 8%; width: calc(var(--w) * 0.008); opacity: 0.8; }

/* ----------------------------------------------------- the app's chrome */

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 402px;
  height: 874px;
  transform: scale(var(--k, 0.72));
  transform-origin: 0 0;
  background: #000;
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  overflow: hidden;
}
.app-still { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-slow) var(--ease-standard); }
.is-live .device:not(.is-still) .app-still { opacity: 0; pointer-events: none; }
.app-status { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 4px 34px 0 52px; z-index: 5; }
.app-time { font: 600 17px/1 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.app-icons { display: flex; align-items: center; gap: 7px; }
.app-icons svg { height: 12px; width: auto; fill: #fff; }
.app-bar { position: absolute; top: 62px; left: 0; right: 0; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.app-bar > svg { width: 22px; height: 22px; margin-left: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-title { text-align: center; font: 600 15px/1 var(--font); font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; }
.app-tag { justify-self: end; white-space: nowrap; padding-right: 22px; font: 700 10.5px/1 var(--font); font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.app-tag.is-plain { font: 500 15px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--text-2); }
.app-more { justify-self: end; margin-right: 26px; display: grid; gap: 3px; }
.app-more i { width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--text-2); }
.app-rule-line { position: absolute; left: 0; right: 0; top: 117px; height: 0.5px; background: rgba(174, 174, 178, 0.14); }
.app-body { position: absolute; top: 118px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.app-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 24px 0; padding: 5px; border-radius: 16px; border: 0.5px solid rgba(174, 174, 178, 0.12); background: rgba(255, 255, 255, 0.015); }
.app-tabs span { position: relative; display: grid; place-items: center; height: 44px; border-radius: 12px; font: 500 15px/1 var(--font); color: var(--text-3); }
.app-tabs .is-on { color: var(--text); font-weight: 600; background: linear-gradient(180deg, rgba(40, 40, 46, 0.9), rgba(20, 20, 24, 0.9)); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5); }
.app-tabs .is-on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; border-radius: 2px; background: var(--core); box-shadow: 0 0 8px rgba(255, 69, 0, 0.6); }
.app-tabs.is-nutrition .is-on::before { background: var(--nutrition); box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.app-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 168px; z-index: 3; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 40%, #000 60%); pointer-events: none; }
.app-cta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 44px;
  z-index: 4;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  border: 0.8px solid rgba(174, 174, 178, 0.14);
  background: linear-gradient(180deg, #1c1c21 0%, #121215 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 600 16px/1 var(--font);
}
.app-cta svg { width: 18px; height: 18px; fill: none; stroke: var(--core); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.app-cta.is-nutrition svg { stroke: var(--nutrition); }
.app-home { position: absolute; left: 50%; bottom: 8px; z-index: 5; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }

@media (prefers-reduced-motion: no-preference) {
  .js:not(.no-live) .stage.reveal .stage-light { opacity: 0; transition: opacity var(--dur-stage) var(--ease-standard); }
  .js:not(.no-live) .stage.reveal.is-in .stage-light { opacity: 1; }
}