/* Gooki storefront — the "flow" first view (2026-09-17). See DESIGN.md §4.
 *
 * The product as a diagram: two photographs at the top, arrows merging into
 * the Gooki mark, arrows splitting out of it into a printed book and a phone.
 * Layered over gooki-alive.css: the tokens, the buttons, the hero copy column
 * and the live page inside the phone (.alive-page__sheet / __figure /
 * __caption) all come from there, so the phone's screen IS the previous hero.
 *
 * Geometry: the diagram is up to 760px wide; the two input photographs and the
 * two outputs each sit centred in a half, so their centres are at 25% and 75%
 * of the width. The connector SVGs share that coordinate system (viewBox
 * 720 wide, rails at 180 / 360 / 540) and scale uniformly with the diagram,
 * which is what keeps every arrow landing on the thing it points at.
 */

.flow-hero {
  padding-block: clamp(20px, 3vw, 36px) clamp(36px, 5vw, 64px);
}

.flow-hero .alive-hero__copy h1 {
  margin-block-end: 14px;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
}

.flow-hero .alive-hero__copy .alive-lead {
  margin-block-end: 0;
}

/* Three cells: the copy, the buttons, the diagram. On a wide screen the copy
   and the buttons stack in the left column and the diagram takes the right;
   on a phone the diagram comes BETWEEN them, so the first screen is the
   headline and the picture. */
.flow-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 4vw, 56px);
  row-gap: 0;
  align-items: center;
}

.flow-hero .alive-hero__copy {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.flow-hero__actions {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  padding-block-start: 24px;
}

.flow {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
}

.flow-hero .flow {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* The diagram as the section under the live-spread hero (index.html). */
.flow-section {
  background: var(--gk2-paper);
}

.flow-section .alive-head {
  justify-content: center;
  text-align: center;
}

.flow-section .alive-head h2 {
  max-width: 28ch;
  margin-inline: auto;
}

.flow-section .alive-head p {
  margin-inline: auto;
}

/* --- the rails ------------------------------------------------------------ */

.flow__arrows {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.flow__arrows--one {
  display: none;
}

.flow__rail,
.flow__dash {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.flow__rail {
  stroke: rgb(var(--gk2-ink-rgb) / 0.22);
}

#flow-head path {
  fill: var(--gk2-sun-deep);
}

/* A sun-coloured dash travels along every rail — the photographs going in,
   the book coming out. Off under reduced motion, where the rails alone say
   the same thing. */
.flow__dash {
  stroke: var(--gk2-sun-deep);
  stroke-dasharray: 7 13;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .flow__dash {
    opacity: 1;
    animation: flow-dash 1.4s linear infinite;
  }
}

@keyframes flow-dash {
  to { stroke-dashoffset: -20; }
}

/* --- in: two photographs -------------------------------------------------- */

.flow__in {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 8px;
  align-items: end;
  justify-items: center;
}

.flow-photo {
  margin: 0;
  width: clamp(88px, 11vw, 112px);
  padding: 6px 6px 7px;
  border-radius: 6px;
  background: var(--gk2-white);
  box-shadow: var(--gk2-ledge);
  transform: rotate(-3deg);
}

.flow-photo:nth-child(2) {
  transform: rotate(1.5deg);
}

.flow-photo:nth-child(3) {
  transform: rotate(3deg);
}

.flow-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
  background: var(--gk2-paper-2);
}

.flow-photo figcaption {
  margin-block-start: 5px;
  font-family: var(--atelier-serif);
  font-size: 0.82rem;
  line-height: 1.2;
  text-align: center;
  color: var(--gk2-ink);
}

body.locale-fa .flow-photo figcaption {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

/* The voice card: a mic over a row of bars that breathe, on the same paper
   as the two photographs beside it. */
.flow-voice {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--gk2-paper-2);
  color: var(--gk2-ink);
}

/* A fixed height, not a percentage: inside an aspect-ratio box a percentage
   height has nothing definite to resolve against and the bars come out 0px. */
.flow-voice__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 26px;
}

.flow-voice__bars i {
  display: block;
  width: 3px;
  height: calc(var(--h, 0.5) * 100%);
  border-radius: 2px;
  background: var(--gk2-sun-deep);
}

@media (prefers-reduced-motion: no-preference) {
  .flow-voice__bars i {
    animation: flow-bars 1.1s ease-in-out infinite alternate;
  }

  .flow-voice__bars i:nth-child(3n + 2) { animation-delay: -0.35s; }
  .flow-voice__bars i:nth-child(3n + 3) { animation-delay: -0.7s; }
  .flow-voice__bars i:nth-child(2n) { animation-duration: 1.4s; }
}

@keyframes flow-bars {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.35); }
}

/* --- Gooki ---------------------------------------------------------------- */

.flow__engine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block: 0;
}

/* The same mark as the masthead and the favicon, drawn from the same file. */
.flow__mark {
  position: relative;
  display: block;
  width: clamp(64px, 8vw, 74px);
  height: clamp(64px, 8vw, 74px);
  border-radius: 32%;
  background: var(--brand-mark, url("../images/logo-gooki.svg")) center / 100% 100% no-repeat;
  box-shadow: var(--gk2-float);
}

