/* Nowshot introduction page. Design system: /DESIGN.md, "Variants → App pages". Sibling of /remap/ (remap/styles.css).
 * The whole page is Nowshot's world: black paper, warm off-white ink, and lime on one word. Display weight 600, text 400.
 * One shadow, under the device. No gradients, no glass, no glow, 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.
 * Same structure, class names and rule order as the Remap page. Colors go through role names (--paper, --ink …), so the two
 * stylesheets differ in their token block and in the scene-one furniture only.
 */
:root {
  /* ── Nowshot's tokens, value for value from DESIGN.md ── */
  --nowshot-paper:   oklch(0.154 0.002 107);   /* #0c0c0b */
  --nowshot-ink:     oklch(0.958 0.010 94);    /* #f3f1ea */
  --nowshot-ink-2:   oklch(0.779 0.010 94);    /* #b9b7b0 supporting text, 9.7:1 on the paper */
  --nowshot-accent:  oklch(0.876 0.155 137);   /* #a3ee86 lime */

  /* ── Added for this page: values DESIGN.md does not list ── */
  --nowshot-lift:    #141413;                  /* the second paper, one step up, under the store screens and the notes */
  --nowshot-screen:  #0c0c0c;                  /* the camera screen's own black, so the device body continues it without a seam */

  /* ── Roles. Every rule below reads these. ── */
  --paper:   var(--nowshot-paper);
  --paper-2: var(--nowshot-lift);
  --ink:     var(--nowshot-ink);
  --ink-2:   var(--nowshot-ink-2);
  --accent:  var(--nowshot-accent);            /* the one headline word. Nothing else on the page is lime. */
  --rule:    rgb(243 241 234 / 0.16);          /* hairlines between blocks of text */
  --ring:    rgb(243 241 234 / 0.22);          /* the hairline that gives a black screen its edge on black paper */

  --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: the same outline as the Remap page's (a 660 × 1434 screen). The camera screenshot is 660 × 1094, and the
     screen itself is its middle 516 columns; the device shows exactly those, so the photo runs edge to edge as it does in the
     app. Those 516 × 1094 fill all but the last fortieth of the outline, where the screen's own black runs on. */
  --phone-w:  min(20rem, calc(100vw - 2 * var(--gutter) - 2rem));
  --bezel:    calc(var(--phone-w) * 0.033);
  --screen-w: calc(var(--phone-w) - 2 * var(--bezel));
  --phone-h:  calc(var(--screen-w) * 2.1727 + 2 * var(--bezel));

  color-scheme: dark;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper-2); color: var(--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, h3, 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(--ink); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--ink); color: var(--paper); }
.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. */
.readout, .flash, .counter { display: none; }

/* ── Header: the app, and who makes it ─────────────────────────────────── */
.top { background: var(--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; }
/* The icon's own ground is the page's black, so it gets the same hairline as the device. */
.app img { width: 2rem; height: 2rem; border-radius: 22.5%; outline: 1px solid var(--ring); outline-offset: -1px; }
.by { display: inline-block; padding-block: var(--space-sm); white-space: nowrap; color: var(--ink-2); }

/* ── 1. The promise ────────────────────────────────────────────────────── */
.shoot { background: var(--paper); }
.shoot .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(--ink-2); }
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(--accent); }
.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(--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 camera screen. Its black is the page's black, so a hairline is all that draws it. The system's one
   shadow is still declared here; on black it shows nothing. */
.device {
  position: relative; justify-self: center; width: var(--phone-w); height: var(--phone-h); padding: var(--bezel);
  border-radius: calc(var(--phone-w) * 0.155); background: var(--nowshot-screen); box-shadow: var(--shadow-device);
}
.device::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--ring); border-radius: inherit; pointer-events: none; }
.device > img {
  width: 100%; aspect-ratio: 516 / 1094; object-fit: cover; object-position: 50% 0;
  border-radius: calc(var(--phone-w) * 0.155 - var(--bezel)) calc(var(--phone-w) * 0.155 - var(--bezel)) 0 0;
}

/* ── 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 h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.counter { color: var(--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; }
/* Two of the four pictures are black: the same hairline holds their edge. */
.track img { width: 100%; border-radius: var(--radius-card); outline: 1px solid var(--ring); outline-offset: -1px; }
.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(--ink-2); }

