/* ────────────────────────────────────────────────────────────
   UNBIND landing — base, shell, hero.
   Depth backdrop is a fixed layer; sections are transparent so
   the scroll-driven water color shows through.
─────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* ── depth backdrop ─────────────────────────────────────── */
.depth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--surface);
  /* JS animates background-color through the water stops */
}

.bubble-field { position: absolute; inset: 0; overflow: hidden; }
.bubble-field span {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 253, 245, 0.4);
  background: rgba(255, 253, 245, 0.08);
  animation: bubble-rise linear infinite;
}
@keyframes bubble-rise {
  from { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  to   { transform: translateY(-115vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble-field { display: none; }
}

/* ── depth gauge (wide screens only) ───────────────────── */
.depth-gauge {
  position: fixed;
  right: clamp(16px, 2.5vw, 40px);
  top: 50%;
  translate: 0 -50%;
  z-index: 15;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
@media (min-width: 1101px) { .depth-gauge { display: flex; } }
.depth-gauge__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  background: color-mix(in oklab, var(--paper) 80%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
  min-width: 46px;
  text-align: center;
}
.depth-gauge__track {
  width: 3px;
  height: min(34vh, 300px);
  border-radius: 999px;
  background: color-mix(in oklab, var(--outline) 45%, transparent);
  overflow: hidden;
}
.depth-gauge__fill {
  width: 100%;
  height: 100%;
  background: var(--coral);
  transform-origin: top;
  transform: scaleY(0);
}
@media (prefers-reduced-motion: reduce) { .depth-gauge { display: none; } }

/* ── typography ─────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); font-weight: 800; }
h2 { font-size: var(--text-h2); font-weight: 700; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; }

.lead {
  font-size: var(--text-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34em;
}
.lead--deep { color: var(--foam-dim); }

.tag {
  font-size: var(--text-tag);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.tag--deep { color: var(--pearl); }

/* deep-water sections flip heading color; depths 1–2 are light
   water, so they keep ink text — only depth 3 goes light-on-dark */
[data-depth] h2 { color: var(--ink); }
[data-depth="1"] .lead--deep { color: var(--ink-soft); }
[data-depth="1"] .tag--deep { color: var(--gold); }
/* depth 2 sits on mid-water #9ed2c2 — needs full ink for AA contrast */
[data-depth="2"] .lead--deep { color: var(--ink); }
[data-depth="2"] .tag--deep { color: var(--gold-deep); }
[data-depth="3"] h2 { color: var(--foam); }

/* ── shell ──────────────────────────────────────────────── */
.shell {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - 40px, var(--lane)); }

.scene { position: relative; padding-block: var(--space-section); }

.pin-stage {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
}
/* A pinned scene IS a full-viewport stage that centers its own content.
   The scene's block padding would stack on top of the 100svh stage and
   push its lower half — e.g. the last upload bullet — below the fold, so
   drop it on desktop where the stage owns the full height. */
@media (min-width: 861px) {
  .scene:has(.pin-stage) { padding-block: 0; }
}
@media (max-width: 860px) {
  /* unpinned on mobile — leave air for the fixed topbar */
  .pin-stage { padding-top: 76px; min-height: 0; }
}

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--surface);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 6px 0 -2px var(--primary-dim), var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 -2px var(--primary-dim), var(--shadow-soft); }
.btn:active { transform: translateY(1px); box-shadow: 0 3px 0 -2px var(--primary-dim); }
.btn:focus-visible { outline: 3px solid var(--gold-warm); outline-offset: 3px; }
.btn--big { font-size: 1.12rem; padding: 16px 34px; text-align: center; text-wrap: balance; }
.btn--small { font-size: 0.9rem; padding: 8px 18px; min-height: 40px; }
.btn--ghost {
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--primary), var(--shadow-soft); }
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--primary-dim); }

/* ── topbar ─────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) clamp(16px, 3vw, 32px);
}
.topbar__logo img { width: 112px; height: auto; }
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.topbar.is-scrolled::before { opacity: 1; }

/* ── SCENE 1 · hero ─────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--space-3xl) + 40px) 0;
  overflow: hidden;
}

.hero__inner {
  width: min(100% - 40px, var(--maxw));
  margin-inline: auto;
  display: grid;
  gap: var(--space-lg);
  max-width: 880px;
  /* asymmetric: text sits left of center on wide screens */
  padding-right: clamp(0px, 8vw, 160px);
  position: relative;
  z-index: 1;   /* copy reads above the drifting paper scraps */
}

.hero h1 em {
  font-style: normal;
  color: var(--primary);
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 2%; right: 2%; bottom: 0.04em;
  height: 0.16em;
  background: var(--coral);
  border-radius: 999px;
  z-index: -1;
  transform: skewY(-1.2deg);
}

.hero__cta { display: grid; gap: var(--space-sm); justify-items: start; }
.hero__cta-note { font-size: 0.88rem; color: var(--ink-soft); }

/* drifting paper scraps */
.hero__paper {
  position: absolute;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--surface-3);
  border-radius: 6px;
  padding: 8px 14px;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  animation: paper-drift 9s ease-in-out infinite alternate;
}
.hero__paper--1 { top: 16%; right: 6%;  rotate: 4deg;  animation-delay: 0s; }
.hero__paper--2 { top: 34%; right: 14%; rotate: -6deg; animation-delay: -2.5s; }
.hero__paper--3 { top: 56%; right: 4%;  rotate: 2deg;  animation-delay: -5s; }
.hero__paper--4 { top: 72%; right: 18%; rotate: -3deg; animation-delay: -7s; }
@keyframes paper-drift {
  from { translate: 0 0; }
  to   { translate: -14px 18px; }
}
@media (max-width: 860px) {
  /* keep only the top scrap — the others collide with copy on
     narrow screens */
  .hero__paper--2, .hero__paper--3, .hero__paper--4 { display: none; }
  .hero__paper { font-size: 0.72rem; opacity: 0.85; }
  .btn--big { font-size: 1rem; padding: 14px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__paper { animation: none; }
}

/* Octo peeking over the waterline */
.hero__octo {
  position: absolute;
  bottom: 34px;
  right: clamp(4%, 12vw, 16%);
  width: clamp(90px, 12vw, 150px);
  aspect-ratio: 1;
  z-index: 2;
}
.hero__octo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}
.hero__octo img { opacity: 0; }
.hero__octo img.is-frame { opacity: 1; }

.waterline {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
}
.waterline svg { width: 100%; height: clamp(48px, 8vw, 90px); }

/* ── footer ─────────────────────────────────────────────── */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xl) 20px var(--space-3xl);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.footer img { width: 84px; opacity: 0.8; }
.footer a { color: var(--primary); text-decoration-thickness: 1px; }
.footer a:focus-visible { outline: 3px solid var(--gold-warm); outline-offset: 3px; border-radius: 4px; }