/* ===================================================================
   annual.quest — gilded brutalist aquarium almanac
   Strict triadic palette: indigo-velvet, coral-lacquer, gold-leaf
   Plaster-mint ground, abyssal-ink for the deep
   =================================================================== */

:root {
  --plaster-mint:  #C8E6D3;
  --indigo-velvet: #1B1E4F;
  --coral-lacquer: #FF5A3C;
  --gold-leaf:     #D4A64A;
  --abyssal-ink:   #0B0C1A;

  --shadow-offset: 10px;
  --border-w: 5px;
  --inset-pad: 18px;

  --ff-display:  'Poiret One', 'Cormorant Garamond', serif;
  --ff-display2: 'Limelight', 'Poiret One', serif;
  --ff-body:     'Cormorant Garamond', Georgia, serif;
  --ff-mono:     'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--plaster-mint);
  color: var(--indigo-velvet);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.78;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  position: relative;
}

/* ----------- GRAIN OVERLAY ----------- */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  mix-blend-mode: overlay;
  opacity: 0.08;
  background-repeat: repeat;
}

/* ----------- RIPPLE LAYER ----------- */
.ripple-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 800;
  overflow: visible;
}
.ripple {
  fill: none;
  stroke-width: 0;
  stroke-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ripple-indigo { stroke: var(--indigo-velvet); }
.ripple-coral  { stroke: var(--coral-lacquer); }
.ripple-gold   { stroke: var(--gold-leaf); }

@keyframes ripple-expand {
  0%   { r: 0;    stroke-width: 0.8; stroke-opacity: 0.85; }
  100% { r: 220;  stroke-width: 0.05; stroke-opacity: 0; }
}
.ripple.go { animation: ripple-expand 1400ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
.ripple-coral.go { animation-delay: 220ms; animation-duration: 1400ms; }
.ripple-gold.go  { animation-delay: 440ms; animation-duration: 1400ms; }

/* ----------- LANDING APERTURE ----------- */
.landing {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
  background: var(--plaster-mint);
  position: relative;
}

.aperture {
  width: 38vmin;
  height: 38vmin;
  min-width: 320px;
  min-height: 320px;
  position: relative;
  background: var(--plaster-mint);
  border: 6px solid var(--indigo-velvet);
  box-shadow: 12px 12px 0 0 var(--coral-lacquer);
  cursor: pointer;
  transition: transform 600ms cubic-bezier(0.2,0.9,0.3,1);
}
.aperture:hover { transform: translate(-2px, -2px); }
.aperture:hover ~ .aperture { box-shadow: 14px 14px 0 0 var(--coral-lacquer); }

.aperture-inner {
  position: absolute;
  inset: 14px;
  border: 1px solid var(--gold-leaf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2vmin;
  padding: 2.5vmin;
  text-align: center;
}

.aperture-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle at center, var(--gold-leaf) 0 3px, transparent 3.5px),
    conic-gradient(from 0deg, var(--gold-leaf) 0 6deg, transparent 6deg 45deg, var(--gold-leaf) 45deg 51deg, transparent 51deg 90deg, var(--gold-leaf) 90deg 96deg, transparent 96deg 135deg, var(--gold-leaf) 135deg 141deg, transparent 141deg 180deg, var(--gold-leaf) 180deg 186deg, transparent 186deg 225deg, var(--gold-leaf) 225deg 231deg, transparent 231deg 270deg, var(--gold-leaf) 270deg 276deg, transparent 276deg 315deg, var(--gold-leaf) 315deg 321deg, transparent 321deg 360deg);
}
.aperture-corner.tl { top: -7px; left: -7px; }
.aperture-corner.tr { top: -7px; right: -7px; }
.aperture-corner.bl { bottom: -7px; left: -7px; }
.aperture-corner.br { bottom: -7px; right: -7px; }

.aperture-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--indigo-velvet);
  text-transform: uppercase;
}

.aperture-title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.6vw, 5.8rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--gold-leaf);
  -webkit-text-stroke: 1px var(--indigo-velvet);
  text-stroke: 1px var(--indigo-velvet);
}

/* shadow-headline trick: thick limelight underlay */
.shadow-headline {
  position: relative;
  display: inline-block;
}
.shadow-headline::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) scale(1.1);
  font-family: var(--ff-display2);
  color: var(--gold-leaf);
  opacity: 0.18;
  z-index: -1;
  white-space: nowrap;
  letter-spacing: 0.08em;
  -webkit-text-stroke: 0;
  pointer-events: none;
}

