/* ============================================================
   Learning the Language of the Water
   Token system
   ============================================================ */

:root{
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Newsreader", ui-serif, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 760px;
  --wrap-wide: 980px;
  --edge: clamp(20px, 6vw, 64px);

  /* seven points on a day arc — dawn to night */
  --dawn-bg:#1B2A3E;      --dawn-fg:#F2ECDD;      --dawn-ac:#E0895A;
  --morning-bg:#123B39;   --morning-fg:#F2ECDD;   --morning-ac:#E0895A;
  --midday-bg:#E9E1CC;    --midday-fg:#182720;    --midday-ac:#B84226;
  --afternoon-bg:#2C4636; --afternoon-fg:#F2ECDD; --afternoon-ac:#E0895A;
  --late-bg:#5C4630;      --late-fg:#F6EEDD;      --late-ac:#E8B15C;
  --dusk-bg:#3B2036;      --dusk-fg:#F3E7E9;      --dusk-ac:#E0895A;
  --night-bg:#0B1420;     --night-fg:#EDEAE0;     --night-ac:#6FA8A0;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; }
body{
  margin:0;
  overflow-x:clip;
  background:var(--night-bg);
  color:var(--night-fg);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

h1,h2{ font-family:var(--font-display); font-weight:450; margin:0; }
em{ font-style:italic; }
p{ margin:0; }

/* ---------- chart bar (nav) ---------- */
.chartbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--edge);
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:currentColor;
  mix-blend-mode:difference;
  pointer-events:none;
}
.chartbar__mark{ opacity:.85; }
.chartbar__coords{ opacity:.7; transition:opacity .4s ease; }

/* ---------- tide fill (subtle vertical gradient rail, left edge) ---------- */
.tide-fill{
  position:fixed; left:0; top:0; bottom:0; width:3px; z-index:41;
  background:linear-gradient(to bottom,
    var(--dawn-bg), var(--morning-bg), var(--midday-ac), var(--afternoon-bg),
    var(--late-bg), var(--dusk-bg), var(--night-bg));
  opacity:.55;
}

/* ---------- interactive chapter nav (right-edge dots) ---------- */
.scene-nav{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:42;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  mix-blend-mode:difference;
}
.scene-nav__item{
  all:unset; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  color:#F5F1E6;
}
.scene-nav__label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateX(6px);
  transition:opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.scene-nav__item:hover .scene-nav__label,
.scene-nav__item:focus-visible .scene-nav__label{ opacity:.85; transform:translateX(0); }
.scene-nav__dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.45;
  transition:opacity .3s ease, transform .3s ease;
}
.scene-nav__item.is-active .scene-nav__dot{
  opacity:1; transform:scale(1.7);
}
@media (max-width:900px){ .scene-nav{ display:none; } }

/* ---------- scenes ---------- */
.scene{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:center;
  padding:96px var(--edge) 88px;
  background:var(--night-bg);
  color:var(--night-fg);
}
.scene[data-tide="dawn"]{ background:var(--dawn-bg); color:var(--dawn-fg); }
.scene[data-tide="morning"]{ background:var(--morning-bg); color:var(--morning-fg); }
.scene[data-tide="midday"]{ background:var(--midday-bg); color:var(--midday-fg); }
.scene[data-tide="afternoon"]{ background:var(--afternoon-bg); color:var(--afternoon-fg); }
.scene[data-tide="late-afternoon"]{ background:var(--late-bg); color:var(--late-fg); }
.scene[data-tide="dusk"]{ background:var(--dusk-bg); color:var(--dusk-fg); }
.scene[data-tide="night"]{ background:var(--night-bg); color:var(--night-fg); }

.scene__inner{ width:100%; max-width:var(--wrap); margin:0 auto; }
.scene--glossary .scene__inner{ max-width:var(--wrap-wide); }

.chapter-mark{
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  opacity:.6; margin:0 0 18px;
}
.scene__title{
  font-size:clamp(28px, 4.4vw, 44px);
  margin:0 0 34px;
  max-width:14ch;
}
.scene--close .scene__title,
.scene[data-scene="5"] .scene__title{ max-width:none; }

/* ---------- hero ---------- */
.hero{ padding-top:20px; }
.hero__title{
  font-size:clamp(40px, 8vw, 84px);
  line-height:1.02;
  margin-bottom:8px;
}
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > * { display:block; }

.hero__lede{ max-width:44ch; margin-top:28px; }
.hero__lede p + p{ margin-top:14px; }

