/* ============================================================
   T3RRAIN — 3D Scroll Animation Site
   Design System: Cormorant Garamond + Outfit | Phase-driven color themes
   Patterns: Glassmorphism, Depth Layering, Spring Motion, Premium Shadows
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --font-display: 'Cormorant Garamond', serif;
  --font-ui:      'Outfit', sans-serif;

  /* Phase 1 — Ice */
  --p1-bg:      #0a1628;
  --p1-sky:     #1a3a5c;
  --p1-accent:  #7ecfed;
  --p1-text:    #e8f4fb;
  --p1-glow:    rgba(126,207,237,0.35);

  /* Phase 2 — Forest */
  --p2-bg:      #071a0f;
  --p2-sky:     #0d3320;
  --p2-accent:  #56d982;
  --p2-text:    #d4f7df;
  --p2-glow:    rgba(86,217,130,0.35);

  /* Phase 3 — Desert */
  --p3-bg:      #1a0d00;
  --p3-sky:     #3d1e00;
  --p3-accent:  #f0a830;
  --p3-text:    #fbecd4;
  --p3-glow:    rgba(240,168,48,0.40);

  /* Phase 4 — Ocean */
  --p4-bg:      #060d14;
  --p4-sky:     #0c1f30;
  --p4-accent:  #2e9fce;
  --p4-text:    #cce8f7;
  --p4-glow:    rgba(46,159,206,0.35);

  --transition-dur: 0.9s;
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

  /* Glassmorphism tokens */
  --glass-bg:      rgba(255, 255, 255, 0.04);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-shadow:  0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-blur:    12px;

  /* Elevation shadows (colored per phase) */
  --shadow-p1: 0 20px 60px -15px rgba(126,207,237,0.25), 0 4px 20px rgba(0,0,0,0.5);
  --shadow-p2: 0 20px 60px -15px rgba(86,217,130,0.20), 0 4px 20px rgba(0,0,0,0.5);
  --shadow-p3: 0 20px 60px -15px rgba(240,168,48,0.25), 0 4px 20px rgba(0,0,0,0.5);
  --shadow-p4: 0 20px 60px -15px rgba(46,159,206,0.25), 0 4px 20px rgba(0,0,0,0.5);
}

html {
  font-size: 16px;
  scroll-behavior: auto;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  background: var(--p1-bg);
  color: var(--p1-text);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  cursor: none;
}

/* ---------- Custom Cursor ---------- */
body::after {
  content: '';
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  top: var(--cy, -40px);
  left: var(--cx, -40px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s, opacity 0.2s;
  mix-blend-mode: difference;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px 0;
  pointer-events: none;
}

.nav__logo {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  pointer-events: all;
  position: relative;
}

.nav__logo::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-smooth);
}
.nav__logo:hover::after { transform: scaleX(1); }

.nav__phases {
  display: flex;
  gap: 12px;
  align-items: center;
  pointer-events: all;
}

.nav__phase-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  transition: all 0.4s var(--ease-smooth);
  position: relative;
}
.nav__phase-dot.active {
  background: white;
  border-color: white;
  transform: scale(1.4);
}
.nav__phase-dot:hover:not(.active) {
  border-color: white;
  transform: scale(1.2);
}

.nav__progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.1);
  z-index: 200;
}
.nav__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
  transition: width 0.1s linear;
}

