/* Landing page only. Shared tokens and footer live in styles.css. */

/* Scroll scene: the stage sticks while the tall section scrolls past */
.scene { position: relative; height: 320vh; background: var(--purple); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.topbar {
  position: absolute; z-index: 5; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
}
.topbar .brand { color: var(--cream); font-size: 24px; }
.pill {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: var(--cream); color: #1D1633; font-size: 14px; font-weight: 600; white-space: nowrap;
}

/* Giant two-line wordmark */
.wordmark {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--cream); line-height: 0.82; font-size: 30vw;
  padding-bottom: 6vh; pointer-events: none;
}
.wordmark .line { display: block; white-space: nowrap; }
.wordmark .ch { display: inline-block; will-change: transform, opacity; }

.burst { position: absolute; inset: 0; pointer-events: none; }
.burst svg { position: absolute; width: 5vmin; height: 5vmin; opacity: 0; will-change: transform, opacity; }

/* Phone */
.phone {
  --w: min(280px, 50vw, 36vh);
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: var(--w); aspect-ratio: 9 / 19.2;
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--w) * -19.2 / 9 / 2);
  background: #111; border-radius: calc(var(--w) * 0.16);
  padding: calc(var(--w) * 0.035);
  box-shadow: 0 30px 60px rgba(10, 4, 50, 0.45);
  transform: translateY(58vh);
  will-change: transform;
}
.screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: calc(var(--w) * 0.13);
  background: var(--pink);
  display: flex; flex-direction: column; align-items: center;
}
.bars { display: flex; gap: 4px; width: 84%; margin-top: 15%; }
.bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.45); }
.bars i.on { background: #fff; }
.screen .month { margin-top: 12%; color: #1D1633; font-size: calc(var(--w) * 0.2); }
.screen .photo { width: 92%; margin-top: 4%; }
.screen .cap { margin-top: auto; margin-bottom: 14%; color: #1D1633; font-size: calc(var(--w) * 0.05); font-weight: 600; }

/* Stickers that fly in around the phone */
.sticker {
  position: absolute; z-index: 3; left: 50%; top: 50%;
  opacity: 0; will-change: transform, opacity;
  --u: min(330px, 50vw, 42vh);
}
.sticker .inner { transform: translate(-50%, -50%); }
.s-promise .inner {
  width: calc(var(--u) * 0.95); aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  background: var(--green); color: #fff; font-size: calc(var(--u) * 0.1); padding: 16%;
  border-radius: 58% 42% 53% 47% / 45% 55% 45% 55%;
}
.s-three .inner {
  width: calc(var(--u) * 0.62); aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  background: var(--red); color: #fff; border-radius: 50%; font-size: calc(var(--u) * 0.085); line-height: 1;
}
.s-three b { display: block; font-size: 2.4em; }
.s-stat .inner {
  background: var(--cream); color: #1D1633; border-radius: 18px;
  padding: calc(var(--u) * 0.06) calc(var(--u) * 0.08);
  font-size: calc(var(--u) * 0.055); line-height: 1.25; white-space: nowrap;
  box-shadow: 0 12px 30px rgba(10, 4, 50, 0.3);
}
.s-stat strong { display: block; font-family: "SuplexDriver", system-ui, sans-serif; font-size: 2.2em; line-height: 1; margin-top: 4px; }
.s-star .inner { width: calc(var(--u) * 0.75); }
.s-store .inner { font-size: calc(var(--u) * 0.06); }
.s-store .pill { font-size: inherit; padding: 0.7em 1.2em; background: #1D1633; color: var(--cream); }

.scroll-hint {
  position: absolute; z-index: 4; bottom: 18px; left: 0; right: 0; text-align: center;
  color: var(--cream); font-size: 14px; opacity: 0.8;
}

/* After the scene: one short block */
.outro { padding: 90px 0 100px; text-align: center; }
.outro h2 { font-size: clamp(44px, 9vw, 96px); margin: 0 0 22px; }
.outro h2 span { color: var(--red); }
.outro p { font-size: clamp(18px, 2.2vw, 21px); color: var(--muted); max-width: 36ch; margin: 0 auto 30px; }
.outro .small { font-size: 15px; margin: 26px auto 0; }

.store-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 16px; border-radius: 14px;
  background: var(--ink); color: var(--bg); text-align: left;
}
.store-badge svg { width: 26px; height: 26px; fill: currentColor; }
.store-badge small { display: block; font-size: 12px; opacity: 0.75; line-height: 1.2; }
.store-badge strong { display: block; font-size: 19px; line-height: 1.2; }

@media (max-width: 600px) {
  .topbar .pill { display: none; }
}

/* No scroll animation: show the finished collage in one screen */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .stage { position: relative; }
  .wordmark, .burst, .scroll-hint { display: none; }
}