@media (prefers-reduced-motion: no-preference) {
  .flow__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: flow-pulse 2.8s var(--gk2-ease) infinite;
  }
}

@keyframes flow-pulse {
  0% { box-shadow: 0 0 0 0 rgb(var(--gk2-sun-rgb) / 0.55); }
  70%, 100% { box-shadow: 0 0 0 16px rgb(var(--gk2-sun-rgb) / 0); }
}

.flow__brand {
  font-family: var(--atelier-serif);
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--gk2-ink);
}

body.locale-fa .flow__brand {
  font-family: var(--atelier-persian);
  font-weight: 700;
  letter-spacing: 0;
}

.flow__does {
  font-size: 0.78rem;
  color: var(--gk2-ink-soft);
}

/* --- out: the book and the phone ------------------------------------------ */

.flow__out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  column-gap: 20px;
}

.flow-out__cap {
  margin: 10px 0 0;
  text-align: center;
}

.flow-out__cap strong {
  display: block;
  font-family: var(--atelier-serif);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--gk2-ink);
}

body.locale-fa .flow-out__cap strong {
  font-family: var(--atelier-persian);
  font-weight: 700;
}

.flow-out__cap span {
  display: block;
  max-width: 30ch;
  margin: 3px auto 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--gk2-ink-soft);
}

/* The book: the spread lies open, a stack of leaves under it, the cover laid
   over one corner. It is an object, so it takes the ledge — and a small tilt,
   because a book put down on a table is never square to it. */
.flow-book {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 300px;
  padding-block-start: 4px;
}

.flow-book__sheet {
  position: relative;
  aspect-ratio: var(--page-aspect, 2 / 1);
  border-radius: 4px;
  overflow: hidden;
  background: var(--gk2-paper-2);
  box-shadow:
    0 1px 0 var(--gk2-white), 0 2px 0 var(--gk2-line),
    0 3px 0 var(--gk2-white), 0 4px 0 var(--gk2-line),
    0 5px 0 var(--gk2-white), 0 6px 0 var(--gk2-line),
    0 20px 30px -16px rgb(var(--gk2-ink-rgb) / 0.45);
  transform: rotate(-1.5deg);
}

.flow-book__sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The gutter, as a soft shadow rather than a line: on the phone the fold is
   the cut Step 10 makes, here it is the binding of the printed thing. */
.flow-book__fold {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 7%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(var(--gk2-ink-rgb) / 0.2) 50%, transparent);
  pointer-events: none;
}

.flow-book__cover {
  position: absolute;
  top: 44%;
  inset-inline-start: -10px;
  width: 27%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--gk2-float);
  transform: rotate(-7deg);
}

[dir="rtl"] .flow-book__cover {
  transform: rotate(7deg);
}

/* The phone: an iPhone on its side — the proportions of a 6.9" Pro Max
   (159.9 x 76.7 mm), a dark titanium frame, a thin black bezel of even width.
   Turned with its top to the left, so the Dynamic Island sits at the left of
   the screen, the side button lands on the top edge and the action and volume
   keys on the bottom one. The screen is the CAMERA'S view: the page it has
   locked onto, framed by corner brackets, over the same page out of focus, and
   the reading card floating at the foot of the screen. The sheet inside keeps
   its own 2:1, so the hotspots stay on the figures. */
.flow-phone {
  margin: 0;
  width: 100%;
  max-width: 330px;
  justify-self: center;
}

.flow-phone__body {
  position: relative;
  aspect-ratio: 159.9 / 76.7;
  padding: 3px;
  border-radius: 32px;
  background: linear-gradient(165deg, #6b4450 0%, #3a2028 40%, #2a151b 70%, #55343e 100%);
  box-shadow: var(--gk2-float), inset 0 0 0 1px rgb(255 255 255 / 0.22);
}

.flow-phone__key {
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: #3a2028;
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.25);
}

.flow-phone__key--side { top: -3px; left: 27%; width: 13%; }
.flow-phone__key--action { bottom: -3px; left: 17%; width: 4.5%; }
.flow-phone__key--up { bottom: -3px; left: 24.5%; width: 8.5%; }
.flow-phone__key--down { bottom: -3px; left: 34.5%; width: 8.5%; }

.flow-phone__screen {
  position: absolute;
  inset: 3px;
  border: 4px solid #050505;
  border-radius: 29px;
  overflow: hidden;
  background: #1a1410;
}

/* The camera feed: the table, out of focus. */
.flow-phone__feed {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(7px) brightness(0.5) saturate(0.8);
}

.flow-phone__island {
  position: absolute;
  top: 50%;
  left: 5.5%;
  z-index: 3;
  height: 31%;
  aspect-ratio: 1 / 3.4;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}

/* The page the camera has found, framed. */
/* Narrower than the screen so the reading card at the foot covers only the
   bottom edge of the page, never the figure being read. */
.flow-phone__view {
  position: absolute;
  top: 6%;
  left: 16%;
  right: 16%;
}