/* ---------- Phase Label ---------- */
.phase-label {
  position: fixed;
  left: 48px;
  bottom: 48px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.phase-label__number {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.35em;
  opacity: 0.4;
}

.phase-label__divider {
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

.phase-label__name {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ---------- Scroll Indicator ---------- */
.scroll-indicator {
  position: fixed;
  right: 48px;
  bottom: 48px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transition: opacity 0.5s;
}

.scroll-indicator span {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 8px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.35;
  writing-mode: vertical-rl;
}

.scroll-indicator__wheel {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 11px;
  position: relative;
}

.scroll-indicator__wheel::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 6px;
  background: rgba(255,255,255,0.7);
  border-radius: 2px;
  animation: scroll-wheel 2s ease-in-out infinite;
}

@keyframes scroll-wheel {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: 0; }
}

/* ---------- Journey Container ---------- */
.journey {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

/* ---------- Phase Sections ---------- */
.phase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8vw;
  overflow: hidden;
  opacity: 0;
  transform: translateZ(0);
  transition:
    opacity var(--transition-dur) var(--ease-smooth);
  pointer-events: none;
}

.phase.active {
  opacity: 1;
  pointer-events: all;
}

/* ---------- Phase Backgrounds ---------- */
.phase__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.phase__canvas {
  position: absolute;
  inset: 0;
}

.phase__gradient {
  position: absolute;
  inset: 0;
}

/* Phase 1 Background */
.phase--1 .phase__gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74,144,200,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(20,60,100,0.8) 0%, transparent 60%),
    linear-gradient(180deg, #0a1628 0%, #1a3a5c 35%, #0f2040 70%, #060d1a 100%);
}

/* Phase 2 Background */
.phase--2 .phase__gradient {
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(20,80,40,0.7) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(10,60,25,0.6) 0%, transparent 60%),
    linear-gradient(180deg, #071a0f 0%, #0d3320 30%, #051509 70%, #020b05 100%);
}

