:root {
  /* Elements Interactive Elements:** Elements: Element */
  --ocean: #0A1628;
  --abyss: #050D1A;
  --ink: #132743;
  --storm: #1A6B5A;
  --aurora: #3EE8C0;
  --foam: #E4EDF5;
  --spindrift: #C8D8E8;
  --coral: #E85A3E;
  --paper: #D4CCBA;
  --paper-ink: #1B2838;
  --annotation: #7BA7C9;
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--foam);
  background: var(--ocean);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.72;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 15%, rgba(62, 232, 192, 0.08), transparent 38%),
    radial-gradient(ellipse at 78% 32%, rgba(26, 107, 90, 0.13), transparent 44%),
    linear-gradient(180deg, rgba(10, 22, 40, 0) 0%, rgba(5, 13, 26, 0.42) 100%);
  background-size: 200% 200%;
  animation: aurora-drift 30s linear infinite alternate;
  opacity: 0.85;
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(97deg, rgba(228, 237, 245, 0.025) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 20% 30%, rgba(228, 237, 245, 0.035) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 60%, rgba(62, 232, 192, 0.04) 0 1px, transparent 1.5px);
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: -1;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h3 { font-size: clamp(1.8rem, 3.2vw, 3.2rem); }
p { margin: 1.1rem 0 0; }

.tide-page { min-height: 700vh; }

.panel {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.opening {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  text-align: center;
  background: var(--ocean);
}

.site-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.01em;
  max-width: 95vw;
  color: var(--foam);
  font-size: clamp(3.2rem, 11vw, 9.5rem);
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.site-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(46px) scale(0.82) rotate(5deg);
  animation: spring-in 850ms var(--spring) forwards;
}

.lead {
  max-width: 760px;
  margin: 1.5rem auto 0;
  color: var(--spindrift);
  opacity: 0;
  transform: translateY(22px);
  animation: soft-rise 900ms ease forwards 2.35s;
}

.hand-note,
.annotation,
.kicker {
  font-family: "Caveat", cursive;
  font-weight: 400;
}

.opening-note {
  position: absolute;
  top: 18vh;
  left: 13vw;
  margin: 0;
  color: var(--coral);
  font-size: clamp(1.1rem, 2vw, 2rem);
  transform: rotate(-7deg);
  opacity: 0;
  animation: scribble-in 700ms ease forwards 1.7s;
}

.hero-wave {
  width: min(760px, 82vw);
  height: auto;
  margin-top: 1.4rem;
}

.hero-wave path,
.wave-separator path,
.tide-line path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-wave path {
  stroke: var(--aurora);
  stroke-width: 5;
  stroke-dasharray: 980;
  stroke-dashoffset: 980;
  filter: drop-shadow(0 0 18px rgba(62, 232, 192, 0.28));
  animation: draw-line 2s ease forwards 1.35s;
}

.compass {
  position: fixed;
  top: clamp(1rem, 2.2vw, 2rem);
  left: clamp(1rem, 2.2vw, 2rem);
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--aurora);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  animation: compass-in 800ms var(--spring) forwards 1.5s;
  z-index: 20;
}

.compass svg { overflow: visible; }
.compass path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.compass .compass-ring { stroke-width: 3; animation: wobble-stroke 2.8s ease-in-out infinite alternate; }
.compass:hover { color: var(--foam); }

.current-zone {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
  padding: clamp(6rem, 12vw, 14rem) clamp(2rem, 6vw, 7rem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(62, 232, 192, 0.06), transparent 58%),
    linear-gradient(180deg, var(--ocean), var(--ink) 70%, var(--ocean));
}

.paper-zone {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(62, 232, 192, 0.11), transparent 48%),
    linear-gradient(180deg, var(--ocean), var(--ink) 35%, var(--ocean));
}