/* ── 3. Notes ──────────────────────────────────────────────────────────── */
.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); }
.notes h2 { text-wrap: balance; font-size: var(--text-xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.note { padding-top: var(--space-lg); border-top: 1px solid var(--rule); }
.note p, .note ul { margin-top: var(--space-sm); max-width: 34em; color: var(--ink-2); }
.note li { position: relative; padding-left: 1.1em; }
.note li + li { margin-top: var(--space-2xs); }
.note li::before { content: ""; position: absolute; left: 0.1em; top: 0.66em; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: currentColor; }
.note .fine { margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.6; }
/* The on-device sentence: one line of its own, in the page's ink. */
.trust { text-wrap: balance; font-size: var(--text-lg); line-height: 1.3; letter-spacing: -0.015em; }

/* ── Footer: the same paper as the top ─────────────────────────────────── */
.foot { padding-block: var(--space-xl) var(--space-2xl); background: var(--paper); font-size: var(--text-sm); line-height: 1.6; color: var(--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(--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(--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)); }
  .notes h2, .trust { grid-column: 1 / -1; }
}
@media (min-width: 56.25rem) {
  :root { --phone-w: 21rem; }
  .shoot .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.
   ══════════════════════════════════════════════════════════════════════════ */
.shoot { --len: 3; }      /* two viewports of scroll: the stamp, the shutter, the three seconds */
.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) + 1rem), calc((100svh - var(--phone-h) + var(--header-h)) / 2)); }
html.motion { --phone-w: clamp(15rem, min(22vw, calc((100svh - 9rem) / 2.2)), 21rem); }
html.motion .shoot .wrap { position: relative; display: flex; align-items: center; gap: 0; height: 100%; padding-block: var(--header-h) 0; }
html.motion .shoot .copy { position: relative; z-index: 3; width: min(46%, 34.5rem); }
html.motion .shoot h1 { font-size: clamp(2.25rem, min(4.2vw, 7.4svh), 3.75rem); }
html.motion .shoot .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 readout sits in the copy's own column, under the badges, so it can never cover them. It holds two things in turn:
   the visitor's own stamp, and, once that has gone into the photo, the count to the album. */
html.motion .readout { --stamp: var(--text-xl); display: block; position: relative; margin-top: var(--space-xl); }
/* The stamp is the app's own, enlarged: a time, a date, a place with its dot, in the proportions measured on the real screen
   (date and place at 0.68 of the time). motion.js carries it into the photo and scales it down to the real one's size. */
html.motion .stamp { display: grid; justify-items: start; width: max-content; white-space: nowrap; font-variant-numeric: tabular-nums; transform-origin: 0 0; will-change: transform, opacity; }
html.motion .stamp-time { font-size: var(--stamp); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
html.motion .stamp-date, html.motion .stamp-place { font-size: calc(var(--stamp) * 0.68); line-height: 1.3; }
html.motion .stamp-date { margin-top: calc(var(--stamp) * 0.12); }
html.motion .stamp-place { margin-top: calc(var(--stamp) * 0.07); }
html.motion .stamp-place::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.36em; border-radius: 50%; background: currentColor; vertical-align: 0.1em; }
html.motion .count { position: absolute; left: 0; top: 0; width: max-content; opacity: 0; will-change: opacity; }
html.motion .count 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 .count span { display: block; margin-top: var(--space-2xs); color: var(--ink-2); opacity: 0; }

/* The shutter: the viewfinder goes white for an instant. It covers the photo on the screen and nothing else; the numbers are
   the photo's rows inside the screenshot (172–857 of a 516-wide screen). */
html.motion .flash {
  display: block; position: absolute; z-index: 1; left: var(--bezel); top: calc(var(--bezel) + var(--screen-w) * 0.3333);
  width: var(--screen-w); height: calc(var(--screen-w) * 1.3295);
  background: #fff; opacity: 0; pointer-events: none; will-change: opacity;
}

/* ── 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) {
  .shoot { --len: 2.8; }
  .steps { --len: 3.2; }
  /* On a phone the photo's stamp sits too far down the screen to show under the copy, so the device stands beside the readout:
     its top level with the visitor's time, its right edge on the margin. motion.js sets its top (--device-top) and its width
     (--phone-fit): as wide as the room beside the readout allows while the photo still shows down to its stamp. */
  html.motion { --phone-w: min(var(--phone-fit, 50vw), 21rem); }
  html.motion .shoot .wrap { flex-direction: column; align-items: flex-start; padding-top: calc(var(--header-h) + 0.25rem); }
  html.motion .shoot .copy { width: 100%; max-width: none; }
  html.motion .shoot h1 { margin-top: var(--space-xs); font-size: clamp(1.75rem, min(9vw, 5.4svh), 3rem); }
  html.motion .shoot .sub { margin-top: var(--space-sm); font-size: var(--text-base); line-height: 1.35; }
  html.motion .shoot .stores { margin-top: 1.125rem; }
  html.motion .readout { --stamp: 1.75rem; margin-top: 1.125rem; }
  html.motion .count b { font-size: 1.75rem; }
  html.motion .count span { margin-top: 0; font-size: var(--text-sm); }
  html.motion .device { top: var(--device-top, 20rem); }

  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; } }

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