.aperture-year {
  font-family: var(--ff-display2);
  font-size: clamp(1.4rem, 3.5vw, 2.6rem);
  color: var(--coral-lacquer);
  letter-spacing: 0.18em;
  line-height: 1;
  -webkit-text-stroke: 0.5px var(--indigo-velvet);
}

.aperture-glyph {
  width: 64px;
  height: 32px;
  margin: 0.6vmin 0;
}

.aperture-subtitle {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  color: var(--indigo-velvet);
  margin-top: 1.4vmin;
}

/* ----------- HORIZON RULE ----------- */
.horizon-rule {
  width: 38vw;
  height: 12px;
  margin: 0 auto;
  display: block;
}
.horizon-rule svg { width: 100%; height: 12px; overflow: visible; }
.horizon-line {
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  transition: stroke-dashoffset 900ms cubic-bezier(0.65,0,0.35,1);
}
.horizon-rule.in-view .horizon-line { stroke-dashoffset: 0; }
.horizon-dot-coral {
  opacity: 0;
  transition: opacity 400ms ease 300ms;
}
.horizon-rule.in-view .horizon-dot-coral { opacity: 1; }
.horizon-disc {
  transform-origin: center;
  transform-box: fill-box;
  transform: scale(0);
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 350ms;
}
.horizon-rule.in-view .horizon-disc { transform: scale(1); }

/* ----------- MA CORRIDORS ----------- */
.ma-corridor {
  height: 240px;
  width: 100%;
  display: grid;
  place-items: center;
  position: relative;
}
.ma-corridor.wide { height: 360px; }

.ma-numeral {
  font-family: var(--ff-display);
  font-size: 16rem;
  line-height: 1;
  color: var(--gold-leaf);
  opacity: 0.18;
  letter-spacing: 0.04em;
  user-select: none;
  -webkit-text-stroke: 0.5px var(--indigo-velvet);
}

/* ----------- CHAMBERS ----------- */
.chamber {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  padding: 0 4vw;
  margin: 64px 0;
  --ignited: 0;
}

.chamber .chamber-frame {
  grid-column: var(--col-start) / span var(--col-span);
  position: relative;
  background: var(--plaster-mint);
  border: 5px solid var(--indigo-velvet);
  box-shadow: 10px 10px 0 0 var(--coral-lacquer);
  padding: 56px 48px 56px 48px;
  min-height: 460px;
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: brightness(1.08);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.9, 0.3, 1),
    transform 720ms cubic-bezier(0.2, 0.9, 0.3, 1),
    filter 720ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 400ms ease;
}

.chamber.revealed .chamber-frame {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: brightness(1);
}

.chamber-tall .chamber-frame { min-height: 560px; }
.chamber-wide .chamber-frame { min-height: 420px; }
.chamber-square .chamber-frame { min-height: 480px; }
.chamber-final .chamber-frame { min-height: 640px; padding: 80px 64px; }

/* inset gold rule */
.chamber-inset {
  position: absolute;
  inset: var(--inset-pad);
  border: 1px solid var(--gold-leaf);
  pointer-events: none;
  z-index: 1;
}

/* sunburst corner glyphs */
.sunburst {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 3;
  background:
    radial-gradient(circle at center, var(--gold-leaf) 0 2.4px, transparent 2.8px),
    conic-gradient(from 22.5deg, transparent 0 10deg,
      var(--gold-leaf) 10deg 12deg, transparent 12deg 55deg,
      var(--gold-leaf) 55deg 57deg, transparent 57deg 100deg,
      var(--gold-leaf) 100deg 102deg, transparent 102deg 145deg,
      var(--gold-leaf) 145deg 147deg, transparent 147deg 190deg,
      var(--gold-leaf) 190deg 192deg, transparent 192deg 235deg,
      var(--gold-leaf) 235deg 237deg, transparent 237deg 280deg,
      var(--gold-leaf) 280deg 282deg, transparent 282deg 325deg,
      var(--gold-leaf) 325deg 327deg, transparent 327deg 360deg);
  opacity: 0;
  transition: opacity 600ms ease 120ms, transform 600ms cubic-bezier(0.34,1.56,0.64,1) 120ms;
  transform: scale(0.6);
}
.chamber.revealed .sunburst { opacity: 1; transform: scale(1); }
.sunburst.sb-tl { top: 6px; left: 6px; }
.sunburst.sb-tr { top: 6px; right: 6px; }
.sunburst.sb-bl { bottom: 6px; left: 6px; }
.sunburst.sb-br { bottom: 6px; right: 6px; }

/* ledger header */
.chamber-head {
  position: relative;
  z-index: 2;
  max-width: 80%;
}
.chamber-id {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  color: var(--indigo-velvet);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.chamber-title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  letter-spacing: 0.08em;
  line-height: 0.96;
  color: var(--gold-leaf);
  -webkit-text-stroke: 1px var(--indigo-velvet);
  margin: 0;
}