.dense-zone {
  background:
    radial-gradient(ellipse at 74% 12%, rgba(62, 232, 192, 0.08), transparent 45%),
    linear-gradient(180deg, var(--ocean), #091426 45%, var(--abyss));
}

.sparse-zone {
  min-height: 125vh;
  align-content: center;
  background:
    radial-gradient(ellipse at 42% 12%, rgba(62, 232, 192, 0.12), transparent 48%),
    linear-gradient(180deg, var(--ocean), var(--abyss));
}

.cluster {
  position: relative;
  z-index: 2;
  min-height: 260px;
  padding: clamp(1.35rem, 3vw, 3rem);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.cluster::before {
  content: attr(data-depth);
  position: absolute;
  top: 0.6rem;
  right: 1.1rem;
  font-family: "Caveat", cursive;
  color: var(--annotation);
  opacity: 0.75;
  font-size: 1.2rem;
}

.dark {
  color: var(--foam);
  background: rgba(19, 39, 67, 0.68);
  border: 2px solid rgba(123, 167, 201, 0.3);
  backdrop-filter: blur(2px);
}

.paper {
  color: var(--paper-ink);
  background: var(--paper);
  border: 2px solid rgba(27, 40, 56, 0.32);
  box-shadow: 0 22px 0 rgba(5, 13, 26, 0.22), 0 35px 90px rgba(0, 0, 0, 0.35);
}

.span-two { grid-column: span 2; }
.compact { align-self: end; }
.tilt-left { transform: rotate(-1.5deg); }
.tilt-right { transform: rotate(2deg); }
.tilt-soft { transform: rotate(-0.5deg); }

.kicker {
  margin: 0 0 0.9rem;
  color: var(--coral);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.dark .kicker { color: var(--aurora); }
.paper h2, .paper h3 { color: var(--paper-ink); }
.dark h2, .dark h3 { color: var(--foam); }

.pin {
  position: absolute;
  top: 14px;
  left: 22px;
  width: 22px;
  height: 22px;
  border-radius: 50% 45% 48% 52%;
  background: var(--coral);
  box-shadow: inset -4px -3px 0 rgba(27, 40, 56, 0.28), 0 5px 8px rgba(0, 0, 0, 0.24);
}

.pin::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 2px;
  height: 22px;
  background: var(--paper-ink);
  transform: rotate(17deg);
}

.annotation {
  position: absolute;
  z-index: 3;
  width: 220px;
  color: var(--coral);
  font-size: clamp(1.15rem, 1.9vw, 2rem);
  line-height: 1.05;
  opacity: 0;
}

.mark-one { left: 12vw; top: 58vh; transform: rotate(-9deg); }
.mark-two { left: 13vw; top: 26vh; transform: rotate(7deg); }
.mark-three { left: 58vw; top: 65vh; transform: rotate(-4deg); }
.mark-four { left: 14vw; top: 34vh; transform: rotate(8deg); }

.tide-line {
  position: absolute;
  inset: 8vh 5vw auto auto;
  width: min(74vw, 980px);
  height: auto;
  opacity: 0.55;
  z-index: 1;
}

.tide-line-b { inset: 12vh auto auto 4vw; }
.tide-line path {
  stroke: var(--annotation);
  stroke-width: 4;
  stroke-dasharray: 3 18;
  stroke-dashoffset: 200;
}

.wave-separator {
  display: block;
  width: 100%;
  height: 120px;
  margin: -55px 0;
  position: relative;
  z-index: 5;
  pointer-events: none;
}

.wave-separator path {
  stroke: var(--aurora);
  stroke-width: 4;
  stroke-dasharray: 1250;
  stroke-dashoffset: 1250;
  opacity: 0.78;
}

.wave-separator.is-visible path,
.tide-line.is-visible path { animation: draw-line 2.4s ease forwards; }

.ink-link {
  position: relative;
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--storm);
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  text-decoration: none;
  transition: color 200ms ease;
}

.ink-link svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  width: 100%;
  height: 16px;
}

.ink-link path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  transition: stroke-dashoffset 260ms ease;
}

.ink-link:hover { color: var(--aurora); }
.ink-link:hover path { stroke-dashoffset: 0; }

.ripple {
  position: fixed;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  pointer-events: none;
  border: 1px solid rgba(62, 232, 192, 0.45);
  animation: ripple 800ms ease-out forwards;
  z-index: 100;
}

.aurora {
  position: absolute;
  inset: -15% -10% auto -10%;
  height: 50vh;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(62, 232, 192, 0.08), transparent 60%);
  background-size: 200% 200%;
  filter: blur(6px);
  opacity: 0;
  animation: aurora-drift 30s linear infinite alternate, aurora-pulse 8s ease-in-out infinite alternate;
  z-index: 0;
}

.opening .aurora { animation-delay: 500ms, 500ms; }
.aurora-two { inset: 0 -5% auto 18%; opacity: 0.7; }
.aurora-three { inset: -5% 20% auto -8%; opacity: 0.8; }
.aurora-four { inset: 4% -20% auto 22%; opacity: 0.75; }
.aurora-five { height: 68vh; opacity: 0.95; }

.final-panel {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 7rem);
  min-height: 120vh;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(62, 232, 192, 0.2), transparent 48%),
    linear-gradient(180deg, var(--abyss), #020711);
}

.final-aurora { height: 80vh; opacity: 1; }
.anchor-icon { width: clamp(110px, 15vw, 180px); color: var(--aurora); filter: drop-shadow(0 0 30px rgba(62, 232, 192, 0.32)); }
.anchor-icon path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.final-title { max-width: 980px; color: var(--aurora); font-size: clamp(2.8rem, 6vw, 5.5rem); }
.final-note { margin: 0; color: var(--coral); font-size: clamp(1.5rem, 3vw, 3rem); transform: rotate(-4deg); }

.reveal {
  opacity: 0;
  transform: translateY(60px) rotate(2deg) scale(0.97);
  transition: opacity 600ms ease, transform 600ms var(--spring);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--settle, -0.5deg)) scale(1);
}

.reveal-delay.is-visible {
  opacity: 1;
  transition: opacity 500ms ease 200ms;
}

.tilt-left.reveal.is-visible { --settle: -1.5deg; }
.tilt-right.reveal.is-visible { --settle: 2deg; }
.tilt-soft.reveal.is-visible { --settle: -0.5deg; }

@keyframes spring-in {
  0% { opacity: 0; transform: translateY(46px) scale(0.82) rotate(5deg); }
  70% { opacity: 1; transform: translateY(-8px) scale(1.05) rotate(-2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes soft-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes scribble-in { to { opacity: 1; transform: rotate(-7deg) translateY(0); } }
@keyframes compass-in { to { opacity: 1; transform: scale(1); } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

@keyframes aurora-drift {
  0% { background-position: 0% 50%; transform: translate3d(-1%, 0, 0) rotate(0deg); }
  100% { background-position: 100% 50%; transform: translate3d(2%, 2%, 0) rotate(2deg); }
}

@keyframes aurora-pulse {
  from { opacity: 0.45; }
  to { opacity: 0.95; }
}

@keyframes wobble-stroke {
  from { stroke-width: 2.4; }
  to { stroke-width: 3.8; }
}

@keyframes ripple {
  0% { transform: scale(0.5); opacity: 1; box-shadow: 0 0 0 0 rgba(62, 232, 192, 0.3), 0 0 0 0 rgba(62, 232, 192, 0.2), 0 0 0 0 rgba(62, 232, 192, 0.1); }
  100% { transform: scale(10); opacity: 0; box-shadow: 0 0 0 12px rgba(62, 232, 192, 0), 0 0 0 25px rgba(62, 232, 192, 0), 0 0 0 42px rgba(62, 232, 192, 0); }
}

@media (max-width: 850px) {
  .current-zone { grid-template-columns: 1fr; padding-inline: 1.2rem; }
  .span-two { grid-column: auto; }
  .annotation { position: relative; left: auto; top: auto; margin: 0 0 -1rem 1rem; }
  .compass { width: 56px; height: 56px; }
  .cluster { min-height: auto; }
}