.cast-line{
  width:100%; height:auto; max-height:180px;
  color:var(--dawn-ac);
  margin:34px 0 10px;
  opacity:.9;
}
.cast-line path{
  stroke-dasharray:1100;
  stroke-dashoffset:1100;
  animation:castOut 2.1s 0.4s cubic-bezier(.5,0,.2,1) forwards;
}
.ripple{
  fill:none; stroke:var(--dawn-ac); stroke-width:1.5; opacity:0;
  transform-origin:880px 210px;
}
#castRipple1{ animation:rippleOut 1.6s 2.1s ease-out forwards; }
#castRipple2{ animation:rippleOut 1.6s 2.5s ease-out forwards; }
@keyframes castOut{ to{ stroke-dashoffset:0; } }
@keyframes rippleOut{
  0%{ opacity:.8; r:2; }
  100%{ opacity:0; r:38; }
}
@media (prefers-reduced-motion: reduce){
  .cast-line path{ stroke-dashoffset:0; animation:none; }
  .ripple{ display:none; }
}

.scroll-cue{
  display:flex; align-items:center; gap:10px;
  margin-top:52px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.55;
}
.scroll-cue span{
  width:1px; height:26px; background:currentColor;
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%,100%{ transform:scaleY(1); opacity:.4; }
  50%{ transform:scaleY(1.4); opacity:1; }
}

/* ---------- prose ---------- */
.prose-block{ display:flex; flex-direction:column; gap:14px; max-width:56ch; }
.prose-block p{ font-size:clamp(16px,1.6vw,18.5px); }
.prose-block--centered{ max-width:52ch; margin:0 auto; text-align:left; }

/* ---------- two-column layout (text + media) ---------- */
.two-col{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
}
.two-col--reverse{ grid-template-columns:0.9fr 1.1fr; }
.two-col--reverse .media-slot{ order:-1; }

@media (max-width: 760px){
  .two-col, .two-col--reverse{ grid-template-columns:1fr; }
  .two-col--reverse .media-slot{ order:0; }
}

/* ---------- media placeholder slots ---------- */
.media-slot{
  position:relative;
  border:1px dashed currentColor;
  border-radius:2px;
  opacity:.75;
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
  margin-bottom:30px;
  background:linear-gradient(135deg, currentColor 0.5px, transparent 0.5px) 0 0/14px 14px;
  background-color:rgba(127,127,127,0.06);
}
.media-slot--wide{ aspect-ratio:16/8; }
.media-slot--tall{ aspect-ratio:4/5; }
.media-slot__label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  padding:8px 14px; border:1px solid currentColor; border-radius:2px;
  opacity:.85;
}
.media-slot--filled{
  border-style:solid;
  opacity:1;
  background:#0b0b0b;
  padding:0;
}
.media-slot--filled img,
.media-slot--filled video{
  width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block;
}
.media-slot{ transition:transform .35s ease, box-shadow .35s ease; }
.media-slot:hover{ transform:translateY(-3px); }

/* ---------- collage (overlapping photo pile, journal-pinned feel) ---------- */
.collage{
  position:relative;
  width:100%;
  height:clamp(240px, 32vw, 380px);
  margin:8px 0 54px;
}
.collage .media-slot{
  position:absolute;
  margin:0;
  min-height:0;
  box-shadow:0 14px 30px -12px rgba(0,0,0,0.45);
}
.collage .media-slot:hover{ transform:translateY(-4px) rotate(0deg) !important; z-index:9 !important; }
.collage .media-slot::after{ display:none; }

.collage--hook .media-slot:nth-child(1){ left:0; top:8%; width:44%; height:82%; transform:rotate(-6deg); z-index:2; }
.collage--hook .media-slot:nth-child(2){ right:2%; top:0; width:38%; height:62%; transform:rotate(4deg); z-index:3; }
.collage--hook .media-slot:nth-child(3){ left:32%; bottom:0; width:36%; height:56%; transform:rotate(-2deg); z-index:1; }

.collage--pair .media-slot:nth-child(1){ left:0; top:0; width:58%; height:92%; transform:rotate(-4deg); z-index:2; }
.collage--pair .media-slot:nth-child(2){ right:0; bottom:0; width:46%; height:70%; transform:rotate(5deg); z-index:3; }

.collage--fan .media-slot:nth-child(1){ left:6%; top:6%; width:34%; height:80%; transform:rotate(-8deg); z-index:1; }
.collage--fan .media-slot:nth-child(2){ left:33%; top:0; width:34%; height:88%; transform:rotate(0deg); z-index:3; }
.collage--fan .media-slot:nth-child(3){ right:6%; top:8%; width:34%; height:80%; transform:rotate(7deg); z-index:2; }

@media (max-width:560px){
  .collage{ height:auto; display:flex; flex-direction:column; gap:14px; }
  .collage .media-slot{ position:static !important; width:100% !important; height:200px !important; transform:none !important; }
}

