/* Tock's Chess — landing page ("the winding path").
   Loads after styles.css; reuses its palette tokens. */

:root {
  --path-dot: #a9c69c;          /* soft green, like the app's connector arrows */
  --glow: rgba(232, 168, 56, 0.55);
  --ring: #4f9c60;              /* earned ring */
  --card-border: #e3dccb;
}

body { overflow-x: clip; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1020px; margin: 0 auto; padding: 20px 24px;
}
.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.top .brand img { width: 40px; height: 40px; border-radius: 10px; }
.top .brand b { font-size: 18px; font-weight: 800; }
.top nav { display: flex; align-items: center; gap: 20px; }
.top nav a { text-decoration: none; color: var(--text-muted); font-weight: 700; font-size: 15px; }
.top nav a:hover { color: var(--text); }
.top nav .store-mini {
  color: var(--green-dark); background: var(--green-soft);
  padding: 8px 14px; border-radius: 999px;
}

/* ---------- hero ---------- */
.hero { max-width: 820px; margin: 0 auto; padding: 40px 24px 0; text-align: center; }
.hero h1 {
  font-size: clamp(34px, 5.6vw, 56px); line-height: 1.06;
  letter-spacing: -0.02em; margin: 12px 0 18px;
}
.hero .lead {
  font-size: clamp(17px, 2.2vw, 20px); color: var(--text);
  max-width: 640px; margin: 0 auto 26px;
}
.hero .meta-line { color: var(--text-muted); font-weight: 700; font-size: 15px; margin: 18px 0 0; }

.shot-frame { max-width: 900px; margin: 40px auto 0; padding: 0 24px; position: relative; }
.shot-frame img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: var(--shadow);
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
}
.shot-caption {
  text-align: center; color: var(--text-muted); font-size: 15px;
  max-width: 560px; margin: 6px auto 0;
}
.price-anchor {
  font-size: 19px; color: var(--green-dark); margin: 10px 0;
}

/* placeholder used only if no real screenshot ships */
.shot-slot {
  aspect-ratio: 4 / 3; border: 3px dashed var(--path-dot); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-weight: 700;
}

/* ---------- the path ---------- */
.path { max-width: 1020px; margin: 0 auto; padding: 0 24px 20px; }

/* connectors between stops */
.connector { line-height: 0; }
.connector svg { width: 100%; height: auto; display: block; }
.connector .straight { display: none; }

/* a stop: marker column + card column */
.stop {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center;
  padding: 8px 0;
}
.stop-rail {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  align-self: stretch; justify-self: center; min-height: 100%;
}
.rail-line {
  flex: 1 1 24px; width: 5px; min-height: 18px;
  background-image: radial-gradient(circle at 2.5px 9px, var(--path-dot) 2.5px, transparent 2.9px);
  background-size: 5px 18px; background-repeat: repeat-y;
}
.stop.first .rail-line.up, .stop.last .rail-line.down { visibility: hidden; }

.marker { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.marker .bubble {
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--card-bg); border: 3px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(61, 52, 40, 0.08);
  transition: box-shadow 0.5s ease, border-color 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
}
.marker .bubble img { width: 74px; height: 74px; }
/* Grown-Ups marker: the app icon fills the circle so the bubble's own ring
   is the only frame — no icon-in-a-box-in-a-circle double border. Orange
   ring to match the character stops. */
.marker .gate-bubble { border-color: #e8a838; }
.marker .gate-bubble img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.marker .tag { font-size: 14px; font-weight: 800; color: var(--text-muted); transition: color 0.5s ease; }

/* app-style states, applied by scroll script (page works fully without it) */
.js .stop.ahead .bubble { opacity: 0.5; filter: grayscale(0.55); }
.js .stop.ahead .tag { color: var(--text-muted); }
.js .stop.current .bubble { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(232,168,56,0.25), 0 0 26px var(--glow); }
.js .stop.current .tag { color: var(--gold); }
.js .stop.done .bubble { border-color: var(--ring); }
.js .stop.done .tag { color: var(--green-dark); }

/* card */
.stop-card { max-width: 460px; padding: 0 10px; min-width: 0; }
.stop > * { min-width: 0; }
.stop.side-left .stop-card { justify-self: start; }
.stop.side-right { grid-template-columns: 1fr 1fr; }
.stop.side-right .stop-rail { order: 2; }
.stop.side-right .stop-card { order: 1; justify-self: end; text-align: left; }
.stop-card h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.01em; }
.stop-card p { font-size: 17px; margin: 0 0 14px; }
.stop-card p:last-child { margin-bottom: 0; }
.stop-card .quiet { color: var(--text-muted); font-size: 15px; }
.stop-card a { font-weight: 700; }

.js .stop-card { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .stop.reached .stop-card, .js .stop.current .stop-card, .js .stop.done .stop-card { opacity: 1; transform: none; }

/* piece / art rows inside cards */
.art-row { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 18px; }
.art-row figure { margin: 0; text-align: center; }
.art-row img { width: 58px; height: 58px; display: block; margin: 0 auto; }
.art-row figcaption { font-size: 12px; font-weight: 800; color: var(--text-muted); margin-top: 4px; }
.art-row.big img { width: 84px; height: 84px; }
.art-row.big figcaption { font-size: 13px; max-width: 120px; }

/* ---------- finale ---------- */
.stop.finale { grid-template-columns: 1fr; text-align: center; }
.stop.finale .stop-card { max-width: 560px; justify-self: center; text-align: center; }
.stop.finale .marker .bubble { width: 132px; height: 132px; }
.stop.finale .marker .bubble img { width: 92px; height: 92px; }
.stop.finale h2 { font-size: clamp(30px, 4.6vw, 44px); }

/* App Store badge (styled link) */
/* Apple's official App Store badge, used unmodified per the App Store
   marketing guidelines (custom lookalike buttons are not permitted). */
.store-badge { display: inline-block; transition: transform 0.15s ease; }
.store-badge img { height: 54px; display: block; }
.store-badge:hover { transform: translateY(-2px); }
.finale-cta { margin-top: 26px; }

/* hero → first stop connector (desktop) */
.path-start { line-height: 0; }
.path-start svg { width: 100%; height: auto; display: block; }

/* ---------- mobile: the path straightens ---------- */
@media (max-width: 700px) {
  .top nav .store-mini { display: none; }

  .stop, .stop.side-right { grid-template-columns: 76px 1fr; gap: 14px; }
  .stop.side-right .stop-rail { order: 0; }
  .stop.side-right .stop-card { order: 0; justify-self: start; }
  .stop-card { max-width: none; }

  .marker .bubble { width: 66px; height: 66px; border-width: 2px; }
  .marker .bubble img { width: 44px; height: 44px; }
  .marker .tag { font-size: 11px; }

  /* curves become a short straight segment aligned with the rail */
  .connector svg { display: none; }
  .connector .straight {
    display: block; width: 5px; height: 44px; margin-left: 35.5px;
    background-image: radial-gradient(circle at 2.5px 9px, var(--path-dot) 2.5px, transparent 2.9px);
    background-size: 5px 18px; background-repeat: repeat-y;
  }

  .stop.finale { grid-template-columns: 76px 1fr; text-align: left; }
  .stop.finale .stop-card { text-align: left; justify-self: start; }
  .stop.finale .marker .bubble { width: 66px; height: 66px; }
  .stop.finale .marker .bubble img { width: 44px; height: 44px; }

  .art-row { gap: 10px 12px; }
  .art-row img { width: 46px; height: 46px; }
  .art-row.big img { width: 64px; height: 64px; }

  /* hero start connector hugs the same left rail */
  .path-start svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .stop-card { opacity: 1; transform: none; transition: none; }
  .marker .bubble { transition: none; }
  .splash .app-icon { animation: none; }
}