:root {
  --sand: #f2e8d9;
  --abyss: #3d2e24;
  --driftwood: #4a3728;
  --wetstone: #8c7a6b;
  --terracotta: #c4683e;
  --tidepool: #4a8f8c;
  --goldenhour: #e8a84c;
  --bioluminescent: #7fcec5;
  --eveningamber: #d4a06a;
  --sand-deep: #eddcc8;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--sand);
  color: var(--driftwood);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.72;
  overflow-x: hidden;
}

/* ===== COMPASS ROSE (fixed) ===== */
#compass-rose {
  position: fixed;
  bottom: 2vh;
  right: 2vw;
  width: 24px;
  height: 24px;
  opacity: 0.2;
  color: var(--goldenhour);
  z-index: 100;
  animation: compass-rotate 300s linear infinite;
}

@keyframes compass-rotate {
  to { transform: rotate(360deg); }
}

/* ===== TIDE SECTIONS (shared) ===== */
.tide-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* ===== SECTION 1: DAWN SHALLOWS ===== */
#dawn-shallows {
  background: var(--sand);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12vh;
}

.dawn-content {
  text-align: center;
  position: relative;
}

.sun-coral-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 4vh;
}

.sun-coral {
  width: 200px;
  height: 200px;
  color: var(--terracotta);
  animation: sun-coral-rotate 12s ease-in-out infinite;
}

@keyframes sun-coral-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.dawn-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--driftwood);
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

.dawn-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--wetstone);
}

.dawn-content.scrolled .dawn-title,
.dawn-content.scrolled .dawn-subtitle {
  transform: translateY(-20px);
  opacity: 0.8;
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* ===== SECTION 2: MORNING REEF ===== */
#morning-reef {
  background: linear-gradient(to bottom, var(--sand), var(--sand-deep));
}

.reef-grid {
  display: grid;
  grid-template-columns: 1fr 0.55fr;
  gap: 4vw;
  padding: 8vh 6vw;
  min-height: 100vh;
  align-content: start;
}

.reef-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--driftwood);
}

.reef-body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  max-width: 38em;
  color: var(--driftwood);
}

.reef-right {
  margin-top: 15vh;
  display: flex;
  flex-direction: column;
  gap: 4vh;
  align-items: center;
}

.nature-icon {
  color: var(--tidepool);
}

.nautilus-shell {
  width: 80px;
  height: 80px;
}

.leaf-vein {
  width: 60px;
  height: 90px;
}

.water-droplets {
  width: 60px;
  height: 60px;
}

/* Leaf vein draw animation */
.leaf-vein .leaf-vein-line {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 1.2s ease-out;
}

.leaf-vein .leaf-midrib {
  stroke-dasharray: 66;
  stroke-dashoffset: 66;
  transition: stroke-dashoffset 0.8s ease-out;
}

.leaf-vein .leaf-outline {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 1s ease-out;
}

#morning-reef.in-view .leaf-vein .leaf-outline {
  stroke-dashoffset: 0;
}

#morning-reef.in-view .leaf-vein .leaf-midrib {
  stroke-dashoffset: 0;
  transition-delay: 0.3s;
}

#morning-reef.in-view .leaf-vein .leaf-vein-line {
  stroke-dashoffset: 0;
}

#morning-reef.in-view .leaf-vein .v1 { transition-delay: 0.5s; }
#morning-reef.in-view .leaf-vein .v2 { transition-delay: 0.6s; }
#morning-reef.in-view .leaf-vein .v3 { transition-delay: 0.7s; }
#morning-reef.in-view .leaf-vein .v4 { transition-delay: 0.8s; }
#morning-reef.in-view .leaf-vein .v5 { transition-delay: 0.9s; }
#morning-reef.in-view .leaf-vein .v6 { transition-delay: 1.0s; }

/* ===== SECTION 3: MIDDAY DEEP ===== */
#midday-deep {
  background: var(--abyss);
  color: var(--sand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.midday-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #c4683e22, #4a8f8c22, #c4683e22);
  background-size: 400% 400%;
  animation: gradient-drift 30s ease infinite;
  z-index: 0;
}

@keyframes gradient-drift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.midday-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hud-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
  z-index: -1;
}

.hud-gauge {
  width: clamp(280px, 50vw, 440px);
  height: clamp(280px, 50vw, 440px);
}

.hud-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  fill: var(--terracotta);
  text-transform: uppercase;
}

.radar-sweep {
  transform-origin: 220px 220px;
  animation: radar-rotate 8s linear infinite;
}

@keyframes radar-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.midday-statement {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6rem);
  text-align: center;
  color: var(--sand);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 2;
}

/* ===== SECTION 4: AFTERNOON CURRENT ===== */
#afternoon-current {
  background: linear-gradient(to bottom, var(--abyss), var(--eveningamber));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.afternoon-content {
  max-width: 32em;
  margin-left: auto;
  margin-right: 12vw;
  padding: 10vh 0;
  position: relative;
  z-index: 1;
}

.afternoon-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  margin-bottom: 0;
}

.afternoon-text.light-text {
  color: var(--sand);
}

.afternoon-text.transition-text {
  color: var(--sand-deep);
}

.afternoon-text.dark-text {
  color: var(--driftwood);
}

.wave-divider {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 40px;
  margin-top: 3vh;
  margin-bottom: 3vh;
  color: var(--eveningamber);
  opacity: 0.5;
}

.wave-divider svg {
  width: 100%;
  height: 100%;
}

.wave-path {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: wave-flow 8s linear infinite;
}

@keyframes wave-flow {
  to { stroke-dashoffset: 0; }
}

/* Glitch overlay */
.glitch-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

.glitch-overlay.active {
  animation: glitch-master 600ms ease-out forwards;
}

@keyframes glitch-master {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.glitch-overlay.active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bioluminescent);
  mix-blend-mode: screen;
  opacity: 0.3;
  animation: glitch-shift 600ms steps(1) forwards;
}

@keyframes glitch-shift {
  0% { clip-path: inset(0); transform: translateX(0); }
  15% { clip-path: inset(15% 0 75% 0); transform: translateX(-4px); }
  30% { clip-path: inset(45% 0 35% 0); transform: translateX(6px); }
  45% { clip-path: inset(70% 0 10% 0); transform: translateX(-3px); }
  60% { clip-path: inset(85% 0 5% 0); transform: translateX(5px); }
  75% { clip-path: inset(25% 0 55% 0); transform: translateX(-6px); }
  100% { clip-path: inset(0); transform: translateX(0); }
}

/* ===== SECTION 5: TWILIGHT SURFACE ===== */
#twilight-surface {
  background: var(--eveningamber);
  min-height: 140vh;
  display: flex;
  flex-direction: column;
}

.twilight-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
  padding: 10vh 6vw;
}

.twilight-phrase {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--driftwood);
  text-align: center;
  max-width: 20em;
}

.twilight-silence {
  flex: 1;
  min-height: 40vh;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .reef-grid {
    grid-template-columns: 1fr;
    padding: 6vh 5vw;
  }

  .reef-right {
    margin-top: 4vh;
    flex-direction: row;
    justify-content: center;
    gap: 6vw;
  }

  .afternoon-content {
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .hud-gauge {
    width: 260px;
    height: 260px;
  }

  .hud-container {
    transform: translate(-50%, -50%) scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}