/* ────────────────────────────────────────────────────────────
   UNBIND landing — scenes 2–8.
   Pinned scenes only pin ≥ 861px; below that they read as
   vertical sections with simple reveals.
─────────────────────────────────────────────────────────────*/

/* ── SCENE 2 · upload ───────────────────────────────────── */
.upload__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
}

.upload__points {
  list-style: none;
  padding: 0;
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.upload__points li {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--ink-soft);
}
.upload__points li::before {
  content: "○";
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.upload__visual {
  position: relative;
  min-height: min(64vh, 560px);
  display: grid;
  place-items: center;
}

.doc-card {
  position: relative;
  z-index: 2;
  width: min(320px, 78%);
  background: var(--paper);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-float);
  display: grid;
  gap: 10px;
  rotate: -3deg;
}
.doc-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.doc-card__line {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
}

.particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.particles span {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--primary);   /* visible on the light shallows */
  opacity: 0;
}
.particles span:nth-child(3n) { background: var(--coral); }
.particles span:nth-child(3n+1) { background: var(--gold-warm); }

.upload__octo {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: clamp(120px, 14vw, 170px);
  z-index: 3;   /* Octo catches the doc — stays in front of it */
}

/* ── SCENE 3 · modules ──────────────────────────────────── */
.modules__stage {
  gap: var(--space-lg);
  justify-content: flex-start;
  padding-top: max(10vh, 88px);
}
.modules__head { max-width: 560px; display: grid; gap: var(--space-xs); }

.modules__orbit {
  position: relative;
  width: min(38vh, 380px);
  height: min(38vh, 380px);
  margin-inline: auto;
  margin-block: auto;
  flex-shrink: 0;
}
.modules__octo {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: clamp(96px, 12vh, 140px);
}
.orbit-bubble {
  position: absolute;
  top: 50%; left: 50%;
  width: 64px; height: 64px;
  margin: -32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border: 1.5px solid var(--coral-soft);
  font-size: 1.3rem;
  color: var(--primary);
  box-shadow: var(--shadow-soft);
  transition: scale var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.orbit-bubble.is-active {
  scale: 1.35;
  border-color: var(--primary);
  background: var(--paper);
}

/* side panel mirrors the active module (desktop pinned mode) */
.modules__panel {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: min(340px, 30vw);
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-float);
  display: none;
}
.modules__panel .panel-icon { font-size: 1.6rem; color: var(--primary); }
.modules__panel h3 { margin-top: var(--space-xs); }
.modules__panel p { margin-top: var(--space-xs); color: var(--ink-soft); font-size: 0.95rem; }
.modules__panel .panel-count {
  font-size: var(--text-tag);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* mobile / no-JS: plain flowing list, varied offsets so it
   doesn't read as a uniform card grid */
.modules__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  max-width: 640px;
}
.modules__list li {
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft);
}
.modules__list li:nth-child(odd) { margin-right: var(--space-xl); }
.modules__list li:nth-child(even) { margin-left: var(--space-xl); }
.modules__list li::before {
  content: attr(data-icon);
  color: var(--primary);
  font-size: 1.2rem;
}
.modules__list p { color: var(--ink-soft); margin-top: var(--space-2xs); font-size: 0.95rem; }

/* desktop pinned mode: hide the list, show orbit + panel */
@media (min-width: 861px) {
  body.js-pinned .modules__list { position: absolute; opacity: 0; pointer-events: none; }
  body.js-pinned .modules__panel { display: block; }
  body.js-pinned .modules__stage { position: relative; }
}

/* ── SCENE 4 · reef ─────────────────────────────────────── */
.reef__stage { gap: var(--space-2xl); }
.reef__copy { max-width: 560px; }

