/* Remap introduction page. Design system: /DESIGN.md, "Variants → App pages".
 * The whole page is Remap's world: peach and cream paper, ink, one coral. Display weight 600, text 400.
 * One shadow, under the device. No gradients, no glass, no animated background.
 * The plain stacked page is the default. html.motion (set before first paint, see index.html) turns the first two sections into
 * pinned scroll scenes driven by motion.js: native scrolling, position: sticky, progress turned into transform and opacity.
 */
:root {
  /* ── Remap's tokens, value for value from DESIGN.md ── */
  --remap-paper:   oklch(0.960 0.021 47);    /* #ffeee6 peach */
  --remap-ink:     oklch(0.218 0.004 85);    /* #1b1a18 */
  --remap-ink-2:   oklch(0.460 0.009 61);    /* #5c5753 supporting text */
  --remap-accent:  oklch(0.509 0.165 35);    /* #b03512 coral for small text, 5.5:1 on the peach */

  /* ── Added for this page: the production Remap colors DESIGN.md does not list ── */
  --remap-cream:   #fff8f3;                  /* the lighter paper, under the store screens and the notes */
  --remap-coral:   #d8451f;                  /* the one headline word; display size only (3.9:1 on the peach) */
  --remap-bright:  #f2613f;                  /* the app's own coral, as on its icon and buttons; graphics only, never text */
  --rule:          rgb(27 26 24 / 0.14);

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;  --dur-base: 240ms;  --dur-slow: 320ms;
  --radius-card: 18px;
  --shadow-device: 0 30px 60px -20px rgb(0 0 0 / 0.22);

  /* 4-pt spacing, named by role (the company home's scale). */
  --space-2xs: 0.25rem;  --space-xs: 0.5rem;  --space-sm: 0.75rem;  --space-md: 1rem;
  --space-lg: 1.5rem;    --space-xl: 2.5rem;  --space-2xl: 4rem;    --space-3xl: 6rem;

  /* Type: body 17px / 1.47. */
  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-lg:      clamp(1.1875rem, 0.5vw + 1rem, 1.4375rem);   /* 19–23px */
  --text-xl:      clamp(1.625rem, 2.5vw, 2.25rem);             /* 26–36px */
  --text-display: clamp(2.125rem, 5.4vw, 3.75rem);             /* 34–60px */

  --wrap: 75rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --header-h: 4rem;
  --badge-h: 2.5rem;

  /* The device. Its height follows from the 660 × 1434 screen. */
  --phone-w: min(20rem, calc(100vw - 2 * var(--gutter) - 2rem));
  --bezel:   calc(var(--phone-w) * 0.033);
  --phone-h: calc((var(--phone-w) - 2 * var(--bezel)) * 2.1727 + 2 * var(--bezel));

  /* The place: the radius of its outer ring, and how far above the device it sits. */
  --fence:   clamp(2.75rem, 5.4vw, 4.875rem);
  --pin-gap: 2.5rem;

  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--remap-paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--remap-cream); color: var(--remap-ink);
  font-family: var(--font); font-size: var(--text-base); font-weight: 400; line-height: 1.47; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.keep { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--remap-ink); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--remap-ink); color: var(--remap-cream); }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* Motion-only furniture stays out of the plain page entirely. */
.map, .readout, .notice, .counter { display: none; }

/* ── Header: the app, and who makes it ─────────────────────────────────── */
.top { background: var(--remap-paper); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--header-h); }
.app { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-lg); font-weight: 600; line-height: 1; letter-spacing: -0.025em; }
.app img { width: 2rem; height: 2rem; border-radius: 22.5%; }
.by { display: inline-block; padding-block: var(--space-sm); white-space: nowrap; color: var(--remap-ink-2); }

