/* Home page: the sticker book. Base tokens and type live in site.css. */

/* Registered so the page colour can glide between tones as you scroll. */
@property --bg   { syntax: "<color>"; inherits: true; initial-value: #ffd1e8; }
@property --fg   { syntax: "<color>"; inherits: true; initial-value: #4a1f33; }
@property --head { syntax: "<color>"; inherits: true; initial-value: #e0457b; }

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* The app's sticker unlock spring (response .45, damping .7), sampled over 800ms. */
  --spring: linear(0, 0.034, 0.119, 0.233, 0.359, 0.486, 0.605, 0.71, 0.8, 0.874, 0.932, 0.975, 1.006, 1.027, 1.039, 1.045, 1.046, 1.044, 1.039, 1.034, 1.028, 1.022, 1.017, 1.012, 1.008, 1.005, 1.003, 1.001, 0.999, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 0.999, 1);
}

body.home {
  background: var(--bg);
  color: var(--fg);
  transition: --bg 700ms ease, --fg 700ms ease, --head 700ms ease;
}
body.home[data-tone="blush"]     { --bg: var(--blush);     --fg: var(--ink);   --head: var(--raspberry); --muted: var(--ink-muted); }
body.home[data-tone="raspberry"] { --bg: var(--raspberry); --fg: var(--cream); --head: var(--blush);     --muted: rgba(255, 241, 241, .88); }
body.home[data-tone="tangerine"] { --bg: var(--tangerine); --fg: var(--ink);   --head: var(--blush);     --muted: var(--ink); }
body.home[data-tone="plum"]      { --bg: var(--plum);      --fg: var(--cream); --head: var(--pink);      --muted: rgba(255, 241, 241, .78); }
body.home[data-tone="you"]       { --bg: #ff8f8a;          --fg: var(--ink);   --head: var(--cream);     --muted: var(--ink); }

/* The You gradient sits behind everything and fades in only for that section. */
.you-ground {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 700ms ease;
  background:
    radial-gradient(ellipse 55% 45% at 20% 15%, #ffb0c8 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 30%, #ff4fa0 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 30% 85%, #ffb347 0%, transparent 70%),
    linear-gradient(180deg, #ff8f8a, #ff7a66);
}
body.home[data-tone="you"] .you-ground { opacity: 1; }

.home main, .home header.hero { overflow-x: clip; }
.home .masthead { border-color: var(--fg); }
.home .pill { background: var(--fg); color: var(--bg); transition: transform 160ms var(--ease-out); }
.home .pill:active { transform: scale(.97); }

/* ---------- Stickers ---------- */
.stick {
  position: absolute; z-index: 3;
  width: calc(var(--s, 76px) * 1.5); height: auto; /* the art sits inside a padded square canvas */
  filter: var(--sticker-shadow);
  transform: rotate(var(--r, 0deg));
  pointer-events: none;
}
.js .stick.slap { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 14deg)) scale(1.4); }
.js .stick.slap.in {
  opacity: 1; transform: rotate(var(--r, 0deg)) scale(1);
  transition: transform 800ms var(--spring) var(--d, 0ms), opacity 200ms ease-out var(--d, 0ms);
}

/* ---------- Phones (design captures with the device frame baked in) ---------- */
.phone {
  position: relative;
  width: var(--w, clamp(220px, 25vw, 300px));
  aspect-ratio: 720 / 1564;
  border: clamp(6px, .8vw, 9px) solid #2a1520; /* the screenshots are bare screens, so draw the bezel */
  border-radius: 11% / 5.2%;
  overflow: hidden;
  box-shadow: 0 30px 60px -10px rgba(46, 21, 34, .45), 0 0 0 1px rgba(46, 21, 34, .08);
  transform: rotate(var(--r, 0deg));
  flex: none;
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.js .phone.rise { opacity: 0; transform: translateY(48px) rotate(calc(var(--r, 0deg) * 2)); }
.js .phone.rise.in {
  opacity: 1; transform: rotate(var(--r, 0deg));
  transition: transform 900ms var(--ease-out) var(--d, 0ms), opacity 400ms ease-out var(--d, 0ms);
}

/* ---------- Hero ---------- */
.hero-stage { display: grid; gap: 48px; align-items: center; padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }
@media (min-width: 900px) { .hero-stage { grid-template-columns: 1.25fr 1fr; } }
.hero-copy { position: relative; display: grid; gap: 26px; }
.home .hero h1 { font-size: clamp(68px, 12.5vw, 184px); position: relative; }
.hero-phone { position: relative; justify-self: center; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero .actions small { color: var(--muted); font-size: 15px; max-width: 22rem; }

/* ---------- Label marquee ---------- */
.marquee { overflow: hidden; padding: 18px 0 clamp(48px, 7vw, 80px); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee ul { display: flex; align-items: center; gap: .55em; list-style: none; margin: 0; padding: 0 .55em 0 0; }
.marquee li {
  display: flex; align-items: center; gap: .55em;
  font-family: var(--display); font-size: clamp(44px, 7vw, 96px); line-height: 1;
  letter-spacing: -.03em; color: var(--head); white-space: nowrap;
}
.marquee li:nth-child(even) { font-style: italic; color: var(--fg); }
.marquee img { width: 1em; margin: -.2em 0; height: auto; filter: var(--sticker-shadow); transform: rotate(-8deg); }
.marquee li:nth-child(3n) img { transform: rotate(10deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Feature sections ---------- */
.feature { padding: clamp(72px, 11vw, 140px) 0; }
.feature-grid { display: grid; gap: clamp(56px, 7vw, 96px); align-items: center; }
@media (min-width: 900px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-grid.flip > .stage { order: -1; }
}
.home .feature h2 { font-size: clamp(50px, 7.2vw, 100px); margin: 14px 0 22px; }
.feature .kicker { color: var(--fg); }
.stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }

/* Browse: the fit stamp */
/* A die-cut price sticker on the phone's corner. */
.fit-stamp {
  position: absolute; z-index: 4; left: max(-8px, calc(50% - 230px)); bottom: 6%;
  width: clamp(132px, 15vw, 176px); aspect-ratio: 1; margin: 0;
  display: grid; place-content: center; text-align: center;
  border-radius: 50%; background: var(--cream); color: var(--raspberry);
  box-shadow: 0 0 0 5px #fff, 0 16px 28px rgba(120, 20, 60, .4);
  transform: rotate(-10deg);
  font-family: var(--display); line-height: .85; letter-spacing: -.04em;
  font-size: clamp(54px, 6.4vw, 76px);
  white-space: nowrap;
}
.fit-stamp sup { font-size: .45em; vertical-align: .75em; }
.fit-stamp small { white-space: normal; display: block; font: 600 11px/1.25 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; color: var(--ink); }
.js .fit-stamp.slap { opacity: 0; transform: rotate(-24deg) scale(1.4); }
.js .fit-stamp.slap.in { opacity: 1; transform: rotate(-10deg) scale(1); transition: transform 800ms var(--spring) 250ms, opacity 200ms ease-out 250ms; }

/* Finish: pickable stickers */
.peel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 10px; }
.peel button {
  appearance: none; border: 0; background: none; color: inherit; cursor: pointer;
  display: grid; justify-items: center; gap: 10px; padding: 8px 0;
  font: 500 15px/1.25 var(--body);
  transition: transform 160ms var(--ease-out);
}
.peel button:active { transform: scale(.95); }
.peel img {
  width: clamp(84px, 17vw, 136px); height: auto; margin: -12px 0;
  filter: var(--sticker-shadow) grayscale(.25) opacity(.8);
  transform: rotate(var(--r, 0deg));
  transition: transform 800ms var(--spring), filter 200ms ease;
}
.peel [aria-pressed="true"] img { filter: var(--sticker-shadow); transform: rotate(calc(var(--r, 0deg) * -1)) scale(1.14); }
.peel [aria-pressed="true"] span { color: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  .peel button:hover img { transform: rotate(var(--r, 0deg)) translateY(-6px) scale(1.06); filter: var(--sticker-shadow); }
  .peel [aria-pressed="true"]:hover img { transform: rotate(calc(var(--r, 0deg) * -1)) translateY(-6px) scale(1.18); }
}
.peel-status { margin: 22px 0 0; font-size: 15px; color: var(--muted); min-height: 1.5em; }
.earned { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1.5px solid rgba(255, 241, 241, .25); }
.earned img { width: 84px; margin: -14px; filter: var(--sticker-shadow); transform: rotate(-8deg); }
.earned b { display: block; color: var(--accent); font-weight: 600; }
.earned span { font-size: 15px; color: var(--muted); }

/* You: two phones fanned */
.fan .phone { --w: clamp(128px, 38vw, 270px); }
.fan .phone:first-child { margin-right: -14%; z-index: 1; }
.fan .phone:last-child { margin-top: 12%; }
.home .feature.you h2 { text-transform: lowercase; }

/* ---------- Closer: the app icon, built big ---------- */
.closer { padding: clamp(80px, 12vw, 150px) 0 0; text-align: center; position: relative; }
.home .closer h2 { font-size: clamp(54px, 9vw, 128px); margin: 0 auto 22px; max-width: 12ch; }
.closer .lede { margin: 0 auto 30px; }
.closer .shelf { margin: clamp(48px, 8vw, 88px) auto 0; padding: 0; --u: clamp(1.6px, .36vw, 3.2px); }

@media (prefers-reduced-motion: reduce) {
  body.home, .you-ground { transition-duration: 0ms; }
  .marquee-track { animation: none; }
  .js .stick.slap, .js .phone.rise { opacity: 1; transform: rotate(var(--r, 0deg)); transition: none; }
  .js .fit-stamp.slap { opacity: 1; transform: rotate(-10deg); transition: none; }
  .peel img { transition: filter 200ms ease; }
}