/* ============================================
   ULVERO — Digital Kingdom of Seasons
   ============================================ */

:root {
  /* Spring Realm */
  --spring-pink: #F6B6C8;
  --spring-leaf: #8FD694;
  --spring-bg: linear-gradient(180deg, #e8f8ea 0%, #fce8ee 50%, #d4f0d6 100%);

  /* Summer Realm */
  --summer-gold: #F6C453;
  --summer-sky: #72C6FF;
  --summer-bg: linear-gradient(180deg, #fff8e1 0%, #e3f4ff 60%, #ffe082 100%);

  /* Autumn Realm */
  --autumn-orange: #D96A32;
  --autumn-brown: #8B5A2B;
  --autumn-bg: linear-gradient(180deg, #3d2010 0%, #6b3a1a 40%, #2a1508 100%);

  /* Winter Realm */
  --winter-frost: #F7FAFD;
  --winter-ice: #A9D6F5;
  --winter-bg: linear-gradient(180deg, #e8f4fc 0%, #d0e8f8 50%, #f0f6fa 100%);

  /* Typography */
  --font-heading: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', 'Nunito Sans', system-ui, sans-serif;

  /* Layout */
  --compass-size: 56px;
  --content-max: 1100px;
  --section-pad: clamp(4rem, 12vh, 8rem) clamp(1.25rem, 5vw, 3rem);

  /* Motion */
  --ease-organic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: #2a2520;
  background: #1a1510;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.season-spring { background: #e8f5e9; }
body.season-summer { background: #fff8e1; }
body.season-autumn { background: #3d2010; color: #f5e6d3; }
body.season-winter { background: #e8f4fc; color: #1a3040; }

h1, h2, h3, .realm-title, .gate-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--spring-leaf);
  color: #1a2520;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* ============================================
   SEASONAL COMPASS HEADER
   ============================================ */

.compass-header {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}

.compass-header > * {
  pointer-events: auto;
}

.seasonal-compass {
  position: relative;
}

.compass-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  width: var(--compass-size);
  height: var(--compass-size);
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.3s;
}

.compass-toggle:hover,
.compass-toggle:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.18);
  outline: 2px solid var(--spring-leaf);
  outline-offset: 3px;
}

.compass-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.compass-rose {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.compass-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(
    var(--spring-pink) 0deg 90deg,
    var(--summer-gold) 90deg 180deg,
    var(--autumn-orange) 180deg 270deg,
    var(--winter-ice) 270deg 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
  mask: radial-gradient(circle, transparent 55%, black 56%);
}

.compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 40%;
  background: linear-gradient(to top, #2a2520, #6b5a4a);
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(var(--needle-angle, 0deg));
  border-radius: 2px;
  transition: transform 0.8s var(--ease-organic);
  z-index: 1;
}

.compass-wheel {
  position: absolute;
  top: calc(var(--compass-size) + 0.75rem);
  right: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 0.5rem;
  gap: 0.25rem;
  transform-origin: top right;
  animation: wheelExpand 0.5s var(--ease-bounce) forwards;
}

.compass-wheel[hidden] {
  display: none;
}

@keyframes wheelExpand {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-20deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.wheel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2a2520;
  border-radius: 50%;
  transition: background 0.3s, transform 0.3s var(--ease-bounce);
  text-align: center;
  padding: 0.5rem;
}

.wheel-item:hover,
.wheel-item:focus-visible {
  transform: scale(1.1);
  outline: none;
}

.wheel-spring:hover, .wheel-spring:focus-visible { background: rgba(246, 182, 200, 0.4); }
.wheel-summer:hover, .wheel-summer:focus-visible { background: rgba(246, 196, 83, 0.4); }
.wheel-autumn:hover, .wheel-autumn:focus-visible { background: rgba(217, 106, 50, 0.3); color: #fff; }
.wheel-winter:hover, .wheel-winter:focus-visible { background: rgba(169, 214, 245, 0.5); }

.wheel-icon {
  font-size: 1.25rem;
}

.season-indicator {
  padding: 0.35rem 0.85rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  font-size: 0.75rem;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s, transform 0.4s;
}

.season-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   REALM SECTIONS — SHARED
   ============================================ */

.realm {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--section-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.realm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.realm-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.realm-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin-bottom: 0.75rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-organic), transform 0.8s var(--ease-organic);
}

.realm.in-view .realm-title {
  opacity: 1;
  transform: translateY(0);
}

.realm-verse {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  font-family: 'Cormorant Garamond', var(--font-heading);
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s 0.15s var(--ease-organic), transform 0.8s 0.15s var(--ease-organic);
}

.realm.in-view .realm-verse {
  opacity: 0.85;
  transform: translateY(0);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-organic), transform 0.7s var(--ease-organic);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   SECTION 1 — TREE OF YEARS
   ============================================ */

.realm-tree {
  background: linear-gradient(180deg,
    #1a1208 0%,
    #2d1f10 20%,
    #3d2a15 40%,
    #4a3520 60%,
    #5c4530 80%,
    #6b5240 100%
  );
  color: #f5e6d3;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 3rem;
}

.tree-visual {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 500px);
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 0;
  opacity: var(--tree-opacity, 1);
  transition: opacity 0.6s;
}

.tree-trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 8vw, 70px);
  height: 45%;
  background: linear-gradient(90deg, #3d2817, #5c3d28, #3d2817);
  border-radius: 8px 8px 0 0;
}

.tree-branches {
  position: absolute;
  bottom: 42%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 55%;
}

.branch {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  width: 4px;
  background: #4a3520;
  border-radius: 2px;
  opacity: var(--branch-opacity, 0.3);
  transition: opacity 0.8s;
}

.branch-spring {
  height: 35%;
  transform: translateX(-50%) rotate(-35deg);
  background: linear-gradient(to top, #4a3520, var(--spring-leaf));
}

.branch-summer {
  height: 45%;
  transform: translateX(-50%) rotate(25deg);
  background: linear-gradient(to top, #4a3520, var(--summer-gold));
}

.branch-autumn {
  height: 40%;
  transform: translateX(-50%) rotate(-15deg);
  background: linear-gradient(to top, #4a3520, var(--autumn-orange));
}

.branch-winter {
  height: 50%;
  transform: translateX(-50%) rotate(10deg);
  background: linear-gradient(to top, #4a3520, var(--winter-ice));
}

.tree-canopy {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 50%;
}

.canopy-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1s var(--ease-organic);
  filter: blur(2px);
}

.canopy-spring {
  background: radial-gradient(ellipse, rgba(143, 214, 148, 0.7) 0%, rgba(246, 182, 200, 0.4) 60%, transparent 80%);
}

.canopy-summer {
  background: radial-gradient(ellipse, rgba(246, 196, 83, 0.6) 0%, rgba(114, 198, 255, 0.3) 60%, transparent 80%);
}

.canopy-autumn {
  background: radial-gradient(ellipse, rgba(217, 106, 50, 0.6) 0%, rgba(139, 90, 43, 0.4) 60%, transparent 80%);
}

.canopy-winter {
  background: radial-gradient(ellipse, rgba(169, 214, 245, 0.5) 0%, rgba(247, 250, 253, 0.3) 60%, transparent 80%);
}

body[data-tree-season="spring"] .canopy-spring,
body[data-tree-season="summer"] .canopy-summer,
body[data-tree-season="autumn"] .canopy-autumn,
body[data-tree-season="winter"] .canopy-winter { opacity: 1; }

body[data-tree-season="spring"] .branch-spring { --branch-opacity: 1; }
body[data-tree-season="summer"] .branch-summer { --branch-opacity: 1; }
body[data-tree-season="autumn"] .branch-autumn { --branch-opacity: 1; }
body[data-tree-season="winter"] .branch-winter { --branch-opacity: 1; }

.tree-whisper {
  text-align: center;
  font-family: 'Cormorant Garamond', var(--font-heading);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  opacity: 0.6;
  margin-top: 2rem;
  position: relative;
  z-index: 2;
}

.scroll-prompt {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 230, 211, 0.5);
  z-index: 3;
  animation: scrollPulse 2.5s ease-in-out infinite;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(245, 230, 211, 0.5));
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(8px); }
}

/* ============================================
   SECTION 2 — SPRING KINGDOM
   ============================================ */

.realm-spring {
  background: var(--spring-bg);
  color: #1a3a20;
}

.spring-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.spring-bloom,
.spring-stream,
.spring-vine {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(246, 182, 200, 0.3);
  overflow: hidden;
}

.spring-bloom h3,
.spring-stream h3,
.spring-vine h3 {
  font-size: 1.35rem;
  color: #2d5a35;
  margin-bottom: 0.5rem;
}

.bloom-petal {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, var(--spring-pink) 30%, transparent 70%);
  border-radius: 50%;
  opacity: 0.5;
  animation: petalFloat 4s ease-in-out infinite;
}

.stream-flow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--spring-leaf), var(--summer-sky), transparent);
  animation: streamFlow 3s linear infinite;
}

