:root {
  --bg: #000;
  --fg: #f5f5f7;
  --muted: #8e8e93;
  --phone-h: min(76vh, 780px);
  --phone-w: calc(var(--phone-h) * 0.489); /* frame image is 978 x 2000 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Tall scroll track; the stage sticks while the animation plays */
.scroller { height: 450vh; position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hint {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- Phone ---------- */
.phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--phone-w);
  height: var(--phone-h);
  margin-left: calc(var(--phone-w) / -2);
  margin-top: calc(var(--phone-h) / -2);
  will-change: transform;
}

/* Screen opening in the frame image: 874 x 1900 px at (52, 50), ~160 px corners.
   Inset slightly less than the opening so content tucks under the bezel. */
.screen {
  position: absolute;
  top: 2.3%;
  bottom: 2.3%;
  left: 5.1%;
  right: 5.1%;
  border-radius: 18.5% / 8.6%;
  overflow: hidden;
  background: #000;
  container-type: size;
  isolation: isolate;
}

.frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.decay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: #242426; /* plain wash: desaturates + flattens without a filter */
  will-change: opacity;
}

.noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- The zoomable world of feeds ---------- */
.world {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(var(--n), 100cqw);
  grid-auto-rows: 100cqh;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.tile {
  position: relative;
  contain: strict;
  overflow: hidden;
  background: #0b0b0c;
  font-size: 3.6cqw;
  color: #fff;
  border: 0.3cqw solid #000;
}

.status {
  display: flex;
  justify-content: space-between;
  padding: 2.4cqh 8cqw 0;
  height: 7cqh;
  font-size: 3.6cqw;
  font-weight: 600;
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5cqh 5cqw;
  font-weight: 800;
  font-size: 6cqw;
  letter-spacing: -0.02em;
}
.appbar i { font-style: normal; font-size: 5cqw; opacity: 0.9; }

.stories { display: flex; gap: 3cqw; padding: 1cqh 5cqw 2cqh; }
.stories b {
  flex: 0 0 14cqw;
  height: 14cqw;
  border-radius: 50%;
  padding: 0.7cqw;
  background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);
}
.stories b::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.8cqw solid #0b0b0c;
  background: var(--c);
}

