/* Landing page motion: the hero deck and the sections that rise in on scroll. Loaded by index.html only,
   after hub/hub.css, and driven by hub/landing-motion.js. Uses the tokens on :root in hub.css
   (--ease-out, --radius, --shadow); the few extra values live here. Everything that moves uses
   transform and opacity only. */
:root {
  --deck-shadow: 0 1px 2px rgb(22 22 22 / 8%), 0 18px 44px rgb(22 22 22 / 16%);
  --veil: rgb(255 255 255 / 100%);
  /* One move for the whole pile: a soft start and a long, soft landing. */
  --ease-deck: cubic-bezier(0.45, 0, 0.2, 1);
  --deck-move: 1.5s;
}

/* ---------- Hero deck ---------- */
/* Three screenshots scattered in depth: the front one low and straight, the others behind it,
   up and turned a little left or right. Every few seconds the whole pile moves one step towards
   you along the same line, on the same curve and at the same time: the front card passes the
   camera and fades, each card behind takes the place in front of it, and the next dashboard
   comes out of the haze at the back. Depth comes from translateZ in a perspective stage, so the
   cards never swap z-index mid-move. Between moves the front screen drifts slowly closer while it
   is read. No pointer effects. landing-motion.js adds .deck at once, so the box is sized before
   any image arrives. */
.hero-art.deck {
  display: block; position: relative; height: auto; width: 100%;
  aspect-ratio: 2.3 / 1; margin-inline: auto;
}
@media (max-width: 640px) {
  .hero-art.deck { aspect-ratio: 10 / 7; }
}
.deck-stage { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 30%; transform-style: preserve-3d; }
.deck-card {
  position: absolute; left: 19%; top: 0; width: 62%; aspect-ratio: 16 / 10;
  border-radius: var(--radius); overflow: hidden; background: var(--soft);
  border: 1px solid var(--line); box-shadow: var(--deck-shadow);
  transform-origin: 50% 50%; backface-visibility: hidden;
  transition: transform var(--deck-move) var(--ease-deck), opacity var(--deck-move) var(--ease-deck);
  will-change: transform, opacity;
}
/* Undo the static collage rules in hub.css (.hero-art img and its nth-child offsets). */
.hero-art.deck .deck-card img {
  position: static; inset: auto; width: 100%; height: 100%; aspect-ratio: auto;
  border: 0; border-radius: 0; box-shadow: none; object-fit: cover; object-position: top left;
  transform: none; transform-origin: 18% 12%; transition: transform var(--deck-move) var(--ease-deck);
}
/* A white veil is the haze that pushes the cards further back, without a filter. */
.deck-card::after {
  content: ""; position: absolute; inset: 0; background: var(--veil); opacity: 0;
  transition: opacity var(--deck-move) var(--ease-deck); pointer-events: none;
}
/* Slots: 0 front, 1 middle (left, turned left), 2 back (top right, turned right), 3 waiting in the
   haze behind the back one, "out" past the camera. Translations are in % of the card. */
.deck-card[data-slot="0"] { transform: translate3d(0, 22%, 0) rotate(0deg); }
.deck-card[data-slot="1"] { transform: translate3d(-36%, 12%, -120px) rotate(-3deg); }
.deck-card[data-slot="1"]::after { opacity: .12; }
.deck-card[data-slot="2"] { transform: translate3d(36%, 6%, -240px) rotate(3deg); }
.deck-card[data-slot="2"]::after { opacity: .22; }
.deck-card[data-slot="3"] { transform: translate3d(0, -6%, -360px) rotate(0deg); opacity: 0; }
.deck-card[data-slot="3"]::after { opacity: .5; }
.deck-card[data-slot="out"] { transform: translate3d(0, 46%, 160px) rotate(-1deg); opacity: 0; transition-duration: var(--deck-move), .8s; } /* fades before it is past */
/* Phones: the front card takes most of the width; the two behind peek out at the sides. */
@media (max-width: 640px) {
  .deck-card { left: 9%; width: 82%; }
  .deck-card[data-slot="0"] { transform: translate3d(0, 26%, 0); }
  .deck-card[data-slot="1"] { transform: translate3d(-12%, 10%, -120px) rotate(-3deg); }
  .deck-card[data-slot="2"] { transform: translate3d(12%, 2%, -240px) rotate(3deg); }
}
/* The front screen drifts closer while it is read, and keeps that zoom as it leaves. */
.hero-art.deck .deck-card[data-slot="0"] img { transform: scale(1.08); transition: transform 6.4s cubic-bezier(0.25, 0.1, 0.25, 1); }
.hero-art.deck .deck-card[data-slot="out"] img { transform: scale(1.08); transition: none; }
.hero-art.paused .deck-card[data-slot="0"] img { transform: scale(1.03); }
/* First paint: the three cards come out of the haze into their places, back card first. */
.hero-art.intro .deck-card { transform: translate3d(0, -6%, -360px); opacity: 0; transition: none; }
.deck-card.jump, .deck-card.jump::after, .hero-art.deck .deck-card.jump img { transition: none; }

.deck-label {
  position: absolute; left: 14%; bottom: 16%; z-index: 2; min-width: min(250px, 60%); max-width: 70%;
  display: grid; gap: 1px; padding: 10px 14px 12px; background: var(--bg);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  overflow: hidden;
}
.deck-label .t { font-size: 16px; font-weight: 700; line-height: 1.3; }
.deck-label .m { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-label .txt { display: grid; gap: 1px; transition: opacity .45s var(--ease-deck), transform .45s var(--ease-deck); }
.deck-label.swap .txt { opacity: 0; transform: translateY(4px); }
/* Phones: a tighter caption so it covers less of the card, 14px floor. */
@media (max-width: 640px) {
  .deck-label { display: none; }
}
@media (max-width: 520px) {
  .deck-label { padding: 7px 12px 9px; min-width: 0; max-width: 76%; }
  .deck-label .t { font-size: 15px; }
}

/* ---------- Sections rising in on scroll ---------- */
/* landing-motion.js adds .reveal to section headings, the How it works picture and list, the
   gallery's first cards, Coming next, the questions and the closing band, and .in once each one
   is on screen; items that arrive together follow each other by 70ms. Nothing is hidden without
   the script, and the gallery redrawn by a filter appears at once. */
.reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
/* How it works: the picture first, then its three marks one after another. */
/* An animation (filled backwards only), not a transition, so the marks' own hover fades in hub.css
   answer at once after the entrance instead of waiting out a delay. */
.how-shot.reveal:not(.in) .how-mark { opacity: 0; }
.how-shot.reveal.in .how-mark { animation: how-mark-in .45s var(--ease-out) backwards; }
.how-shot.reveal.in .how-mark.m1 { animation-delay: .45s; }
.how-shot.reveal.in .how-mark.m2 { animation-delay: .65s; }
.how-shot.reveal.in .how-mark.m3 { animation-delay: .85s; }
@keyframes how-mark-in { from { opacity: 0; transform: scale(.94); } }

/* Reduced motion: everything holds a single, meaningful frame, and sections are simply there. */
@media (prefers-reduced-motion: reduce) {
  .deck-card, .deck-card::after, .deck-label .txt { transition: none; }
  .hero-art.deck .deck-card img, .hero-art.deck .deck-card[data-slot="0"] img { transform: none; transition: none; }
  .reveal, .how-shot.reveal:not(.in) .how-mark { opacity: 1; transform: none; transition: none; }
  .how-shot.reveal.in .how-mark { animation: none; }
}