.vine-growth {
  position: absolute;
  top: 0;
  left: 1rem;
  width: 3px;
  height: 0;
  background: var(--spring-leaf);
  border-radius: 2px;
  animation: vineGrow 6s ease-in-out infinite alternate;
}

@keyframes petalFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-10px, 10px) rotate(15deg); }
}

@keyframes streamFlow {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes vineGrow {
  0% { height: 20%; }
  100% { height: 80%; }
}

/* ============================================
   SECTION 3 — SUMMER EMPIRE
   ============================================ */

.realm-summer {
  background: var(--summer-bg);
  color: #3d3010;
}

.summer-structures {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.sun-tower,
.windmill,
.lantern-field {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 1px solid rgba(246, 196, 83, 0.4);
}

.sun-tower h3,
.windmill h3,
.lantern-field h3 {
  font-size: 1.35rem;
  color: #5a4510;
  margin-bottom: 0.5rem;
}

.tower-rotate {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  animation: slowRotate 12s linear infinite;
}

.tower-blades {
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, var(--summer-gold), transparent 25%, var(--summer-gold) 50%, transparent 75%, var(--summer-gold));
  border-radius: 50%;
  opacity: 0.6;
}

.mill-sails {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border: 3px solid var(--summer-gold);
  border-radius: 50%;
  animation: slowRotate 8s linear infinite reverse;
}

.mill-sails::before,
.mill-sails::after {
  content: '';
  position: absolute;
  background: var(--summer-gold);
  opacity: 0.5;
}

.mill-sails::before {
  top: 50%;
  left: -8px;
  right: -8px;
  height: 3px;
  transform: translateY(-50%);
}

.mill-sails::after {
  left: 50%;
  top: -8px;
  bottom: -8px;
  width: 3px;
  transform: translateX(-50%);
}

.floating-lantern {
  position: absolute;
  top: 1rem;
  right: 2rem;
  width: 20px;
  height: 28px;
  background: radial-gradient(ellipse, #ff9800, #f57c00);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 20px rgba(255, 152, 0, 0.6);
  animation: lanternBob 3s ease-in-out infinite;
}

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

@keyframes lanternBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ============================================
   SECTION 4 — FESTIVAL OF LIGHT
   ============================================ */

.realm-festival {
  background: linear-gradient(180deg, #0a0a20 0%, #1a1040 40%, #0d0820 100%);
  color: #f0e8ff;
}

.lantern-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.lantern-card {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 200, 100, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.4s, box-shadow 0.4s;
}

.lantern-card:hover {
  border-color: rgba(255, 200, 100, 0.4);
  box-shadow: 0 0 30px rgba(255, 180, 50, 0.15);
}

.lantern-card h3 {
  font-size: 1.25rem;
  color: var(--summer-gold);
  margin-bottom: 0.5rem;
}

.lantern-glow {
  position: absolute;
  top: -20px;
  right: 1rem;
  width: 30px;
  height: 40px;
  background: radial-gradient(ellipse, #ffb74d, #ff9800 60%, transparent);
  border-radius: 50% 50% 45% 45%;
  opacity: 0.7;
  animation: lanternAscend 5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.lantern-card:nth-child(1) .lantern-glow { --delay: 0s; }
.lantern-card:nth-child(2) .lantern-glow { --delay: 1.2s; }
.lantern-card:nth-child(3) .lantern-glow { --delay: 2.4s; }
.lantern-card:nth-child(4) .lantern-glow { --delay: 3.6s; }

@keyframes lanternAscend {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-30px); opacity: 1; }
}

/* ============================================
   SECTION 5 — AUTUMN FORESTS
   ============================================ */

.realm-autumn {
  background: var(--autumn-bg);
  color: #f5e6d3;
}

.forest-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.forest-path {
  position: relative;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(217, 106, 50, 0.2);
  border-radius: 12px;
  overflow: hidden;
}

.forest-path h3 {
  font-size: 1.35rem;
  color: var(--autumn-orange);
  margin-bottom: 0.5rem;
}

.path-leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background-image:
    radial-gradient(4px 4px at 20% 30%, var(--autumn-orange), transparent),
    radial-gradient(3px 3px at 60% 70%, #c44d20, transparent),
    radial-gradient(4px 4px at 80% 20%, var(--autumn-brown), transparent);
  animation: leafDrift 8s linear infinite;
}

@keyframes leafDrift {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 30px 60px, -20px 40px, 15px 80px; }
}

/* ============================================
   SECTION 6 — HARVEST CITADEL
   ============================================ */

.realm-harvest {
  background: linear-gradient(180deg, #2a1808 0%, #4a2a10 50%, #1a0e04 100%);
  color: #f0dcc0;
}

.citadel-architecture {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.citadel-tower {
  position: relative;
  padding: 2rem;
  background: rgba(139, 90, 43, 0.15);
  border: 1px solid rgba(139, 90, 43, 0.3);
  border-radius: 8px;
}

.citadel-tower h3 {
  font-size: 1.35rem;
  color: var(--autumn-orange);
  margin-bottom: 0.5rem;
}

.silo-structure {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 30px;
  height: 50px;
  background: linear-gradient(90deg, #6b4423, #8b5a2b, #6b4423);
  border-radius: 4px 4px 0 0;
  border-top: 8px solid var(--autumn-orange);
}

.wind-tower {
  position: absolute;
  top: 0.5rem;
  right: 1.5rem;
  width: 20px;
  height: 60px;
  background: linear-gradient(90deg, #5a5a5a, #8a8a8a, #5a5a5a);
  border-radius: 2px;
}

.wind-tower::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 8px;
  background: #7a7a7a;
  border-radius: 2px;
}

.wood-hall {
  position: absolute;
  top: 1.5rem;
  right: 1rem;
  width: 50px;
  height: 30px;
  background: linear-gradient(180deg, #5c3d28, #3d2817);
  border-radius: 4px 4px 0 0;
}

.wood-hall::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 12px solid #4a3020;
}

/* ============================================
   SECTION 7 — WINTER SANCTUARY
   ============================================ */

.realm-winter {
  background: var(--winter-bg);
  color: #1a3040;
}

.ice-formations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.ice-formation {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(169, 214, 245, 0.5);
  border-radius: 8px;
  overflow: hidden;
}

.ice-formation h3 {
  font-size: 1.35rem;
  color: #2a5070;
  margin-bottom: 0.5rem;
}

.ice-crystal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  width: 40px;
  height: 50px;
  background: linear-gradient(135deg, rgba(169, 214, 245, 0.8), rgba(247, 250, 253, 0.4));
  clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
  opacity: 0.7;
}

/* ============================================
   SECTION 8 — AURORA PLAINS
   ============================================ */

.realm-aurora {
  background: linear-gradient(180deg, #0a1020 0%, #102030 50%, #0a1525 100%);
  color: #e0f0ff;
}

.aurora-discoveries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.aurora-path {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(100, 200, 150, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.aurora-path h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.aurora-beam {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(80, 220, 120, 0.15) 30%,
    rgba(80, 220, 120, 0.08) 70%,
    transparent 100%
  );
  animation: auroraShift 6s ease-in-out infinite;
}

.aurora-violet {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180, 100, 255, 0.15) 30%,
    rgba(180, 100, 255, 0.08) 70%,
    transparent 100%
  );
  animation-delay: 2s;
}

.aurora-gold {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 200, 80, 0.15) 30%,
    rgba(255, 200, 80, 0.08) 70%,
    transparent 100%
  );
  animation-delay: 4s;
}

@keyframes auroraShift {
  0%, 100% { transform: translateX(-10%) skewX(-5deg); opacity: 0.6; }
  50% { transform: translateX(10%) skewX(5deg); opacity: 1; }
}

/* ============================================
   SECTION 9 — CYCLE CHAMBER
   ============================================ */

.realm-cycle {
  background: radial-gradient(ellipse at center, #1a1520 0%, #0a0810 70%);
  color: #e8e0f0;
  text-align: center;
}

.cycle-diagram {
  position: relative;
  width: min(80vw, 400px);
  height: min(80vw, 400px);
  margin: 2rem auto;
}

.cycle-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #c8b8e0 50%, #6a5a80 100%);
  box-shadow: 0 0 40px rgba(200, 180, 240, 0.5);
  z-index: 2;
}

.cycle-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: orbitSpin 20s linear infinite;
}

.cycle-orbit span {
  animation: orbitCounterSpin 20s linear infinite;
}

.orbit-spring {
  background: var(--spring-pink);
  color: #2a4030;
  transform-origin: 200px 40px;
  margin-left: -40px;
  margin-top: -40px;
  animation-duration: 24s;
}

.orbit-summer {
  background: var(--summer-gold);
  color: #3d3010;
  transform-origin: -120px 40px;
  margin-left: -40px;
  margin-top: -40px;
  animation-duration: 20s;
  animation-direction: reverse;
}

.orbit-autumn {
  background: var(--autumn-orange);
  color: #fff;
  transform-origin: 40px 200px;
  margin-left: -40px;
  margin-top: -40px;
  animation-duration: 28s;
}

.orbit-winter {
  background: var(--winter-ice);
  color: #1a3040;
  transform-origin: 40px -120px;
  margin-left: -40px;
  margin-top: -40px;
  animation-duration: 22s;
  animation-direction: reverse;
}

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

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

.cycle-message {
  font-family: 'Cormorant Garamond', var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-style: italic;
  opacity: 0.8;
  max-width: 500px;
  margin: 0 auto;
}

/* ============================================
   SECTION 10 — GATE OF RETURN
   ============================================ */

.realm-gate {
  background: radial-gradient(ellipse at center, #1a1525 0%, #0a0812 60%, #050408 100%);
  color: #f0e8f8;
  text-align: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.gate-portal {
  position: relative;
  width: min(70vw, 320px);
  height: min(70vw, 320px);
  margin: 0 auto 2.5rem;
}

.portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid;
  opacity: 0.6;
  transition: transform 0.6s var(--ease-organic), opacity 0.4s;
}

.portal-spring { border-color: var(--spring-pink); animation: portalPulse 4s ease-in-out infinite; }
.portal-summer { border-color: var(--summer-gold); inset: 8%; animation: portalPulse 4s 1s ease-in-out infinite; }
.portal-autumn { border-color: var(--autumn-orange); inset: 16%; animation: portalPulse 4s 2s ease-in-out infinite; }
.portal-winter { border-color: var(--winter-ice); inset: 24%; animation: portalPulse 4s 3s ease-in-out infinite; }

.portal-center {
  position: absolute;
  inset: 35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}

.realm-gate:hover .portal-ring,
.realm-gate.portal-active .portal-ring {
  animation-play-state: running;
}

.realm-gate.portal-active .portal-spring { transform: rotate(90deg); }
.realm-gate.portal-active .portal-summer { transform: rotate(180deg); }
.realm-gate.portal-active .portal-autumn { transform: rotate(270deg); }
.realm-gate.portal-active .portal-winter { transform: rotate(360deg); }

@keyframes portalPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.gate-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s, transform 0.8s;
}

.realm-gate.in-view .gate-title {
  opacity: 1;
  transform: translateY(0);
}

.seasonal-emblem {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(200, 180, 240, 0.3);
}

.emblem-quadrant {
  position: absolute;
  width: 50%;
  height: 50%;
}

.emblem-spring { top: 0; left: 0; background: var(--spring-pink); }
.emblem-summer { top: 0; right: 0; background: var(--summer-gold); }
.emblem-autumn { bottom: 0; left: 0; background: var(--autumn-orange); }
.emblem-winter { bottom: 0; right: 0; background: var(--winter-ice); }

.enter-ulvero {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1520;
  background: linear-gradient(135deg, var(--spring-pink), var(--summer-gold), var(--autumn-orange), var(--winter-ice));
  background-size: 300% 300%;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.4s, background-position 0.8s;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.enter-ulvero:hover,
.enter-ulvero:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 8px 40px rgba(200, 180, 240, 0.4);
  background-position: 100% 100%;
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.enter-ulvero:hover ~ .gate-portal .portal-ring,
.realm-gate:has(.enter-ulvero:hover) .portal-ring {
  opacity: 1;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  padding: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  background: #050408;
}

/* ============================================
   RESPONSIVE — TABLET+
   ============================================ */

@media (min-width: 600px) {
  .spring-features,
  .summer-structures,
  .lantern-grid,
  .forest-paths,
  .citadel-architecture,
  .ice-formations,
  .aurora-discoveries {
    grid-template-columns: repeat(2, 1fr);
  }

  .lantern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .spring-features,
  .summer-structures {
    grid-template-columns: repeat(3, 1fr);
  }

  .forest-paths,
  .citadel-architecture,
  .ice-formations,
  .aurora-discoveries {
    grid-template-columns: repeat(3, 1fr);
  }

  .lantern-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

  html {
    scroll-behavior: auto;
  }

  .realm-canvas {
    display: none;
  }
}