/* ── 1. The promise ────────────────────────────────────────────────────── */
.arrive { background: var(--remap-paper); }
.arrive .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
.kind { font-weight: 600; color: var(--remap-accent); }
h1 {
  margin-top: var(--space-sm); max-width: 11.5em; text-wrap: balance;
  font-size: var(--text-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em;
}
h1 em { font-style: normal; color: var(--remap-coral); }
.sub { margin-top: var(--space-lg); max-width: 21em; text-wrap: balance; font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em; color: var(--remap-ink-2); }

/* Official badges keep their artwork, colors and proportions. Google's file carries transparent padding around the art,
   so it is drawn taller and pulled in until its art is as tall as Apple's. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.stores a { display: block; line-height: 0; border-radius: 4px; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.stores img { width: auto; max-width: none; height: var(--badge-h); }
.stores img.google-en { height: calc(var(--badge-h) * 1.488); margin: calc(var(--badge-h) * -0.244); }

/* The device: the real home screen in a white body, as the app's own store pictures show it. The system's one shadow sits here. */
.device {
  position: relative; justify-self: center; width: var(--phone-w); padding: var(--bezel);
  border-radius: calc(var(--phone-w) * 0.155); background: #fff; box-shadow: var(--shadow-device);
}
.device > img { width: 100%; border-radius: calc(var(--phone-w) * 0.155 - var(--bezel)); }

/* ── 2. How it works ───────────────────────────────────────────────────── */
.steps { padding-block: var(--space-3xl) var(--space-2xl); }
.steps-head { display: flex; align-items: baseline; gap: var(--space-sm); }
.steps h2, .note h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.counter { color: var(--remap-ink-2); font-variant-numeric: tabular-nums; }
/* On a phone the four screens sit in one row that scrolls sideways; from 56.25rem they stand four across. */
.track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 17.5rem); gap: var(--space-md);
  margin: var(--space-lg) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) var(--space-md);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
}
.track li { scroll-snap-align: start; }
.track img { width: 100%; border-radius: var(--radius-card); }
.track figcaption { margin-top: var(--space-md); }
.track figcaption b { display: block; font-size: var(--text-lg); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.track figcaption span { display: block; margin-top: var(--space-xs); color: var(--remap-ink-2); }

/* ── 3. Notes ──────────────────────────────────────────────────────────── */
/* ── The story: two paragraphs between the scenes. The first is set one step up; the second keeps the body size. ── */
.story { padding-block: var(--space-3xl) var(--space-xl); }
.story .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
.story p { max-width: 34em; color: var(--remap-ink-2); }
.story .story-lead { max-width: 30em; font-size: var(--text-lg); line-height: 1.4; letter-spacing: -0.015em; color: var(--remap-ink); }
.story strong { font-weight: 600; color: var(--remap-ink); }

.notes { padding-block: var(--space-xl) var(--space-3xl); }
.notes .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-lg); }
.note { padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.note p { margin-top: var(--space-sm); max-width: 34em; color: var(--remap-ink-2); }

/* ── Footer: the same paper as the top ─────────────────────────────────── */
.foot { padding-block: var(--space-xl) var(--space-2xl); background: var(--remap-paper); font-size: var(--text-sm); line-height: 1.6; color: var(--remap-ink-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-bottom: var(--space-sm); }
.foot a { color: var(--remap-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.foot p { margin-top: var(--space-2xs); }

/* ── States: links gain or thicken an underline, badges dim, everything pressable gives by 3%. ── */
@media (hover: hover) and (pointer: fine) {
  .by:hover { color: var(--remap-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
  .foot a:hover { text-decoration-thickness: 2px; }
  .stores a:hover { opacity: 0.82; }
}
@media (pointer: coarse) { .foot a { display: inline-block; padding-block: var(--space-xs); } }
.app, .by, .foot a { transition: transform var(--dur-fast) var(--ease-out); }
.app:active, .by:active, .stores a:active, .foot a:active { transform: scale(0.97); }

@media (min-width: 45rem) {
  .notes .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 56.25rem) {
  :root { --phone-w: 21rem; }
  .arrive .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); }
  .device { justify-self: end; }
  .track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); margin-inline: 0; padding: 0; overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Motion: two pinned scenes. Only when html.motion.
   ══════════════════════════════════════════════════════════════════════════ */
.arrive { --len: 3.77; }  /* 2.77 viewports of scroll: the walk and the arrival end at 0.92 of it, and the last 8% holds (motion.js, BEATS) */
.steps  { --len: 3.4; }

html.motion body { overflow-x: clip; }
/* The header lies over the top of the first scene and leaves with the first scroll, like any page's. */
html.motion .top { position: absolute; inset: 0 0 auto 0; z-index: 10; background: none; }
html.motion .scene { height: calc(var(--len, 1) * 100svh); padding: 0; }
html.motion .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; overflow: clip; }

/* ── Scene one ── */
html {
  --phone-top: max(
    calc(var(--header-h) + 0.5rem + var(--fence) + var(--pin-gap)),
    calc((100svh - var(--phone-h) + var(--header-h) + var(--fence) + var(--pin-gap)) / 2)
  );
}
html.motion { --phone-w: clamp(15rem, min(22vw, calc((100svh - 15.5rem) / 2.2)), 21rem); }
html.motion .arrive .wrap { position: relative; display: flex; align-items: center; gap: 0; height: 100%; padding-block: var(--header-h) 0; }
html.motion .arrive .copy { position: relative; z-index: 3; width: min(46%, 34.5rem); }
html.motion .arrive h1 { font-size: clamp(2.25rem, min(4.2vw, 7.4svh), 3.75rem); }
html.motion .arrive .copy > * { animation: rise 640ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
html.motion .device { position: absolute; z-index: 2; right: var(--gutter); top: var(--phone-top); margin: 0; animation: fade 900ms ease 160ms both; }

/* The distance left. It sits in the copy's own column, under the badges, so it can never cover them. */
html.motion .readout { display: block; margin-top: var(--space-xl); }
html.motion .readout b { display: block; font-size: var(--text-xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
html.motion .readout span { display: block; margin-top: var(--space-2xs); color: var(--remap-ink-2); }

/* The map: a dotted walking route, the place with its three rings, and you. Everything here is placed by motion.js. */
html.motion .map { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 700ms ease 350ms; }
html.motion .arrive.ready .map { opacity: 1; }
html.motion .route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html.motion .route-path { fill: none; stroke: none; }
html.motion .route-dots circle { fill: var(--remap-bright); opacity: 0; }
/* The place's box is only a ruler: its height is the gap between the place and the top of the device. */
html.motion .place { position: absolute; left: 0; top: 0; width: 0; height: var(--pin-gap); }
html.motion .place span { position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1); width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; }
html.motion .ring { border: 1.5px solid var(--remap-bright); animation: breathe 3.6s ease-in-out infinite; }
html.motion .ring.r1 { --r: calc(var(--fence) * 0.34); opacity: 0.62; border-width: 2px; }
html.motion .ring.r2 { --r: calc(var(--fence) * 0.67); opacity: 0.36; animation-delay: -1.2s; }
html.motion .ring.r3 { --r: var(--fence); opacity: 0.2; border-width: 1px; animation-delay: -2.4s; }
html.motion .fence { --r: var(--fence); background: var(--remap-bright); opacity: 0; }
html.motion .place-dot { --r: 0.5rem; background: var(--remap-bright); border: 3px solid #fff; }
html.motion .arrive.away .ring { animation-play-state: paused; }
html.motion .you { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
html.motion .you::before { content: ""; position: absolute; left: -1rem; top: -1rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(27 26 24 / 0.08); }
html.motion .you span { position: absolute; left: -0.5625rem; top: -0.5625rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--remap-ink); border: 3px solid #fff; }

/* The reminder. Drawn after the app's own banner as its store screens show it: dark, the icon, the place, one line.
   It is sized from the device, so on any screen it covers the status bar and the title row and stops short of the first card. */
html.motion .notice {
  display: flex; position: absolute; z-index: 4; left: 50%; top: 2.5%; width: calc(var(--phone-w) + 3.5rem);
  align-items: center; gap: 0.85em; padding: 0.85em 1.15em 0.9em 0.85em; border-radius: 1.4em;
  background: var(--remap-ink); color: var(--remap-cream);
  font-size: clamp(min(0.8125rem, 3.75vw), calc(var(--phone-w) * 0.0475), 1rem); line-height: 1.3; letter-spacing: -0.005em;
  transform: translate3d(-50%, -20px, 0); transform-origin: 50% 0; opacity: 0; pointer-events: none; will-change: transform, opacity;
}
html.motion .notice img { flex: none; width: 2.7em; height: 2.7em; border-radius: 22.5%; }
html.motion .notice p { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.85em; align-items: baseline; }
html.motion .notice b { font-size: 1.07em; font-weight: 600; white-space: nowrap; }
html.motion .notice .when { font-size: 0.93em; color: rgb(255 248 243 / 0.62); }
html.motion .notice .what { grid-column: 1 / -1; margin-top: 1px; white-space: nowrap; color: rgb(255 248 243 / 0.84); }

/* ── Scene two ── */
html.motion .steps .wrap { display: flex; flex-direction: column; justify-content: center; height: 100%; }
html.motion .steps-head { margin-bottom: var(--space-lg); }
html.motion .counter { display: block; }
/* The four captions share one cell, so the column is as tall as the longest and never jumps. The screens leave the flow:
   motion.js moves them across the pin and shows the caption of the one in front. */
html.motion .track { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 0; width: min(26rem, 38%); margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
html.motion .track li { grid-area: 1 / 1; }
html.motion .track img { position: absolute; left: 0; top: 0; width: var(--card-w, 18rem); max-width: none; opacity: 0; will-change: transform, opacity; }
html.motion .track figcaption { margin: 0; opacity: 0; transition: opacity 160ms ease; }
html.motion .track li.on figcaption { opacity: 1; transition: opacity 320ms ease 140ms; }
html.motion .track figcaption b { text-wrap: balance; font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.025em; }
html.motion .track figcaption span { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.4; letter-spacing: -0.015em; }

/* ── The one reveal: fade up 12px. The class that hides is added by motion.js, so nothing stays hidden without it. ── */
html.motion.reveals .reveal { opacity: 0; transform: translateY(12px); transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
html.motion.reveals .reveal.in { opacity: 1; transform: none; }

/* ── Phones and tablets: the same two scenes, stacked ── */
@media (max-width: 56.24rem) {
  .arrive { --len: 2.85; }
  .steps  { --len: 3.2; }
  html.motion { --phone-w: min(62vw, 44svh, 21rem); --fence: 2.75rem; --pin-gap: 2.125rem; }
  html.motion .arrive .wrap { flex-direction: column; align-items: flex-start; padding-top: calc(var(--header-h) + 0.25rem); }
  html.motion .arrive .copy { width: 100%; max-width: 34.5rem; }
  html.motion .arrive h1 { margin-top: var(--space-xs); font-size: clamp(1.75rem, min(9vw, 5.4svh), 3rem); }
  html.motion .arrive .sub { margin-top: var(--space-sm); font-size: var(--text-base); line-height: 1.35; }
  html.motion .arrive .stores { margin-top: 1.125rem; }
  html.motion .readout { margin-top: 1.125rem; }
  html.motion .readout b { font-size: 1.75rem; }
  html.motion .readout span { margin-top: 0; font-size: var(--text-sm); }
  /* The device follows the copy, lower by exactly the room the place and its rings need. The pin cuts it at the bottom edge. */
  html.motion .device { position: relative; right: auto; top: auto; flex: none; align-self: center; margin-top: calc(var(--fence) + var(--pin-gap) + 0.875rem); }
  html.motion .notice { width: min(100vw - 2rem, var(--phone-w) + 4.25rem); }

  html.motion .steps .wrap { justify-content: flex-start; padding-top: var(--space-xl); }
  html.motion .steps-head { margin-bottom: var(--space-md); }
  html.motion .track { width: 100%; max-width: 30rem; }
  html.motion .track figcaption b { font-size: 1.5rem; }
  html.motion .track figcaption span { margin-top: var(--space-xs); font-size: var(--text-base); line-height: 1.4; }
}

@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.05); } }

/* ── Reduced motion: the plain page, and no travel anywhere. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}