.post { padding: 0 0 2cqh; }
.post header { display: flex; align-items: center; gap: 2.5cqw; padding: 1.5cqh 5cqw; }
.avatar { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--c); flex: none; }
.name { font-weight: 600; }
.meta { color: #8e8e93; font-size: 3cqw; }

.media {
  height: 46cqh;
  background: var(--g);
  display: grid;
  place-items: center;
  font-size: 20cqw;
}
.media.short { height: 30cqh; }

.actions { display: flex; gap: 4cqw; padding: 1.4cqh 5cqw 0.6cqh; font-size: 5.5cqw; }
.caption { padding: 0 5cqw; line-height: 1.35; }
.caption .lines span {
  display: block;
  height: 1.2cqh;
  margin-top: 1cqh;
  border-radius: 1cqh;
  background: #2c2c2e;
}

/* Short-video style tile */
.tile.video .full {
  position: absolute;
  inset: 0;
  background: var(--g);
  display: grid;
  place-items: center;
  font-size: 30cqw;
}
.tile.video .status, .tile.video .appbar { position: relative; z-index: 1; }
.tile.video .side {
  position: absolute;
  right: 4cqw;
  bottom: 18cqh;
  display: flex;
  flex-direction: column;
  gap: 3cqh;
  font-size: 7cqw;
  text-align: center;
}
.tile.video .side small { display: block; font-size: 3cqw; font-weight: 600; }
.tile.video .cap {
  position: absolute;
  left: 5cqw;
  right: 22cqw;
  bottom: 8cqh;
}
.tile.video .cap .lines span { background: rgba(255,255,255,0.55); }

/* Text-feed style tile */
.tweet { display: flex; gap: 3cqw; padding: 2cqh 5cqw; border-bottom: 0.3cqw solid #1c1c1e; }
.tweet .body { flex: 1; }
.tweet .lines span {
  display: block;
  height: 1.3cqh;
  margin-top: 1.1cqh;
  border-radius: 1cqh;
  background: #3a3a3c;
}
.tweet .pic { margin-top: 1.4cqh; height: 18cqh; border-radius: 3cqw; background: var(--g); }

/* ---------- Reveal ---------- */
.reveal {
  position: absolute;
  left: 0;
  right: 0;
  top: 0; /* positioned by script.js under the picker */
  padding: 0 16px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.reveal.on { pointer-events: auto; }

.reveal h1 {
  font-size: clamp(56px, 11vh, 132px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.tagline {
  margin: 1.6vh auto 3vh;
  max-width: 34ch;
  font-size: clamp(16px, 2.3vh, 22px);
  color: var(--muted);
  line-height: 1.35;
}

.appstore {
  display: inline-block;
  line-height: 0;
  transition: transform 0.2s, opacity 0.2s;
}
.appstore:hover { transform: translateY(-1px); opacity: 0.85; }
.appstore img { height: clamp(48px, 6vh, 60px); width: auto; }

/* ---------- Mode screens inside the phone ---------- */
.modes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.mode {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
  background:
    radial-gradient(120% 70% at 50% 0%, #2a2a2e 0%, transparent 60%),
    #0b0b0c;
}
.mode.active { opacity: 1; transform: none; filter: none; }

.placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqh;
  color: #fff;
  text-align: center;
}
.placeholder svg {
  width: 22cqw;
  height: 22cqw;
  padding: 5cqw;
  border-radius: 28%;
  background: linear-gradient(180deg, #3a3a3c, #232325);
  box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.12), 0 2cqw 6cqw rgba(0, 0, 0, 0.5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.placeholder strong { font-size: 8cqw; font-weight: 700; letter-spacing: -0.02em; margin-top: 1cqh; }
.placeholder span { font-size: 4cqw; color: #8e8e93; }

/* ---------- Segmented picker ---------- */
.picker {
  --pad: 3px;
  --count: 3;
  --index: 0;
  position: absolute;
  left: 50%;
  top: 0; /* positioned by script.js under the phone */
  width: min(380px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  padding: var(--pad);
  border-radius: 999px;
  background: #1c1c1e;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
    inset 0 1px 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: pan-y; /* horizontal drags go to the picker, vertical still scrolls */
}
.picker.on { pointer-events: auto; }

.picker .thumb {
  position: absolute;
  z-index: 0;
  top: var(--pad);
  bottom: var(--pad);
  left: var(--pad);
  width: calc((100% - var(--pad) * 2) / var(--count));
  border-radius: 999px;
  background: linear-gradient(180deg, #6e6e73 0%, #545458 100%);
  box-shadow:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -0.5px 0 rgba(0, 0, 0, 0.2),
    0 3px 8px rgba(0, 0, 0, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.2);
  transform: translateX(calc(var(--index) * 100%)) scale(var(--press, 1));
  transition: transform 0.5s cubic-bezier(0.32, 1.25, 0.45, 1);
}
.picker.pressing .thumb { --press: 0.94; transition-duration: 0.25s; }
.picker.dragging .thumb {
  --press: 0.97;
  transform: translateX(var(--drag-x)) scale(var(--press));
  transition: transform 0.08s linear;
  cursor: grabbing;
}
.picker.dragging button { cursor: grabbing; }
.picker.dragging button[aria-selected="true"]:not(.is-target) { color: rgba(235, 235, 245, 0.6); }
.picker.dragging button.is-target { color: #fff; }

.picker button {
  position: relative;
  z-index: 1;
  height: 38px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(235, 235, 245, 0.6);
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.3s ease;
}
.picker button:hover { color: rgba(235, 235, 245, 0.85); }
.picker button[aria-selected="true"] { color: #fff; }
.picker button:focus-visible { outline: 2px solid #0a84ff; outline-offset: 1px; }

/* Hairline dividers, hidden next to the selected segment like iOS */
.picker button + button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 1px;
  background: rgba(235, 235, 245, 0.16);
  transition: opacity 0.25s ease;
}
.picker button[aria-selected="true"]::before,
.picker button[aria-selected="true"] + button::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .picker .thumb, .mode { transition-duration: 0.01s; }
}

@media (max-width: 600px) {
  :root { --phone-h: min(70vh, 640px); }
}