.flow-phone .alive-page__sheet {
  border-radius: 3px;
  box-shadow: 0 8px 22px -8px rgb(0 0 0 / 0.7);
}

/* Four corner brackets: the camera has found the page. */
.flow-phone__corner {
  position: absolute;
  width: 9%;
  height: 18%;
  border: 2px solid var(--gk2-sun);
  pointer-events: none;
}

.flow-phone__corner--tl { top: 4%; left: 2%; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.flow-phone__corner--tr { top: 4%; right: 2%; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.flow-phone__corner--bl { bottom: 4%; left: 2%; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.flow-phone__corner--br { bottom: 4%; right: 2%; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }

.flow-phone .alive-page__figure {
  border-radius: 8px;
  border-width: 1.5px;
}

.flow-phone .alive-page__figure.is-live {
  box-shadow: 0 0 0 2px var(--gk2-sun), 0 0 0 4px rgb(var(--gk2-sun-rgb) / 0.35), 0 6px 14px -6px rgb(0 0 0 / 0.6);
}

/* The reading card, an iOS sheet at the foot of the screen. */
.flow-phone .alive-page__caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  margin: 0;
  padding: 6px 9px 7px;
  column-gap: 7px;
  row-gap: 0;
  border-radius: 12px;
  background: rgb(253 251 245 / 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.6);
}

.flow-phone .alive-wave {
  height: 12px;
  margin-block-start: 2px;
  gap: 2px;
}

.flow-phone .alive-wave i {
  width: 3px;
}

.flow-phone .alive-page__speaker {
  font-size: 0.72rem;
  line-height: 1.25;
}

.flow-phone .alive-page__speaker::before {
  font-size: 0.58rem;
}

/* Two lines, always two lines: the card must not grow and shrink over the
   page as the lines change. */
.flow-phone .alive-page__line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
  font-size: 0.64rem;
  line-height: 1.3;
}

/* "Page 1 of …" sits under the phone, where there is room for it. */
.flow-out__from {
  display: block;
  margin-block-start: 6px;
  font-size: 0.78rem;
  color: var(--gk2-ink-soft);
}

.flow-out__from a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gk2-sun);
  text-underline-offset: 3px;
}

/* --- the load sequence ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .flow__in,
  .flow__arrows--in,
  .flow__engine,
  .flow__arrows--out,
  .flow__arrows--one,
  .flow__out {
    animation: alive-settle 700ms var(--gk2-ease) both;
  }

  .flow__arrows--in { animation-delay: 160ms; }
  .flow__engine { animation-delay: 300ms; }
  .flow__arrows--out,
  .flow__arrows--one { animation-delay: 440ms; }
  .flow__out { animation-delay: 560ms; }
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 960px) {
  .flow-hero__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .flow-hero .alive-hero__copy,
  .flow-hero__actions,
  .flow-hero .flow {
    grid-column: 1;
    grid-row: auto;
  }

  .flow-hero .alive-hero__copy { order: 1; align-self: auto; }
  .flow-hero .flow { order: 2; margin-block-start: 22px; }
  .flow-hero__actions { order: 3; padding-block-start: 28px; }
}

@media (max-width: 640px) {
  .flow__out {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }

  /* On a phone, the phone first: it is the thing the reader is holding. */
  .flow-phone {
    order: -1;
  }

  .flow__arrows--out {
    display: none;
  }

  .flow__arrows--one {
    display: block;
  }

  .flow-book {
    max-width: 320px;
  }

  .flow-phone {
    max-width: 320px;
  }

  .flow-book__cover {
    inset-inline-start: -6px;
  }
}

/* ------------------------------------------------------------------ *
 * The four privacy promises (_home_privacy.html), under the diagram.
 *
 * Four equal cards, each opening with a short keyline in its own pigment so
 * the row reads as four separate promises rather than one block of small
 * print. Written with logical properties, like everything else here, so the
 * Persian page mirrors: the keyline sits at the inline START, which is the
 * right-hand edge under `dir="rtl"`.
 * ------------------------------------------------------------------ */

.privacy-band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-band__item {
  padding-inline-start: 16px;
  border-inline-start: 3px solid var(--tone, var(--gk2-line));
}

/* One pigment each, in the palette's own order. */
.privacy-band__item:nth-child(1) { --tone: var(--gk2-sun); }
.privacy-band__item:nth-child(2) { --tone: var(--gk2-leaf); }
.privacy-band__item:nth-child(3) { --tone: var(--gk2-sky); }
.privacy-band__item:nth-child(4) { --tone: var(--gk2-berry); }

.privacy-band__item h3 {
  margin: 0 0 8px;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.25;
  color: var(--gk2-ink);
}

.privacy-band__item p {
  margin: 0;
  color: var(--gk2-ink-soft);
  line-height: 1.6;
}

.privacy-band__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 32px);
  margin-block: clamp(26px, 4vw, 40px) 0;
}

.privacy-band__links a {
  color: var(--gk2-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(var(--gk2-ink-rgb) / 0.35);
}

.privacy-band__links a:hover,
.privacy-band__links a:focus-visible {
  text-decoration-color: currentColor;
}