/* ---------- filmstrip (evenly spaced sequence, for the "waiting" chapter) ---------- */
.filmstrip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  margin:34px 0 8px;
}
.filmstrip .media-slot{ margin:0; aspect-ratio:3/4; min-height:0; }
.filmstrip .media-slot::after{ display:none; }
@media (max-width:640px){ .filmstrip{ grid-template-columns:repeat(2, 1fr); } }

.media-slot::after{
  content:attr(data-caption);
  position:absolute; left:0; right:0; bottom:-26px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em;
  opacity:.45; text-align:center;
}

.filmstrip--fly{ grid-template-columns:repeat(3, 1fr); margin-top:30px; }
.filmstrip--fly .media-slot{ aspect-ratio:4/5; }
@media (max-width:640px){ .filmstrip--fly{ grid-template-columns:1fr; } }

/* ---------- glossary ---------- */
.glossary{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
@media (max-width:880px){ .glossary{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .glossary{ grid-template-columns:1fr; } }

.gcard{
  all:unset;
  cursor:pointer;
  perspective:1200px;
  height:190px;
  display:block;
}
.gcard__inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,.1,.2,1);
}
.gcard.is-flipped .gcard__inner{ transform:rotateY(180deg); }
.gcard:focus-visible .gcard__inner{ outline:2px solid var(--midday-ac); outline-offset:4px; }

.gcard__face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:1px solid currentColor;
  border-radius:3px;
  padding:18px;
  display:flex; flex-direction:column;
  background:rgba(0,0,0,0.12);
}
.scene[data-tide="midday"] .gcard__face{ background:rgba(255,255,255,0.4); }

.gcard__face--front{ justify-content:space-between; }
.gcard__eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.55;
}
.gcard__word{
  font-family:var(--font-display); font-size:23px; font-weight:500;
}
.gcard__hint{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; opacity:.5;
}

.gcard__face--back{
  transform:rotateY(180deg);
  justify-content:space-between;
  gap:12px;
}
.gcard__def{ font-family:var(--font-body); font-size:14.5px; line-height:1.45; }
.gcard__use{
  font-family:var(--font-mono); font-size:12px; line-height:1.4; opacity:.75;
  border-top:1px dashed currentColor; padding-top:10px;
}

.glossary__note{ margin-top:26px; font-family:var(--font-mono); font-size:13px; opacity:.6; max-width:52ch; }

/* ---------- tideline divider ---------- */
.tideline{
  position:relative; height:64px; overflow:hidden;
  background:transparent;
}
.tideline svg{
  position:absolute; top:0; left:0;
  width:200%; height:100%;
  animation:tideDrift 22s linear infinite;
  color:inherit;
  opacity:.5;
}
@keyframes tideDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* colored fills bridging adjacent scenes */
#scene-hook + .tideline{ background:var(--dawn-bg); color:var(--morning-bg); }
#scene-sensei + .tideline{ background:var(--morning-bg); color:var(--midday-bg); }
#scene-glossary + .tideline{ background:var(--midday-bg); color:var(--afternoon-bg); }
#scene-rules + .tideline{ background:var(--afternoon-bg); color:var(--late-bg); }
#scene-lesson + .tideline{ background:var(--late-bg); color:var(--dusk-bg); }
#scene-anglers + .tideline{ background:var(--dusk-bg); color:var(--night-bg); }

/* ---------- closing ---------- */
.scene--close{ justify-content:center; text-align:left; }
.closing-mark{
  margin-top:44px; font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; opacity:.5;
}

/* ---------- scroll reveal ---------- */
.reveal-up{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.reveal-up.is-visible{ opacity:1; transform:translateY(0); }

.reveal-line span{
  display:inline-block;
  transform:translateY(110%);
  animation:lineRise .9s cubic-bezier(.2,.7,.15,1) forwards;
}
.reveal-line:nth-child(1) span{ animation-delay:.15s; }
.reveal-line:nth-child(2) span{ animation-delay:.28s; }
.reveal-line:nth-child(3) span{ animation-delay:.41s; }
@keyframes lineRise{ to{ transform:translateY(0); } }

/* stagger reveal-up items within a visible group slightly via nth-child */
.prose-block .reveal-up:nth-child(1){ transition-delay:.02s; }
.prose-block .reveal-up:nth-child(2){ transition-delay:.10s; }
.prose-block .reveal-up:nth-child(3){ transition-delay:.18s; }
.gcard.reveal-up{ transition-delay:calc(var(--i, 0) * 70ms); }

::selection{ background:var(--midday-ac); color:var(--midday-bg); }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }