/* ============================================================
   Marci landing — styles carried over from the design spec
   (Marci Website v2). Everything structural lives inline in
   index.html; this file holds keyframes, responsive rules, and
   the few things inline styles can't express.
   ============================================================ */

/* No CSS smooth-scroll: it fights the JS section-glide scroll lock
   (landing.js). In-page anchors get their smoothness from JS instead. */
html { scroll-behavior: auto; }
body { margin: 0; background: #FBF8F2; }
a { color: #E8862B; text-decoration: none; }
a:hover { color: #DD7A18; }

@keyframes marci-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* the mascot poses float gently; keep transforms out of their inline styles */
@keyframes marci-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
[data-mascot] { animation: marci-bob 5s ease-in-out infinite; }

/* side mascots sit at the block edges, vertically centered. Their size and
   inset shrink with the viewport so they never overlap the 480px text columns;
   below 1250px the columns tighten too much and they bow out with the fly-dock */
:root { --mascot-size: 175px; --mascot-inset: 4%; }
@media (max-width: 1500px) { :root { --mascot-size: 150px; --mascot-inset: 2.5%; } }
@media (max-width: 1380px) { :root { --mascot-size: 110px; --mascot-inset: 1.2%; } }
@media (max-width: 1500px) {
  /* the hero's right side belongs to the traveling phone at these widths */
  [data-mascot="hero"] { display: none !important; }
}
@media (max-width: 1450px) {
  /* the fly cards dock under the phone here; the side strip is theirs */
  [data-mascot="chapter"] { display: none !important; }
}
@media (max-width: 1250px) {
  [data-mascot] { display: none !important; }
}

/* Above 1450px landing.js overrides --phone-s / --fly-gap inline with a
   viewport-proportional scale so the phone and its side pills always fit;
   these are the no-JS fallback and the docked-layout (≤1450px) values. */
:root { --phone-s: 1; --fly-gap: 208px; }
@media (max-width: 1450px) { :root { --phone-s: 0.85; } }
@media (max-width: 1050px) { :root { --phone-s: 0.72; } }

/* Below 1450px the side strip is narrower than any card: dock the fly cards
   in a centered row at the cluster's bottom, under the scaled phone. */
@media (max-width: 1450px) {
  #journey { position: relative; z-index: 60 !important; }
  [data-cluster] { position: relative; z-index: 60; display: flex !important; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; justify-content: center; gap: 10px; height: 800px !important; padding-bottom: 4px; }
  [data-cluster] [data-fly] { position: static !important; }
}
@media (max-height: 820px) { :root { --phone-s: 0.85; } }
@media (max-height: 680px) { :root { --phone-s: 0.72; } }
[data-pin-phone] { transform: scale(var(--phone-s, 1)); transform-origin: center; }

/* Desktop: chapters sit a bit shorter than the viewport so their rounded
   corners and the page background stay visible when the scroll lock centers
   them — at exactly 100vh a centered block reads as an unrounded full-bleed
   wall (corners + margins land precisely at the screen edges). The 26px
   vertical margin makes the resting gap symmetric: 26px above and below. */
@media (min-width: 761px) {
  [data-chapter] { min-height: calc(100vh - 52px) !important; margin: 26px 12px !important; }
}

/* ---------- waitlist form ---------- */
[data-waitlist-email]::placeholder { color: rgba(255,255,255,0.45); }
[data-waitlist-submit]:disabled { opacity: 0.6; cursor: default; }

/* ---------- mobile: pinned vertical story ---------------------------------
   ≤760px the journey becomes one pinned viewport: chapter text on top, the
   phone (scaled down) in the lower half, screens crossfading as you scroll.
   Fly pills and drift doodles are desktop decoration — hidden here. */
@media (max-width: 760px) {
  :root { --phone-s: 0.52; }

  [data-drift] { display: none !important; }
  [data-nav] a { padding: 9px 14px !important; font-size: 13px !important; }
  [data-roundtable] { width: 116px !important; }
  [data-marci-crowd] img { width: 62px !important; }

  /* hero: full first screen like desktop, single column, no phone slot
     (the phone enters with ch 01); the wave mascot peeks bottom-right */
  [data-hero] { min-height: 100svh !important; padding: 92px 0 16px !important; box-sizing: border-box; }
  [data-mascot="hero"] { display: block !important; top: auto !important; bottom: 8px !important; right: 10px !important; width: 96px !important; }
  [data-hero] > div { grid-template-columns: 1fr !important; }
  [data-hero] > div > div:first-child { padding: 0 !important; gap: 18px !important; }
  [data-hero] div[style*="gap: 12px"] { flex-wrap: wrap; }
  [data-phone-slot] { display: none; }
  [data-hero-line] { font-size: 42px !important; }

  /* the phone is decorative; never intercept touches while it floats.
     JS reparents it into the sticky stage, where it rides along natively —
     no position:fixed, so iOS toolbar resizes can't displace it. */
  [data-phone] { pointer-events: none; position: absolute !important; }

  /* journey: a native sticky stage the chapters stack in. JS sets the tall
     journey height and scrubs the story against it — no GSAP pinning, which
     iOS Safari's dynamic toolbar reliably corrupts. The per-chapter pastel
     lives on the stage itself (JS crossfades its background-color); the
     chapters' own desktop color blocks are flattened here. */
  #journey { height: 100vh; height: 100svh; }
  [data-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; margin: 0 8px; border-radius: 28px; }
  [data-chapter] { position: absolute !important; top: 0; left: 0; right: 0; min-height: 0 !important; opacity: 0; visibility: hidden; pointer-events: none; margin: 0 !important; background: none !important; border-radius: 0 !important; }
  [data-chapter] > div { grid-template-columns: 1fr !important; padding: 88px 18px 0; box-sizing: border-box; }
  [data-chapter] [data-cluster] { display: none !important; }
  [data-chapter] > div > div { gap: 10px !important; }

  /* compact chapter type so text + phone share the viewport */
  [data-chapter] span[style*="clamp(34px"] { font-size: 26px !important; }
  [data-chapter] span[style*="font: 400 17px"] { font-size: 14px !important; line-height: 1.5 !important; }
  [data-chapter] span[style*="font: 400 15px"] { font-size: 13px !important; }
  [data-chapter] span[style*="font: 500 13px"] { font-size: 11.5px !important; }
  [data-chapter] span[style*="font: 500 13.5px"] { font-size: 12px !important; }
  [data-chapter] span[style*="font: 400 14px"] { font-size: 12.5px !important; }

  /* explore: stack the header. The mascot <img> is [data-outro]'s first
     child, so the header div needs :first-of-type, not :first-child. */
  [data-outro] { padding: 9vh 0 8vh !important; }
  [data-outro] > div:first-of-type { flex-direction: column; align-items: flex-start !important; gap: 14px; margin-bottom: 28px !important; }
  [data-outro] > div:first-of-type > span { max-width: none !important; }
  /* the marquee cards are desktop-sized inline (300x340): scale them down */
  [data-marquee] > div { gap: 12px !important; padding-right: 12px !important; }
  [data-marquee] > div > div { width: 200px !important; height: 240px !important; border-radius: 20px !important; }
  [data-marquee] > div > div > div:last-child { left: 14px !important; right: 14px !important; bottom: 12px !important; }
  [data-marquee] span[style*="font: 500 22px"] { font-size: 17px !important; }
  [data-marquee] span[style*="font: 400 13px"] { font-size: 11.5px !important; }
  [data-marquee] span[style*="font: 500 9.5px"] { padding: 3px 8px !important; margin-bottom: 5px !important; }

  /* waitlist: stacked form, compact pills, centered footer row */
  #waitlist > div:last-child { padding: 64px 18px 28px !important; box-sizing: border-box; gap: 18px !important; }
  #waitlist span[style*="clamp(38px"] { font-size: 34px !important; }
  #waitlist span[style*="font: 400 17px"] { font-size: 15px !important; }
  [data-waitlist-form] { flex-direction: column; gap: 8px !important; padding: 10px !important; border-radius: 26px !important; }
  [data-waitlist-form] input { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 18px !important; background: rgba(255,255,255,0.07) !important; }
  [data-waitlist-form] button { width: 100%; padding: 14px 24px !important; }
  #waitlist div[style*="margin-top: 8px"] { flex-wrap: wrap; justify-content: center; }
  #waitlist div[style*="margin-top: 8px"] > span { padding: 10px 16px !important; font-size: 13px !important; }
  #waitlist div[style*="border-top"] { flex-direction: column; align-items: center; gap: 10px; margin-top: 26px !important; padding-top: 20px !important; text-align: center; }
}
@media (max-width: 760px) and (max-height: 700px) {
  :root { --phone-s: 0.46; }
}