.reef__strip {
  position: relative;
  height: clamp(220px, 34vh, 320px);
  width: 160%;                       /* scrubbed horizontally on desktop */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, transparent 55%, rgba(13, 74, 67, 0.55));
}
.reef__floor {
  position: absolute;
  left: -2%; right: -2%; bottom: -12px;
  height: 46%;
  background: var(--water-5);
  border-radius: 50% 50% 0 0 / 30px 60px 0 0;
}
/* coral clusters: overlapping organic lobes, not single blobs */
.reef__coral { position: absolute; bottom: 20%; width: 110px; height: 110px; }
.reef__coral i {
  position: absolute;
  bottom: 0;
  border-radius: 48% 52% 44% 56% / 76% 74% 24% 22%;
  background: radial-gradient(circle at 35% 20%, var(--coral-soft), var(--coral) 62%, #d97a5a);
}
.reef__coral i:nth-child(1) { left: 0;    width: 52px; height: 86px;  rotate: -8deg; }
.reef__coral i:nth-child(2) { left: 34px; width: 44px; height: 112px; rotate: 3deg; }
.reef__coral i:nth-child(3) { left: 66px; width: 40px; height: 66px;  rotate: 10deg; }
.reef__coral--a { left: 10%; scale: 1.15; }
.reef__coral--b { left: 46%; scale: 0.85; }
.reef__coral--b i { background: radial-gradient(circle at 40% 18%, #e9c88a, var(--gold-warm) 60%, #9d7433); }
.reef__coral--c { left: 76%; }

.reef__kelp {
  position: absolute;
  bottom: 16%;
  width: 34px;
  height: 42%;
  transform-origin: bottom center;
  animation: kelp-sway 6s ease-in-out infinite alternate;
}
.reef__kelp--1 { left: 30%; }
.reef__kelp--2 { left: 62%; height: 34%; animation-delay: -3s; }
@keyframes kelp-sway { from { rotate: -4deg; } to { rotate: 5deg; } }
@media (prefers-reduced-motion: reduce) { .reef__kelp { animation: none; } }

.reef__spirit {
  position: absolute;
  bottom: 34%;
  left: 6%;
  font-size: clamp(3rem, 8vh, 4.6rem);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}

.reef__pearl {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf5, var(--pearl) 55%, var(--gold-warm));
  box-shadow: 0 0 18px 4px rgba(251, 238, 215, 0.55);
  bottom: 24%;
  opacity: 0;
}
.reef__pearl--1 { left: 26%; }
.reef__pearl--2 { left: 55%; bottom: 30%; }
.reef__pearl--3 { left: 82%; }

/* ── SCENE 5 · stream ───────────────────────────────────── */
.stream .shell { display: grid; gap: var(--space-lg); }
.stream__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  align-items: start;
}
.stream-card {
  background: color-mix(in oklab, var(--paper) 94%, transparent);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-float);
  rotate: -1.2deg;
}
.stream-card--mid { rotate: 1.4deg; translate: 0 var(--space-xl); }
.stream-card blockquote { font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.stream-card figcaption {
  margin-top: var(--space-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
}
@media (max-width: 700px) {
  .stream-card--mid { translate: 0 0; }
}

/* ── SCENE 6 · exam ─────────────────────────────────────── */
.exam .shell--narrow { display: grid; gap: var(--space-lg); justify-items: start; }
#examName { color: var(--primary); }
[data-depth="3"] #examName { color: var(--pearl); }

.exam__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--foam-dim);
  background: transparent;
  color: var(--foam);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: rgba(244, 249, 239, 0.12); }
.chip:focus-visible { outline: 3px solid var(--pearl); outline-offset: 2px; }
.chip.is-active { background: var(--pearl); border-color: var(--pearl); color: var(--ink); }

.exam__panel ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.exam__panel li {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--foam-dim);
  max-width: 56ch;
}
.exam__panel li::before { content: "◦"; color: var(--pearl); flex-shrink: 0; }
.exam__note { font-size: 0.9rem; color: var(--foam-dim); font-style: italic; }

/* ── SCENE 7 · pricing ──────────────────────────────────── */
.pricing .shell { display: grid; gap: var(--space-md); }
.pricing__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  align-items: center;
}
.price-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}
.price-card--hero {
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-float);
  padding-block: var(--space-2xl);
}
.price-card--hero h3 { color: var(--surface); }
.price-card--hero .price-card__blurb { color: var(--outline); }
.price-card__badge {
  font-size: var(--text-tag);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-warm);   /* on the dark hero card this is 5.4:1 */
}
.price-card:not(.price-card--hero) .price-card__badge { color: var(--gold); }
.price-card__price {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}
.price-card__price span { font-size: 1rem; font-weight: 500; color: inherit; opacity: 0.65; }
.price-card__blurb { color: var(--ink-soft); font-size: 0.95rem; }
.price-card__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.price-card--hero .price-card__list { color: var(--outline); }
.price-card__list li { display: flex; gap: var(--space-xs); align-items: baseline; }
.price-card__list li::before { content: "·"; font-weight: 800; color: var(--coral); }
.price-card .btn { margin-top: var(--space-xs); }

/* ── SCENE 8 · resurface ────────────────────────────────── */
.surface-cta { padding-block: var(--space-section); }
.surface-cta__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-lg);
}
.surface-cta__octo { width: clamp(96px, 12vw, 130px); }

/* ── reveal defaults (JS adds .is-revealed) ─────────────── */
.reveal { opacity: 0; translate: 0 28px; }
.is-revealed { opacity: 1; translate: 0 0; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: 0 0; }
}

/* ── mobile stacking for pinned scenes ──────────────────── */
@media (max-width: 860px) {
  .upload__stage { grid-template-columns: 1fr; }
  .upload__visual { min-height: 340px; }
  .modules__orbit { display: none; }
  .reef__strip { width: 100%; }
  .modules__list li:nth-child(odd) { margin-right: var(--space-md); }
  .modules__list li:nth-child(even) { margin-left: var(--space-md); }
}