.solstice .chamber-title {
  font-size: clamp(2.4rem, 5.2vw, 5.2rem);
}

/* roman numeral watermark */
.chamber-numeral {
  position: absolute;
  top: 6%;
  right: 6%;
  font-family: var(--ff-display);
  font-size: clamp(6rem, 14vw, 12rem);
  line-height: 1;
  color: var(--gold-leaf);
  opacity: 0.28;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* fish in chamber: upper-right area but offset */
.chamber-fish {
  position: absolute;
  top: 14%;
  right: 6%;
  width: 220px;
  z-index: 3;
  pointer-events: none;
}
.chamber-fish.big { width: 280px; }
.chamber-fish svg { width: 100%; height: auto; display: block; }
.fish-label {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--indigo-velvet);
  text-transform: uppercase;
  margin-top: 6px;
  line-height: 1.4;
  text-align: right;
}

/* body content lower-left */
.chamber-body {
  position: relative;
  z-index: 2;
  width: 62%;
  max-width: 62ch;
  margin-top: auto;
  padding-top: 80px;
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.78;
  color: var(--indigo-velvet);
}

.chamber-body p {
  margin: 0 0 1.2em 0;
  text-indent: 3em;
}
.chamber-body p:first-child { text-indent: 0; }

.chamber-body em {
  font-style: italic;
  font-weight: 600;
  color: var(--coral-lacquer);
}

.dropcap {
  font-family: var(--ff-display2);
  font-size: 5em;
  float: left;
  line-height: 0.9;
  padding-right: 0.12em;
  padding-top: 0.04em;
  color: var(--gold-leaf);
  -webkit-text-stroke: 0.5px var(--indigo-velvet);
}

/* chamber ignition state from ripple */
.chamber.ignited .chamber-frame {
  border-color: var(--abyssal-ink);
}

/* ----------- HORIZONTAL AQUARIUM STRIP ----------- */
.aquarium {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--abyssal-ink);
  margin: 80px 0;
  border-top: 5px solid var(--indigo-velvet);
  border-bottom: 5px solid var(--indigo-velvet);
  box-shadow:
    0 -10px 0 0 var(--coral-lacquer) inset,
    0 10px 0 0 var(--coral-lacquer) inset;
}

.aquarium-track {
  position: relative;
  height: 100%;
  width: 300vw;
  will-change: transform;
  transform: translateX(0);
}

.aquarium-title {
  position: absolute;
  top: 50%;
  left: 6vw;
  transform: translateY(-50%);
  width: 30vw;
  color: var(--plaster-mint);
}
.aq-eyebrow {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  color: var(--gold-leaf);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.aq-headline {
  font-family: var(--ff-display);
  font-size: clamp(2.6rem, 5vw, 5rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--gold-leaf);
  -webkit-text-stroke: 1px var(--plaster-mint);
  margin: 0 0 18px 0;
}
.aq-headline.shadow-headline::before { color: var(--coral-lacquer); opacity: 0.32; }
.aq-sub {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--plaster-mint);
  text-transform: uppercase;
}

.aq-fish {
  position: absolute;
  top: var(--top);
  left: 0;
  width: 240px;
  transform: translateX(calc(var(--scroll-x, 0px) * var(--speed)));
  will-change: transform;
}
.aq-fish.lead { width: 320px; }
.aq-fish svg { width: 100%; height: auto; display: block; }

.aq-fish:nth-of-type(1)  { left: 36vw; }
.aq-fish:nth-of-type(2)  { left: 56vw; }
.aq-fish:nth-of-type(3)  { left: 78vw; }
.aq-fish:nth-of-type(4)  { left: 102vw; }
.aq-fish:nth-of-type(5)  { left: 124vw; }
.aq-fish:nth-of-type(6)  { left: 148vw; }
.aq-fish:nth-of-type(7)  { left: 172vw; }
.aq-fish:nth-of-type(8)  { left: 198vw; }
.aq-fish:nth-of-type(9)  { left: 220vw; }
.aq-fish:nth-of-type(10) { left: 244vw; }
.aq-fish:nth-of-type(11) { left: 266vw; }
.aq-fish:nth-of-type(12) { left: 280vw; }

.fish-label.dark {
  color: var(--indigo-velvet);
  background: var(--plaster-mint);
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--indigo-velvet);
  margin-top: 6px;
}
.fish-label.light {
  color: var(--plaster-mint);
  background: var(--abyssal-ink);
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--gold-leaf);
  margin-top: 6px;
}