/* Phase 3 Background */
.phase--3 .phase__gradient {
  background:
    radial-gradient(ellipse 70% 50% at 70% 10%, rgba(200,120,30,0.7) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 90%, rgba(150,70,10,0.5) 0%, transparent 60%),
    linear-gradient(180deg, #1a0d00 0%, #3d1e00 25%, #2a1000 60%, #0d0600 100%);
}

/* Phase 4 Background */
.phase--4 .phase__gradient {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(30,80,130,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 60%, rgba(10,40,80,0.7) 0%, transparent 60%),
    linear-gradient(180deg, #060d14 0%, #0c1f30 30%, #070f1a 70%, #030810 100%);
}

/* ---------- Phase Content — Glassmorphism Panel ---------- */
.phase__content {
  position: relative;
  z-index: 10;
  max-width: 660px;
  transform: translateY(0);
  padding: 52px 56px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  box-shadow: var(--glass-shadow);

  /* Inner highlight line at top (double-bezel) */
  outline: 1px solid rgba(255,255,255,0.04);
  outline-offset: -6px;
}

.phase--1 .phase__content { box-shadow: var(--shadow-p1); }
.phase--2 .phase__content { box-shadow: var(--shadow-p2); }
.phase--3 .phase__content { box-shadow: var(--shadow-p3); }
.phase--4 .phase__content { box-shadow: var(--shadow-p4); }

.phase__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s 0.2s var(--ease-smooth), transform 0.7s 0.2s var(--ease-smooth);
}

.phase.active .phase__eyebrow {
  opacity: 1;
  transform: translateY(0);
}

.phase__number {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4em;
  opacity: 0.40;
}

.phase__tag {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  opacity: 0.6;
  background: rgba(255,255,255,0.04);
}

.phase__headline {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  overflow: hidden;
  font-style: italic;
}

.word {
  display: inline-block;
  margin-right: 0.18em;
  opacity: 0;
  transform: translateY(110%) rotateX(-35deg);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition:
    opacity 0.9s calc(var(--i) * 0.09s + 0.35s) var(--ease-out-expo),
    transform 0.9s calc(var(--i) * 0.09s + 0.35s) var(--ease-spring);
}

.phase.active .word {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

.word.accent {
  background: linear-gradient(135deg, currentColor, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.phase__body {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s 0.65s var(--ease-smooth), transform 0.7s 0.65s var(--ease-smooth);
  max-width: 480px;
  margin-bottom: 40px;
}

.phase.active .phase__body {
  opacity: 0.72;
  transform: translateY(0);
}

/* ---------- Phase Stats ---------- */
.phase__stat-row {
  display: flex;
  gap: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s 0.8s var(--ease-smooth), transform 0.7s 0.8s var(--ease-smooth);
}

.phase.active .phase__stat-row {
  opacity: 1;
  transform: translateY(0);
}

.phase__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.phase__stat {
  padding: 12px 16px;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.phase__stat-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  font-style: italic;
  display: block;
}

.phase__stat-label {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 8px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.40;
  margin-top: 3px;
  display: block;
}

/* ---------- CTA Row ---------- */
.phase__cta-row {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s 1s var(--ease-smooth), transform 0.7s 1s var(--ease-smooth);
}

.phase.active .phase__cta-row {
  opacity: 1;
  transform: translateY(0);
}

.cta {
  font-family: var(--font-ui, 'Outfit', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 16px 36px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.4s var(--ease-spring);
  position: relative;
  overflow: hidden;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06);
  opacity: 0;
  transition: opacity 0.3s;
}
.cta:hover::after { opacity: 1; }
.cta:active { transform: scale(0.97); }

.cta--primary {
  background: var(--p4-accent);
  color: #030810;
  border: 2px solid var(--p4-accent);
  box-shadow: 0 4px 24px rgba(46,159,206,0.35);
}
.cta--primary:hover {
  background: transparent;
  color: var(--p4-accent);
  box-shadow: 0 4px 32px rgba(46,159,206,0.5);
}

.cta--ghost {
  background: var(--glass-bg);
  color: var(--p4-text);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.cta--ghost:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
}

/* ---------- Phase Colors per section ---------- */
.phase--1 { color: var(--p1-text); }
.phase--2 { color: var(--p2-text); }
.phase--3 { color: var(--p3-text); }
.phase--4 { color: var(--p4-text); }

.phase--1 .word.accent {
  background: linear-gradient(135deg, var(--p1-accent), #c0eeff, var(--p1-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.phase--2 .word.accent {
  background: linear-gradient(135deg, var(--p2-accent), #b8ffcc, var(--p2-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.phase--3 .word.accent {
  background: linear-gradient(135deg, var(--p3-accent), #ffe0a0, var(--p3-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.phase--4 .word.accent {
  background: linear-gradient(135deg, var(--p4-accent), #a8e0ff, var(--p4-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Phase 1: Mountains ---------- */
.phase__mountains {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 800px;
}

.mountain {
  position: absolute;
  bottom: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.mountain--back {
  width: 120%;
  height: 75%;
  left: -10%;
  background: linear-gradient(180deg, #2a5080 0%, #1a3050 40%, #102040 100%);
  transform: translateZ(-60px) scale(1.1);
  opacity: 0.6;
}

.mountain--mid {
  width: 90%;
  height: 65%;
  left: 5%;
  background: linear-gradient(160deg, #c8e0f0 0%, #8ab8d8 25%, #3a6090 60%, #1a3550 100%);
  clip-path: polygon(
    50% 0%, 58% 20%, 62% 18%, 55% 35%, 65% 32%, 50% 55%,
    70% 50%, 60% 70%, 80% 65%, 100% 100%, 0% 100%, 20% 65%, 40% 70%, 30% 50%, 45% 55%
  );
  transform: translateZ(-20px);
}

.mountain--front {
  width: 70%;
  height: 50%;
  left: 15%;
  background: linear-gradient(160deg, #ddeef8 0%, #9ac4dd 30%, #4a7fa0 65%, #1e4060 100%);
  clip-path: polygon(
    50% 0%, 55% 22%, 60% 20%, 52% 38%,
    62% 35%, 50% 55%, 55% 55%, 40% 72%, 60% 68%, 45% 85%,
    70% 80%, 100% 100%, 0% 100%, 30% 80%, 55% 85%
  );
  transform: translateZ(20px);
}

.glacier {
  position: absolute;
  bottom: 30%;
  left: 25%;
  width: 50%;
  height: 20%;
  background: linear-gradient(180deg, rgba(220,240,255,0.7) 0%, rgba(180,220,250,0.4) 100%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  filter: blur(1px);
  transform: translateZ(30px);
}

.snow-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: radial-gradient(ellipse 70% 30% at 50% 0%, rgba(210,235,255,0.4) 0%, transparent 60%);
  pointer-events: none;
  animation: snow-shimmer 8s ease-in-out infinite;
}

@keyframes snow-shimmer {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

.crystal {
  position: absolute;
  opacity: 0.25;
  animation: float-crystal linear infinite;
}

.crystal--1 {
  width: 3px; height: 60px;
  background: linear-gradient(180deg, transparent, rgba(200,230,255,0.8), transparent);
  top: 15%; right: 20%;
  animation-duration: 12s;
}
.crystal--2 {
  width: 2px; height: 40px;
  background: linear-gradient(180deg, transparent, rgba(180,220,255,0.7), transparent);
  top: 30%; right: 35%;
  animation-duration: 18s;
  animation-delay: -5s;
}
.crystal--3 {
  width: 4px; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(220,240,255,0.6), transparent);
  top: 10%; right: 12%;
  animation-duration: 22s;
  animation-delay: -8s;
}

@keyframes float-crystal {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.25; }
  50% { opacity: 0.5; }
  100% { transform: translateY(-60px) rotate(15deg); opacity: 0; }
}

/* ---------- Phase 2: Forest ---------- */
.phase__forest {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tree-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.tree-layer--far {
  height: 50%;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0px, transparent 18px,
      rgba(20,80,40,0.7) 18px, rgba(20,80,40,0.7) 28px,
      transparent 28px, transparent 40px
    );
  mask-image: repeating-linear-gradient(
    to right,
    transparent 0, transparent 10px,
    black 10px, black 26px,
    transparent 26px, transparent 42px
  );
  clip-path: polygon(
    0% 100%, 0% 70%, 2% 50%, 4% 65%, 6% 40%, 8% 55%, 10% 35%,
    12% 50%, 14% 30%, 16% 48%, 18% 25%, 20% 42%, 22% 28%, 24% 45%,
    26% 20%, 28% 38%, 30% 22%, 32% 40%, 34% 18%, 36% 35%, 38% 15%,
    40% 32%, 42% 18%, 44% 38%, 46% 12%, 48% 30%, 50% 16%,
    52% 28%, 54% 14%, 56% 30%, 58% 18%, 60% 35%, 62% 20%,
    64% 38%, 66% 22%, 68% 40%, 70% 25%, 72% 45%, 74% 28%,
    76% 50%, 78% 30%, 80% 48%, 82% 35%, 84% 52%, 86% 38%,
    88% 55%, 90% 40%, 92% 60%, 94% 45%, 96% 62%, 98% 50%, 100% 68%, 100% 100%
  );
  background-color: #1a4a28;
  opacity: 0.7;
}

.tree-layer--mid {
  height: 60%;
  background-color: #1b5c30;
  clip-path: polygon(
    0% 100%, 0% 75%, 3% 55%, 6% 70%, 9% 45%, 12% 60%, 15% 38%,
    18% 52%, 21% 30%, 24% 48%, 27% 25%, 30% 42%, 33% 22%,
    36% 40%, 39% 18%, 42% 35%, 45% 20%, 48% 38%, 51% 15%,
    54% 32%, 57% 18%, 60% 35%, 63% 22%, 66% 40%, 69% 25%,
    72% 45%, 75% 28%, 78% 48%, 81% 32%, 84% 52%, 87% 38%,
    90% 58%, 93% 42%, 96% 62%, 100% 72%, 100% 100%
  );
  opacity: 0.85;
  transform: translateZ(10px);
}

.tree-layer--near {
  height: 45%;
  background: linear-gradient(180deg, #2a7a3c 0%, #1b5c2a 60%, #0f3a18 100%);
  clip-path: polygon(
    0% 100%, 0% 80%, 4% 58%, 8% 75%, 12% 50%, 16% 65%, 20% 42%,
    24% 58%, 28% 35%, 32% 52%, 36% 28%, 40% 46%, 44% 24%,
    48% 42%, 52% 20%, 56% 38%, 60% 22%, 64% 40%, 68% 28%,
    72% 48%, 76% 32%, 80% 52%, 84% 36%, 88% 58%, 92% 44%,
    96% 62%, 100% 78%, 100% 100%
  );
  transform: translateZ(30px);
}

.canopy-fog {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 40% at 50% 50%, rgba(20,80,35,0.3) 0%, transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(5,20,10,0.6) 100%);
  pointer-events: none;
}

.light-rays {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0%,
      rgba(100,220,120,0.03) 1%,
      transparent 2%,
      transparent 8%
    );
  animation: rays-move 20s linear infinite;
  pointer-events: none;
}

@keyframes rays-move {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(10%); }
}

.leaf {
  position: absolute;
  width: 16px; height: 20px;
  background: radial-gradient(ellipse at 30% 30%, #56d982, #1a6632);
  border-radius: 50% 0 50% 0;
  opacity: 0;
  animation: leaf-fall 8s ease-in infinite;
}

.leaf--1 { top: -20px; left: 70%; animation-duration: 9s; }
.leaf--2 { top: -20px; left: 55%; animation-duration: 7s; animation-delay: -2s; }
.leaf--3 { top: -20px; left: 80%; animation-duration: 11s; animation-delay: -4s; }
.leaf--4 { top: -20px; left: 65%; animation-duration: 8s; animation-delay: -6s; }

@keyframes leaf-fall {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity: 0; }
}

/* ---------- Phase 3: Desert ---------- */
.phase__dunes {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.dune {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0;
}

.dune--1 {
  width: 140%;
  height: 55%;
  left: -20%;
  background: linear-gradient(160deg, #c9a227 0%, #a07820 40%, #7a5615 70%, #3d2808 100%);
  transform: translateZ(-20px);
  opacity: 0.8;
}

.dune--2 {
  width: 110%;
  height: 45%;
  left: -5%;
  background: linear-gradient(150deg, #e8b830 0%, #c9922a 35%, #8a6018 65%, #4a3210 100%);
  transform: translateZ(10px);
  clip-path: ellipse(55% 100% at 40% 100%);
}

.dune--3 {
  width: 80%;
  height: 35%;
  right: -10%;
  background: linear-gradient(140deg, #f0c840 0%, #d4a030 40%, #a07420 75%, #5a3f10 100%);
  transform: translateZ(30px);
  border-radius: 60% 40% 0 0;
}

.sand-wind {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      170deg,
      transparent 0,
      transparent 40px,
      rgba(200,160,60,0.06) 40px,
      rgba(200,160,60,0.06) 41px
    );
  animation: wind-drift 15s linear infinite;
  pointer-events: none;
}

@keyframes wind-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(60px); }
}

.sun-glow {
  position: absolute;
  top: 5%;
  right: 15%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,200,60,0.9) 0%, rgba(255,150,30,0.4) 30%, transparent 70%);
  border-radius: 50%;
  animation: sun-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%       { transform: scale(1.1); opacity: 1; }
}

.sand-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(200,160,60,0.6);
  animation: sand-drift linear infinite;
  pointer-events: none;
}

.sand-particle--1 { width: 2px; height: 2px; top: 40%; left: 60%; animation-duration: 8s; }
.sand-particle--2 { width: 3px; height: 3px; top: 55%; left: 75%; animation-duration: 12s; animation-delay: -3s; }
.sand-particle--3 { width: 1px; height: 1px; top: 35%; left: 85%; animation-duration: 6s; animation-delay: -2s; }

@keyframes sand-drift {
  0%   { transform: translateX(0) translateY(0); opacity: 0.6; }
  100% { transform: translateX(-120px) translateY(20px); opacity: 0; }
}

/* ---------- Phase 4: Ocean Cliffs ---------- */
.phase__cliffs {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cliff {
  position: absolute;
  bottom: 25%;
  background: linear-gradient(160deg, #2a3540 0%, #1a2530 50%, #0d161e 100%);
}

.cliff--left {
  left: 0;
  width: 28%;
  height: 80%;
  clip-path: polygon(0 100%, 0 10%, 100% 35%, 90% 100%);
}

.cliff--right {
  right: 0;
  width: 22%;
  height: 70%;
  clip-path: polygon(0 40%, 100% 15%, 100% 100%, 10% 100%);
}

.ocean {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg, #0c3050 0%, #071828 50%, #030e18 100%);
}

.ocean-foam {
  position: absolute;
  bottom: 28%;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, rgba(200,230,255,0.6) 0%, transparent 100%);
  filter: blur(2px);
  animation: foam-move 4s ease-in-out infinite;
}

@keyframes foam-move {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50%       { transform: scaleY(2); opacity: 1; }
}

.wave {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(46,159,206,0.3) 0%, transparent 100%);
  border-radius: 50%;
  animation: wave-roll ease-in-out infinite;
  transform-origin: center;
}

.wave--1 { bottom: 28%; animation-duration: 6s; }
.wave--2 { bottom: 26%; animation-duration: 8s; animation-delay: -2s; opacity: 0.6; }
.wave--3 { bottom: 24%; animation-duration: 10s; animation-delay: -4s; opacity: 0.4; }

@keyframes wave-roll {
  0%, 100% { transform: scaleX(1) scaleY(1) translateX(0); }
  50%       { transform: scaleX(1.05) scaleY(1.4) translateX(-2%); }
}

.mist {
  position: absolute;
  bottom: 25%;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(150,190,220,0.15) 40%,
    rgba(100,150,190,0.25) 70%,
    transparent 100%
  );
  animation: mist-drift 12s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mist-drift {
  0%, 100% { transform: translateX(-3%); opacity: 0.6; }
  50%       { transform: translateX(3%); opacity: 1; }
}

.spray {
  position: absolute;
  border-radius: 50%;
  background: rgba(150,200,230,0.4);
  animation: spray-burst ease-out infinite;
  pointer-events: none;
}

.spray--1 { width: 6px; height: 6px; bottom: 28%; left: 30%; animation-duration: 3s; }
.spray--2 { width: 4px; height: 4px; bottom: 28%; left: 50%; animation-duration: 4s; animation-delay: -1s; }
.spray--3 { width: 5px; height: 5px; bottom: 28%; left: 70%; animation-duration: 3.5s; animation-delay: -2s; }

@keyframes spray-burst {
  0%   { transform: translateY(0) scale(1); opacity: 0.7; }
  100% { transform: translateY(-60px) scale(3); opacity: 0; }
}

/* ---------- Particles Layer ---------- */
.phase__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

/* ---------- Transition Overlay ---------- */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0;
}

.transition-overlay.active {
  pointer-events: all;
}

/* ---------- Wipe ---------- */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(0);
}

.wipe.animate-in {
  animation: wipe-in 0.45s var(--ease-smooth) forwards;
}
.wipe.animate-out {
  animation: wipe-out 0.45s var(--ease-smooth) 0.45s forwards;
}

@keyframes wipe-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes wipe-out {
  from { transform-origin: right; transform: scaleX(1); }
  to   { transform-origin: right; transform: scaleX(0); }
}

/* ---------- Phase Color Transitions (body class) ---------- */
body[data-phase="0"] { background: var(--p1-bg); }
body[data-phase="1"] { background: var(--p2-bg); }
body[data-phase="2"] { background: var(--p3-bg); }
body[data-phase="3"] { background: var(--p4-bg); }

/* Wipe colors per transition */
body[data-phase="0"] .wipe { background: var(--p1-bg); }
body[data-phase="1"] .wipe { background: var(--p2-bg); }
body[data-phase="2"] .wipe { background: var(--p3-bg); }
body[data-phase="3"] .wipe { background: var(--p4-bg); }

/* ---------- Ambient Canvas Stars/Particles ---------- */
.phase__canvas canvas {
  width: 100%;
  height: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .nav {
    padding: 20px 24px 0;
  }

  .phase {
    padding: 0 6vw;
    align-items: flex-end;
    padding-bottom: 15vh;
  }

  .phase__headline {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .phase__stat-row {
    gap: 24px;
  }

  .phase-label {
    left: 24px;
    bottom: 36px;
  }

  .scroll-indicator {
    right: 24px;
    bottom: 36px;
  }

  .phase__cta-row {
    flex-direction: column;
  }
}

/* ---------- Smooth Transitions for color theme ---------- */
body {
  transition: background 0.9s var(--ease-smooth);
}

/* ---------- Loading State ---------- */
body.loading .phase__content {
  pointer-events: none;
}

/* ---------- Star field for phase 1 (ice) ---------- */
.stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.3); }
}

/* ---------- Aurora Effect (Phase 1) ---------- */
.aurora {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  pointer-events: none;
  overflow: hidden;
}

.aurora__band {
  position: absolute;
  left: -20%;
  right: -20%;
  height: 200px;
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(40px);
  animation: aurora-flow ease-in-out infinite;
}

.aurora__band--1 {
  top: 5%;
  background: linear-gradient(90deg, #4ade80, #22d3ee, #818cf8);
  animation-duration: 20s;
}
.aurora__band--2 {
  top: 15%;
  background: linear-gradient(90deg, #818cf8, #f472b6, #22d3ee);
  animation-duration: 28s;
  animation-delay: -8s;
}
.aurora__band--3 {
  top: 25%;
  background: linear-gradient(90deg, #22d3ee, #4ade80, #818cf8);
  animation-duration: 35s;
  animation-delay: -15s;
}

@keyframes aurora-flow {
  0%, 100% { transform: translateX(-15%) scaleY(1); }
  33%       { transform: translateX(5%) scaleY(1.4); }
  66%       { transform: translateX(-5%) scaleY(0.8); }
}

/* ---------- Depth Lines (Phase 3) ---------- */
.depth-lines {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.depth-line {
  position: absolute;
  bottom: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,160,60,0.3), transparent);
  animation: depth-breathe ease-in-out infinite;
}

@keyframes depth-breathe {
  0%, 100% { opacity: 0.3; transform: scaleX(1); }
  50%       { opacity: 0.7; transform: scaleX(1.02); }
}

/* ---------- Ambient Bottom Glow (per phase) ---------- */
.phase::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 1px;
  pointer-events: none;
  z-index: 20;
}
.phase--1::after { background: linear-gradient(90deg, transparent, var(--p1-accent), transparent); opacity: 0.4; }
.phase--2::after { background: linear-gradient(90deg, transparent, var(--p2-accent), transparent); opacity: 0.3; }
.phase--3::after { background: linear-gradient(90deg, transparent, var(--p3-accent), transparent); opacity: 0.4; }
.phase--4::after { background: linear-gradient(90deg, transparent, var(--p4-accent), transparent); opacity: 0.4; }

/* Phase content ambient glow */
.phase--1.active .phase__content { border-color: rgba(126,207,237,0.15); }
.phase--2.active .phase__content { border-color: rgba(86,217,130,0.12); }
.phase--3.active .phase__content { border-color: rgba(240,168,48,0.15); }
.phase--4.active .phase__content { border-color: rgba(46,159,206,0.15); }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .word {
    transition: opacity 0.3s !important;
    transform: none !important;
  }
  .phase.active .word { transform: none !important; }

  .aurora__band,
  .snow-layer,
  .leaf,
  .sand-wind,
  .light-rays,
  .mist,
  .wave,
  .crystal,
  .spray,
  .sun-glow,
  .scroll-indicator__wheel::after {
    animation: none !important;
  }

  .wipe.animate-in,
  .wipe.animate-out {
    animation: none !important;
  }
}

/* ---------- Phase 3D content panel positioning ---------- */
.phase--1 .phase__content,
.phase--2 .phase__content,
.phase--3 .phase__content,
.phase--4 .phase__content {
  margin-top: auto;
  margin-bottom: auto;
}

/* ---------- Phase 3 right-align for dune composition ---------- */
.phase--3 {
  justify-content: flex-end;
}
.phase--3 .phase__content {
  margin-right: 4vw;
}

/* ---------- Horizon line for all phases ---------- */
.phase__bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: 42%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 80%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}