/* caustics (the only blur on the site) */
.caustic {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  background: var(--indigo-velvet);
  opacity: 0.22;
  pointer-events: none;
}
.caustic.c1 { width: 600px; height: 200px; top: 10%; left: 20vw; }
.caustic.c2 { width: 400px; height: 180px; top: 60%; left: 80vw; }
.caustic.c3 { width: 700px; height: 220px; top: 30%; left: 160vw; }
.caustic.c4 { width: 500px; height: 200px; top: 70%; left: 240vw; }

/* ----------- RETURN CARTOUCHE ----------- */
.return-block {
  display: grid;
  place-items: center;
  margin: 120px 0 200px;
  padding: 0 4vw;
}
.return-cartouche {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 56px;
  background: var(--plaster-mint);
  border: 5px solid var(--indigo-velvet);
  box-shadow: 8px 8px 0 0 var(--coral-lacquer);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  letter-spacing: 0.34em;
  color: var(--gold-leaf);
  -webkit-text-stroke: 0.5px var(--indigo-velvet);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.return-cartouche:hover {
  transform: translate(-2px, -2px);
  box-shadow: 12px 12px 0 0 var(--coral-lacquer);
}
.return-cartouche::before,
.return-cartouche::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold-leaf);
  pointer-events: none;
}
.return-cartouche::after { display: none; }

.rc-corner {
  position: absolute;
  width: 12px; height: 12px;
  background:
    radial-gradient(circle at center, var(--gold-leaf) 0 2.4px, transparent 2.8px),
    conic-gradient(from 22.5deg, transparent 0 10deg,
      var(--gold-leaf) 10deg 12deg, transparent 12deg 55deg,
      var(--gold-leaf) 55deg 57deg, transparent 57deg 100deg,
      var(--gold-leaf) 100deg 102deg, transparent 102deg 145deg,
      var(--gold-leaf) 145deg 147deg, transparent 147deg 190deg,
      var(--gold-leaf) 190deg 192deg, transparent 192deg 235deg,
      var(--gold-leaf) 235deg 237deg, transparent 237deg 280deg,
      var(--gold-leaf) 280deg 282deg, transparent 282deg 325deg,
      var(--gold-leaf) 325deg 327deg, transparent 327deg 360deg);
}
.rc-corner.tl { top: -6px; left: -6px; }
.rc-corner.tr { top: -6px; right: -6px; }
.rc-corner.bl { bottom: -6px; left: -6px; }
.rc-corner.br { bottom: -6px; right: -6px; }

.rc-glyph {
  font-family: var(--ff-display2);
  color: var(--coral-lacquer);
  -webkit-text-stroke: 0;
  font-size: 1.4rem;
}

/* ----------- DEPTH GAUGE ----------- */
.depth-gauge {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--coral-lacquer);
  border-top: 3px solid var(--indigo-velvet);
  z-index: 500;
  display: flex;
  align-items: center;
  padding: 0 24px;
  transition: background-color 600ms ease;
}
.depth-gauge.deep {
  background: var(--abyssal-ink);
  color: var(--gold-leaf);
}
.depth-gauge.deep .dg-numeral { font-weight: 700; }

.dg-ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--indigo-velvet) 0,
    var(--indigo-velvet) 2px,
    transparent 2px,
    transparent 40px
  );
  opacity: 0.7;
}

.dg-numeral {
  position: relative;
  margin: 0 auto;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  color: var(--gold-leaf);
  -webkit-text-stroke: 0.5px var(--indigo-velvet);
  letter-spacing: 0.14em;
  z-index: 2;
}
.dg-unit {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  margin-left: 6px;
}
.dg-anchor {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-display2);
  font-size: 1.2rem;
  color: var(--gold-leaf);
  letter-spacing: 0.1em;
}
.dg-anchor.right { left: auto; right: 24px; }

/* ----------- RESPONSIVE ----------- */
@media (max-width: 900px) {
  .chamber { padding: 0 5vw; grid-template-columns: 1fr; }
  .chamber .chamber-frame {
    grid-column: 1 / -1 !important;
    padding: 40px 28px;
    min-height: auto !important;
  }
  .chamber-fish {
    position: relative;
    top: auto; right: auto;
    width: 180px;
    margin: 24px 0 0 auto;
  }
  .chamber-numeral {
    font-size: 8rem;
  }
  .chamber-body {
    width: 100%;
    padding-top: 32px;
  }
  .ma-corridor { height: 120px; }
  .ma-corridor.wide { height: 180px; }
  .ma-numeral { font-size: 9rem; }

  .aquarium-title { width: 70vw; }

  .aperture { width: 80vmin; height: 80vmin; }
}