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

/* ═══ @PROPERTY DEFINITIONS — enable smooth gradient animations ═══ */
@property --fractal-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --fractal-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
@property --glow-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.08;
}
@property --gradient-pos {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --depth-z {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

:root {
  --gold: #C8A84E;
  --gold-soft: #A8894A;
  --gold-deep: #8B6D2E;
  --white-soft: #B8B4AC;
  --purple: #6B5B7B;
  --purple-deep: #4A3D5C;
  --pink: #8B5A6A;
  --bg-deep: #0A0908;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --breath: 1;
  --scroll-progress: 0;
  /* Dynamic per-section hue — updated by JS IntersectionObserver */
  --section-hue: 30;
  --gold-hue-shift: 0deg;
  /* Fractal animation properties */
  --fractal-angle: 0deg;
  --fractal-scale: 1;
  --glow-opacity: 0.08;
  --gradient-pos: 0%;
  --depth-z: 0px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #cosmos, #particles, #particles-fg { display: none; }
  .fractal-bg,
  .fractal-bg::before,
  .fractal-bg::after,
  .meditation-box::after,
  .section-wash .fractal-overlay { display: none !important; }
}

html { overflow-x: hidden; }
/* scroll-behavior: smooth is applied only to programmatic smooth-scrolls
   via JS (scrollIntoView etc.), NOT as a blanket CSS rule, because it
   interferes with the instant teleport in the infinite-scroll system.
   JS call-sites already pass { behavior: 'smooth' } where needed. */

body {
  background: var(--bg-deep);
  color: var(--white-soft);
  font-family: var(--font-sans);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

/* ═══ CURSOR CONSCIOUSNESS ═══ */
.cursor-light {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 220, 60, 0.08) 0%,
    rgba(255, 200, 40, 0.05) 20%,
    rgba(107, 91, 75, 0.03) 45%,
    transparent 70%
  );
  transition: opacity 0.3s;
  mix-blend-mode: screen;
}

/* Secondary trailing purple glow */
.cursor-light-secondary {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(107, 91, 75, 0.06) 0%,
    rgba(107, 91, 75, 0.03) 40%,
    transparent 70%
  );
  mix-blend-mode: screen;
}

.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(200, 168, 78, 0.6), 0 0 30px rgba(200, 168, 78, 0.2);
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ WEBGL + PARTICLE LAYERS ═══ */
#cosmos, #particles, #particles-fg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#cosmos { z-index: 0; }
#particles { z-index: 1; }
#particles-fg { z-index: 5; }

/* ═══ SOUND TOGGLE ═══ */
.sound-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  background: rgba(200, 168, 78, 0.06);
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  color: var(--gold);
  font-size: 1.2rem;
  transition: all 0.4s ease;
  opacity: 0.5;
}
.sound-toggle:hover {
  opacity: 1;
  background: rgba(200, 168, 78, 0.12);
  box-shadow: 0 0 30px rgba(200, 168, 78, 0.15);
}
.sound-toggle.active {
  opacity: 0.8;
  border-color: rgba(200, 168, 78, 0.4);
}
.sound-toggle svg { width: 20px; height: 20px; fill: currentColor; }

/* ═══ BREATH OVERLAY ═══ */
.breath-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse 120% 120% at 50% 50%,
    transparent 40%,
    rgba(5, 3, 17, var(--breath-vignette, 0.3)) 100%
  );
}

/* ═══ CONTENT ═══ */
.content-wrapper {
  position: relative;
  z-index: 3;
}

/* ═══ HERO ═══ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  perspective: 600px;
  transform-style: preserve-3d;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-shadow: 0 0 60px rgba(200, 168, 78, 0.25), 0 0 120px rgba(200, 168, 78, 0.08);
  opacity: 0;
  transform: translateY(20px) translateZ(40px) scale(0.97);
  animation: heroTitleReveal 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  will-change: transform;
  transform-style: preserve-3d;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-soft);
  opacity: 0;
  letter-spacing: 0.12em;
  margin-top: 0.8em;
  animation: heroReveal 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

@keyframes heroReveal {
  to { opacity: 0.85; transform: translateY(0) scale(1); }
}
@keyframes heroTitleReveal {
  to { opacity: 0.85; transform: translateY(0) translateZ(40px) scale(1); }
}

/* ═══ HERO SPIRAL — Interactive ═══ */
.spiral-hero {
  position: relative;
  width: clamp(320px, 55vw, 580px);
  height: clamp(400px, 65vw, 650px);
  margin: 2rem auto;
  opacity: 0;
  animation: heroReveal 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
  perspective: 800px;
}

.spiral-hero svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.spiral-main-path {
  fill: none;
  stroke: url(#spiralGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(107, 91, 75, 0.6)) drop-shadow(0 0 25px rgba(200, 168, 78, 0.3));
}

/* Three layered glow copies — liquid light effect */
.spiral-glow-layer-1 {
  fill: none;
  stroke: url(#spiralGrad);
  stroke-width: 15;
  stroke-linecap: round;
  opacity: 0.25;
  filter: blur(8px);
}
.spiral-glow-layer-2 {
  fill: none;
  stroke: url(#spiralGrad);
  stroke-width: 30;
  stroke-linecap: round;
  opacity: 0.12;
  filter: blur(16px);
}
.spiral-glow-layer-3 {
  fill: none;
  stroke: url(#spiralGrad);
  stroke-width: 60;
  stroke-linecap: round;
  opacity: 0.06;
  filter: blur(30px);
}

.spiral-main-glow {
  fill: none;
  stroke: url(#spiralGrad);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.18;
  filter: blur(6px);
}

.spiral-arrow {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: arrowReveal 1s ease 4s forwards, arrowPulse 2.8s ease-in-out 5.2s infinite;
}

@keyframes arrowReveal { to { opacity: 0.7; } }

/* ═══ ARROW PULSE ═══ */
@keyframes arrowPulse {
  0%, 100% { opacity: 0.7; filter: drop-shadow(0 0 4px rgba(255,215,0,0.3)); }
  50%       { opacity: 1;   filter: drop-shadow(0 0 14px rgba(255,215,0,0.9)); }
}

/* ═══ CHAKRA PULSE RINGS ═══ */
.chakra-pulse-ring {
  fill: none;
  stroke-width: 1.2;
  opacity: 0;
  pointer-events: none;
}

/* ═══ FLOWER OF LIFE ═══ */
.fol-circle {
  fill: none;
  stroke-width: 0.8;
  opacity: 0;
  stroke-dasharray: 252;
  stroke-dashoffset: 252;
  transition: stroke-dashoffset 2.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
.infinity.in-view .fol-circle { opacity: 0.18; stroke-dashoffset: 0; }
.infinity.in-view .fol-circle:nth-child(2) { transition-delay: 0.15s; }
.infinity.in-view .fol-circle:nth-child(3) { transition-delay: 0.30s; }
.infinity.in-view .fol-circle:nth-child(4) { transition-delay: 0.45s; }
.infinity.in-view .fol-circle:nth-child(5) { transition-delay: 0.60s; }
.infinity.in-view .fol-circle:nth-child(6) { transition-delay: 0.75s; }
.infinity.in-view .fol-circle:nth-child(7) { transition-delay: 0.90s; }

/* ═══ SACRED GEOMETRY (Metatron's Cube) ═══ */
.sacred-geo-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 90vw);
  height: min(700px, 90vw);
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.philosophy.in-view .sacred-geo-wrap { opacity: 1; }
.sacred-geo-inner {
  animation: sacredRotate 140s linear infinite;
  transform-origin: 350px 350px;
}
@keyframes sacredRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══ ENERGY TRAIL ═══ */
.energy-trail {
  fill: var(--gold);
  pointer-events: none;
}

.chakra-point-outer {
  transition: r 0.3s ease, opacity 0.3s ease;
}
.chakra-point:hover .chakra-point-outer {
  r: 22;
  opacity: 0.5;
}

.chakra-point-label {
  font-family: var(--font-serif);
  font-size: 14px;
  fill: var(--white-soft);
  opacity: 0.4;
  transition: opacity 0.4s ease;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.chakra-point:hover .chakra-point-label,
.chakra-point.active .chakra-point-label { opacity: 1; }

.chakra-point-number {
  font-family: var(--font-serif);
  font-size: 11px;
  fill: var(--gold);
  opacity: 0.3;
  transition: opacity 0.4s ease;
}
.chakra-point:hover .chakra-point-number,
.chakra-point.active .chakra-point-number { opacity: 0.8; }

/* Staggered reveal for chakra points */
.chakra-point { opacity: 0; animation: dotReveal 0.8s ease forwards; }
.chakra-point:nth-child(1) { animation-delay: 2.2s; }
.chakra-point:nth-child(2) { animation-delay: 2.6s; }
.chakra-point:nth-child(3) { animation-delay: 3.0s; }
.chakra-point:nth-child(4) { animation-delay: 3.4s; }
.chakra-point:nth-child(5) { animation-delay: 3.8s; }

@keyframes dotReveal {
  0% { opacity: 0; transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══ ENERGY PULSE along spiral ═══ */
.energy-pulse {
  fill: var(--gold);
  opacity: 0;
  filter: url(#pulseGlow);
}

/* Comet tail trailing circles */
.energy-trail-comet {
  fill: var(--gold);
  pointer-events: none;
}

/* Drawing light that paints the spiral on entrance */
.drawing-light {
  fill: #fff;
  opacity: 0;
  filter: url(#drawingLightGlow);
}

/* 3D holographic tilt on mouse interaction */
.spiral-hero svg {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}

/* ═══ CHAKRA PULSE RINGS — always pulsing ═══ */
@keyframes chakraPulseExpand {
  0%   { r: 8; opacity: 0.5; stroke-width: 1.5; }
  100% { r: 40; opacity: 0; stroke-width: 0.2; }
}

/* ═══ SCROLL INDICATOR ═══ */
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  opacity: 0;
  animation: fadeIn 1s ease 5s forwards;
}
.scroll-cue span {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white-soft);
  opacity: 0.4;
}
.scroll-cue .scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  opacity: 0.4;
  animation: scrollPulse 2.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50% { transform: scaleY(0.5); opacity: 0.15; }
}
@keyframes fadeIn { to { opacity: 1; } }

/* ═══ SECTION TRANSITIONS ═══ */
.section-wash {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
}

.section-wash::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
}

.section-wash.in-view::before { opacity: 1; }

.section-wash[data-chakra="8"]::before {
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(90, 78, 60, 0.12) 0%, rgba(60, 50, 40, 0.06) 40%, transparent 75%);
}
.section-wash[data-chakra="9"]::before {
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(70, 75, 90, 0.14) 0%, rgba(45, 50, 65, 0.07) 40%, transparent 75%);
}
.section-wash[data-chakra="10"]::before {
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(85, 70, 55, 0.12) 0%, rgba(55, 40, 35, 0.06) 40%, transparent 75%);
}
.section-wash[data-chakra="11"]::before {
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(100, 65, 55, 0.12) 0%, rgba(70, 40, 35, 0.07) 40%, transparent 75%);
}
.section-wash[data-chakra="12"]::before {
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(95, 80, 60, 0.14) 0%, rgba(70, 55, 40, 0.07) 40%, transparent 75%);
}

/* ═══ CHAKRA CARDS ═══ */
.chakra-card {
  max-width: 720px;
  width: 100%;
  position: relative;
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}

/* Holographic sheen overlay on cards — follows tilt angle */
.chakra-card::before {
  content: '';
  position: absolute;
  top: -10%; left: -10%;
  width: 120%; height: 120%;
  background: linear-gradient(
    var(--sheen-angle, 135deg),
    transparent 25%,
    rgba(200, 168, 78, 0.03) 40%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(107, 91, 75, 0.03) 60%,
    transparent 75%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  border-radius: inherit;
}
.chakra-card:hover::before {
  opacity: 1;
}

.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
  filter: blur(8px);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }
.reveal-d4 { transition-delay: 0.48s; }
.reveal-d5 { transition-delay: 0.6s; }

.chakra-number-bg {
  font-family: var(--font-serif);
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 300;
  line-height: 1;
  opacity: 0.15;
  position: absolute;
  top: -2.5rem;
  left: -1rem;
  color: var(--gold);
  pointer-events: none;
  user-select: none;
  transform: scale(2);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible.chakra-number-bg,
.chakra-number-bg.visible {
  opacity: 0.04;
  transform: scale(1);
}

.chakra-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 1.5rem;
}
.chakra-icon svg { width: 100%; height: 100%; }

.chakra-heading {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  color: var(--gold);
  margin-bottom: 0.2em;
  text-shadow: 0 0 40px rgba(200, 168, 78, 0.15);
}
.chakra-heading .num {
  color: var(--white-soft);
  opacity: 0.35;
  font-weight: 300;
  font-size: 0.7em;
}

.chakra-principle {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-style: italic;
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}
[data-chakra="8"] .chakra-principle { color: #8A7A6A; }
[data-chakra="9"] .chakra-principle { color: #7A7E8A; }
[data-chakra="10"] .chakra-principle { color: #9A8070; }
[data-chakra="11"] .chakra-principle { color: #A07868; }
[data-chakra="12"] .chakra-principle { color: #A09078; }

.chakra-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  margin-bottom: 1.5rem;
  opacity: 0.4;
}

.chakra-body {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-soft);
  opacity: 0.75;
}

/* Hidden wisdom revealed on hover */
.hidden-wisdom {
  margin-top: 1.5rem;
  padding: 1.2rem 1.5rem;
  border-left: 1px solid rgba(200, 168, 78, 0.1);
  background: rgba(200, 168, 78, 0.01);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
  pointer-events: none;
}
.chakra-card:hover .hidden-wisdom,
.chakra-card.touched .hidden-wisdom {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hidden-wisdom p {
  font-family: var(--font-serif);
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  font-style: italic;
  color: var(--gold-soft);
  opacity: 0.6;
  line-height: 1.7;
}

/* ═══ PHILOSOPHY ═══ */
.philosophy {
  flex-direction: column;
  text-align: center;
  padding: 10rem 2rem;
  min-height: 100vh;
  gap: 6rem;
}

.phil-statement {
  max-width: 1100px;
  position: relative;
}

.phil-text {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;
  color: var(--gold);
  line-height: 1.2;
  text-shadow:
    0 0 20px rgba(200, 168, 78, 0.5),
    0 0 60px rgba(200, 168, 78, 0.35),
    0 0 140px rgba(200, 168, 78, 0.15);
  letter-spacing: 0.02em;
}

.phil-glow {
  position: relative;
}
.phil-glow::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180%; height: 300%;
  background: radial-gradient(ellipse,
    rgba(200, 168, 78, 0.08) 0%,
    rgba(107, 91, 75, 0.12) 30%,
    rgba(139, 90, 74, 0.06) 55%,
    transparent 75%);
  pointer-events: none;
  animation: glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

.phil-body {
  font-family: var(--font-sans);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 300;
  color: var(--white-soft);
  opacity: 0.6;
  max-width: 540px;
  margin: 2rem auto 0;
  line-height: 1.9;
}

/* ═══ INFINITY SECTION ═══ */
.infinity {
  flex-direction: column;
  text-align: center;
  padding: 8rem 2rem;
  min-height: 100vh;
  gap: 3rem;
}

.infinity-symbol {
  width: clamp(280px, 45vw, 520px);
  height: clamp(140px, 23vw, 260px);
  margin: 0 auto;
}

.infinity-symbol svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.infinity-path {
  fill: none;
  stroke: url(#infGrad);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 16px rgba(200, 168, 78, 0.5)) drop-shadow(0 0 40px rgba(200, 168, 78, 0.2));
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 3s cubic-bezier(0.16, 1, 0.3, 1);
}
.infinity.in-view .infinity-path { stroke-dashoffset: 0; }

.infinity-glow-path {
  fill: none;
  stroke: url(#infGrad);
  stroke-width: 14;
  stroke-linecap: round;
  opacity: 0.2;
  filter: blur(8px);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 3s cubic-bezier(0.16, 1, 0.3, 1);
}
.infinity.in-view .infinity-glow-path { stroke-dashoffset: 0; }

/* Numbers at infinity ends */
.inf-num {
  font-family: var(--font-serif);
  font-size: 28px;
  fill: var(--gold);
  opacity: 0;
  transition: opacity 1.5s ease 1.5s;
}
.infinity.in-view .inf-num { opacity: 0.7; }

.infinity-title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 300;
  color: var(--gold);
  text-shadow:
    0 0 20px rgba(200, 168, 78, 0.6),
    0 0 60px rgba(200, 168, 78, 0.35),
    0 0 120px rgba(200, 168, 78, 0.15);
  letter-spacing: 0.15em;
}

.infinity-verse {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--white-soft);
  opacity: 0.65;
  max-width: 500px;
  margin: 0 auto;
  line-height: 2;
}

.meditation-box {
  margin-top: 2rem;
  padding: 2.5rem 3rem;
  border: 1px solid rgba(200, 168, 78, 0.25);
  background: rgba(200, 168, 78, 0.02);
  max-width: 500px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255,215,0,0.12), 0 0 40px rgba(255,215,0,0.06), inset 0 0 30px rgba(255,215,0,0.03);
  animation: meditationBorderPulse 5s ease-in-out infinite;
}
@keyframes meditationBorderPulse {
  0%, 100% { border-color: rgba(255,215,0,0.25); box-shadow: 0 0 15px rgba(255,215,0,0.12), 0 0 40px rgba(255,215,0,0.06), inset 0 0 30px rgba(255,215,0,0.03); }
  50% { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 25px rgba(255,215,0,0.25), 0 0 60px rgba(255,215,0,0.12), inset 0 0 50px rgba(255,215,0,0.06); }
}
.meditation-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(139,92,246,0.08) 0%, rgba(255,215,0,0.04) 40%, transparent 70%);
  animation: glowBreathe 6s ease-in-out infinite;
}
.meditation-box p {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  color: var(--gold-soft);
  opacity: 0.6;
  line-height: 1.8;
  position: relative;
}

/* ═══ BREATH INDICATOR ═══ */
.breath-ring {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: 36px;
  height: 36px;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.breath-ring.visible { opacity: 0.4; }
.breath-ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.5;
  transform-origin: center;
}

/* ═══ SIDE NAVIGATOR ═══ */
.spiral-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.spiral-nav.visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0;
  cursor: none;
  flex-direction: row-reverse;
}

.nav-circle {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 78, 0.2);
  background: transparent;
  transition: all 0.4s ease;
  flex-shrink: 0;
}
.nav-item.active .nav-circle {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(200, 168, 78, 0.5);
  transform: scale(1.4);
}

.nav-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--white-soft);
  opacity: 0;
  transform: translateX(6px);
  transition: all 0.3s ease;
  white-space: nowrap;
}
.nav-item:hover .nav-label { opacity: 0.7; transform: translateX(0); }
.nav-item.active .nav-label { opacity: 1; transform: translateX(0); color: var(--gold); }

.nav-line {
  width: 1px;
  height: 16px;
  background: linear-gradient(to bottom, rgba(107, 91, 75, 0.2), rgba(200, 168, 78, 0.1));
  margin: 0 auto;
  margin-right: 3.5px;
}

/* ═══ FOOTER ═══ */
footer {
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  z-index: 3;
}
footer p {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  color: var(--white-soft);
  opacity: 0.15;
  letter-spacing: 0.15em;
}

/* ═══ ELEMENTAL LOGOS — blended backgrounds ═══ */
.logo-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.65;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 70%);
}
.section-wash { overflow: hidden; }

/* ═══ FULL-WIDTH GLOWING SECTION DIVIDERS ═══ */
.section-wash .section-divider-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 200, 87, 0.15) 15%,
    rgba(200, 168, 78, 0.7) 40%,
    rgba(255, 230, 130, 1.0) 50%,
    rgba(200, 168, 78, 0.7) 60%,
    rgba(255, 200, 87, 0.15) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 8px 2px rgba(200, 168, 78, 0.35),
    0 0 20px 4px rgba(200, 168, 78, 0.15),
    0 0 40px 8px rgba(200, 168, 78, 0.06);
  opacity: 0;
  transition: opacity 1.5s ease;
  animation: dividerGlowPulse 4s ease-in-out infinite;
}
.section-wash.in-view .section-divider-glow {
  opacity: 1;
}
@keyframes dividerGlowPulse {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255,215,0,0.35), 0 0 20px 4px rgba(255,215,0,0.15), 0 0 40px 8px rgba(255,215,0,0.06); }
  50% { box-shadow: 0 0 12px 3px rgba(255,215,0,0.5), 0 0 30px 6px rgba(255,215,0,0.25), 0 0 60px 12px rgba(255,215,0,0.1); }
}

/* ═══ PARALLAX DEPTH PLANES WITHIN CARDS ═══ */
.chakra-card .chakra-icon {
  will-change: transform;
}
.chakra-card .chakra-heading {
  will-change: transform;
}
.chakra-card .chakra-body {
  will-change: transform;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
  .spiral-nav { display: none; }
  .cursor-light, .cursor-dot { display: none; }
  body { cursor: auto; }
  .chakra-point, .nav-item, .sound-toggle { cursor: pointer; }
  .section-wash { padding: 5rem 1.5rem; }
  .hidden-wisdom { opacity: 0.7; transform: none; pointer-events: auto; }
  .breath-ring { display: none; }
}

@media (max-width: 480px) {
  .hero { padding: 1.5rem; }
  .section-wash { padding: 4rem 1.2rem; }
}

/* ═══ TYPOGRAPHY MICRO-INTERACTIONS ═══ */

/* 1. Hero title — individual letter spans */
.hero-title .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) rotate(var(--letter-rot, 0deg)) scale(0.85);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.hero-title .letter.letter-space {
  width: 0.28em;
}
.hero-title .letter.revealed {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}

/* 2. Hero subtitle — animated gradient text */
.hero-subtitle {
  background: linear-gradient(
    90deg,
    #8A7A6A 0%,
    #C8A84E 25%,
    #B8B4AC 50%,
    #C8A84E 75%,
    #8A7A6A 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: heroReveal 2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards,
             subtitleGradientDrift 9s ease-in-out 3.2s infinite;
}
@keyframes subtitleGradientDrift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* 3. Chakra heading — text-shadow driven by --breath-glow set in JS */
/* (no extra static rule needed; JS writes the property each frame) */

/* 4. Chakra principle — letter-spacing expand on scroll-reveal */
.chakra-principle {
  letter-spacing: -0.02em;
  transition:
    letter-spacing 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.reveal.visible .chakra-principle,
.chakra-principle.visible {
  letter-spacing: 0.07em;
}

/* 5. Phil-text — word-by-word reveal via JS-injected spans */
.phil-text .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: pre;
}
.phil-text .word.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 6. Infinity title — independent continuous glow pulse */
@keyframes infinityGlowPulse {
  0%   { text-shadow: 0 0 30px rgba(255,215,0,0.4), 0 0 60px rgba(255,215,0,0.2), 0 0 120px rgba(255,215,0,0.08); }
  40%  { text-shadow: 0 0 50px rgba(255,215,0,0.7), 0 0 100px rgba(255,215,0,0.4), 0 0 200px rgba(139,92,246,0.2); }
  60%  { text-shadow: 0 0 40px rgba(255,215,0,0.55), 0 0 80px rgba(255,215,0,0.3), 0 0 160px rgba(255,215,0,0.12); }
  100% { text-shadow: 0 0 30px rgba(255,215,0,0.4), 0 0 60px rgba(255,215,0,0.2), 0 0 120px rgba(255,215,0,0.08); }
}
.infinity-title {
  animation: infinityGlowPulse 5.3s ease-in-out infinite;
  text-shadow: none; /* override static rule; keyframe owns it */
}

/* ═══ SCROLL PROGRESS BAR ═══ */
#scroll-progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 3px;
  height: 100vh;
  z-index: 300;
  pointer-events: none;
}
#scroll-progress-track {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(200, 168, 78, 0.05);
}
#scroll-progress-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, rgba(107, 91, 75, 0.7), rgba(200, 168, 78, 0.9), rgba(139, 90, 74, 0.7));
  box-shadow: 0 0 8px rgba(200, 168, 78, 0.4);
  will-change: height;
}
.scroll-progress-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(200, 168, 78, 0.18);
  border: 1px solid rgba(200, 168, 78, 0.1);
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.scroll-progress-dot.active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(200, 168, 78, 0.6);
}

/* ═══ SECTION TRANSITION SWEEP ═══ */
.section-sweep {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, transparent 0%, rgba(255,215,0,0.55) 50%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transform: scaleX(0);
  transform-origin: left center;
}
.section-wash.sweep-active .section-sweep {
  animation: sectionSweep 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes sectionSweep {
  0% { opacity: 0; transform: scaleX(0); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1); }
}
@keyframes entryPulse {
  0% { transform: scale(0.987); }
  55% { transform: scale(1.005); }
  100% { transform: scale(1); }
}
.section-wash.pulse-entry .chakra-card,
.section-wash.pulse-entry .phil-statement,
.section-wash.pulse-entry .infinity-symbol {
  animation: entryPulse 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ═══ RETURN TO TOP SPIRAL ═══ */
#return-spiral {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  pointer-events: none;
}
#return-spiral.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
#return-spiral svg {
  width: 28px;
  height: 28px;
  animation: spiralSpin 8s linear infinite;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
#return-spiral span {
  font-family: var(--font-serif);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
#return-spiral:hover svg { animation-duration: 2s; opacity: 1; }
#return-spiral:hover span { opacity: 0.85; }
@keyframes spiralSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══ CURSOR TRAIL CANVAS ═══ */
#cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* ═══ HOVER RIPPLE ═══ */
.card-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 78, 0.45);
  pointer-events: none;
  width: 20px; height: 20px;
  transform: translate(-50%, -50%) scale(0);
  animation: rippleExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 10;
}
@keyframes rippleExpand {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(11); opacity: 0;   }
}

/* ═══ AMBIENT MEDITATION DOTS ═══ */
.meditation-box { overflow: visible; }
.ambient-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 70%);
  pointer-events: none;
  width: 5px; height: 5px;
}
@keyframes orbitA {
  0%   { left: calc(50% + 140px); top: 50%;               opacity: 0.7; }
  25%  { left: 50%;               top: calc(50% + 42px);  opacity: 0.4; }
  50%  { left: calc(50% - 140px); top: 50%;               opacity: 0.7; }
  75%  { left: 50%;               top: calc(50% - 42px);  opacity: 0.4; }
  100% { left: calc(50% + 140px); top: 50%;               opacity: 0.7; }
}
@keyframes orbitB {
  0%   { left: calc(50% - 110px); top: 50%;               opacity: 0.5; }
  25%  { left: 50%;               top: calc(50% - 30px);  opacity: 0.8; }
  50%  { left: calc(50% + 110px); top: 50%;               opacity: 0.5; }
  75%  { left: 50%;               top: calc(50% + 30px);  opacity: 0.8; }
  100% { left: calc(50% - 110px); top: 50%;               opacity: 0.5; }
}
@keyframes orbitC {
  0%   { left: calc(50% + 80px);  top: calc(50% + 24px);  opacity: 0.6; }
  33%  { left: calc(50% - 60px);  top: calc(50% - 28px);  opacity: 0.3; }
  66%  { left: calc(50% - 75px);  top: calc(50% + 18px);  opacity: 0.6; }
  100% { left: calc(50% + 80px);  top: calc(50% + 24px);  opacity: 0.6; }
}
@keyframes orbitD {
  0%   { left: 50%;               top: calc(50% + 48px);  opacity: 0.4; }
  50%  { left: calc(50% + 120px); top: calc(50% - 18px);  opacity: 0.7; }
  100% { left: 50%;               top: calc(50% + 48px);  opacity: 0.4; }
}
@keyframes orbitE {
  0%   { left: calc(50% - 120px); top: calc(50% - 12px);  opacity: 0.6; }
  50%  { left: calc(50% + 50px);  top: calc(50% + 38px);  opacity: 0.3; }
  100% { left: calc(50% - 120px); top: calc(50% - 12px);  opacity: 0.6; }
}
@keyframes orbitF {
  0%   { left: calc(50% + 90px);  top: calc(50% - 35px);  opacity: 0.5; }
  33%  { left: 50%;               top: calc(50% + 44px);  opacity: 0.7; }
  66%  { left: calc(50% - 90px);  top: calc(50% + 6px);   opacity: 0.4; }
  100% { left: calc(50% + 90px);  top: calc(50% - 35px);  opacity: 0.5; }
}
@keyframes orbitG {
  0%   { left: calc(50% - 65px);  top: calc(50% + 35px);  opacity: 0.7; }
  50%  { left: calc(50% + 65px);  top: calc(50% - 35px);  opacity: 0.3; }
  100% { left: calc(50% - 65px);  top: calc(50% + 35px);  opacity: 0.7; }
}
.ambient-dot:nth-child(1) { animation: orbitA 14s linear infinite; }
.ambient-dot:nth-child(2) { animation: orbitB 18s linear infinite; }
.ambient-dot:nth-child(3) { animation: orbitC 11s linear infinite; }
.ambient-dot:nth-child(4) { animation: orbitD 22s linear infinite; }
.ambient-dot:nth-child(5) { animation: orbitE 16s linear infinite; }
.ambient-dot:nth-child(6) { animation: orbitF 20s linear infinite; }
.ambient-dot:nth-child(7) { animation: orbitG 13s linear infinite; }

/* ═══ SOUND TOGGLE — SONAR PULSE ═══ */
.sound-toggle.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 168, 78, 0.6);
  animation: sonarPing 1.8s ease-out infinite;
  pointer-events: none;
}
.sound-toggle.active::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(200, 168, 78, 0.3);
  animation: sonarPing 1.8s ease-out 0.45s infinite;
  pointer-events: none;
}
@keyframes sonarPing {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ═══ CHAKRA ICON SLOW ROTATION ═══ */
[data-chakra="8"]  .chakra-icon svg { animation: iconSpin  80s linear infinite; }
[data-chakra="9"]  .chakra-icon svg { animation: iconSpin  95s linear infinite; }
[data-chakra="10"] .chakra-icon svg { animation: iconSpin  70s linear infinite reverse; }
[data-chakra="11"] .chakra-icon svg { animation: iconSpin  60s linear infinite; }
[data-chakra="12"] .chakra-icon svg { animation: iconSpin 120s linear infinite reverse; }
@keyframes iconSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ═══ CURSOR IDLE BREATHING ═══ */
.cursor-dot.idle {
  animation: cursorBreathe 2.4s ease-in-out infinite;
}
@keyframes cursorBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 12px rgba(255,215,0,0.6), 0 0 30px rgba(255,215,0,0.2);
  }
  50% {
    transform: translate(-50%, -50%) scale(2.5);
    box-shadow: 0 0 22px rgba(255,215,0,0.9), 0 0 60px rgba(255,215,0,0.35), 0 0 100px rgba(139,92,246,0.2);
  }
}

/* ═══ PARALLAX DEPTH LAYERS ═══ */

/* Parallax perspective root on content wrapper */
.content-wrapper {
  perspective: 2000px;
  perspective-origin: 50% 0%;
}

/* Hero spiral floats above the page on Z axis */
.spiral-hero {
  transform-style: preserve-3d;
  will-change: transform;
  transform: translateZ(-20px);
  /* initial elevation established via JS */
}

/* Large background numbers: further back, drift slowly */
.chakra-number-bg {
  will-change: transform;
  transform-origin: top left;
}

/* Card content: closer layer, moves at 0.9x */
.chakra-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Infinity symbol wrapper: gets 3D rotation on scroll */
.infinity-symbol {
  will-change: transform;
  transform-style: preserve-3d;
  transform-origin: center center;
}

/* Depth-based opacity: elements with parallax-deep class fade slightly */
.parallax-deep {
  opacity: 0.75;
}

/* Smooth GPU-composited transitions for parallax elements */
.parallax-card-layer {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ═══ AMBIENT COLOR ORBS ─ large slow orb per chakra section (CSS ::after) ═══ */
.section-wash[data-chakra] {
  overflow: hidden;
}
.section-wash[data-chakra]::after {
  content: '';
  position: absolute;
  top: -30%; left: -30%;
  width: 160%; height: 160%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.2s ease;
  mix-blend-mode: screen;
  animation: orbDrift 20s ease-in-out infinite alternate;
  z-index: 0;
}
.section-wash[data-chakra].in-view::after { opacity: 1; }

@keyframes orbDrift {
  0%   { transform: translate(  0,    0) scale(1.00); }
  25%  { transform: translate( 3%,  -4%) scale(1.05); }
  50%  { transform: translate(-4%,   2%) scale(0.97); }
  75%  { transform: translate( 2%,   5%) scale(1.03); }
  100% { transform: translate(-2%,  -2%) scale(1.01); }
}

.section-wash[data-chakra="8"]::after {
  background: radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(167, 139, 250, 0.16)  0%,
    rgba(109,  40, 217, 0.07) 50%, transparent 75%);
  animation-duration: 24s;
}
.section-wash[data-chakra="9"]::after {
  background: radial-gradient(ellipse 65% 55% at 55% 45%,
    rgba(129, 140, 248, 0.18) 0%,
    rgba( 67,  56, 202, 0.07) 50%, transparent 75%);
  animation-duration: 20s; animation-delay: -5s;
}
.section-wash[data-chakra="10"]::after {
  background: radial-gradient(ellipse 70% 55% at 45% 55%,
    rgba(192, 132, 252, 0.15)  0%,
    rgba(126,  34, 206, 0.06) 50%, transparent 75%);
  animation-duration: 26s; animation-delay: -9s;
}
.section-wash[data-chakra="11"]::after {
  background: radial-gradient(ellipse 60% 60% at 50% 50%,
    rgba(232, 121, 249, 0.16)  0%,
    rgba(162,  28, 175, 0.07) 50%, transparent 75%);
  animation-duration: 21s; animation-delay: -14s;
}
.section-wash[data-chakra="12"]::after {
  background: radial-gradient(ellipse 75% 60% at 50% 42%,
    rgba(240, 171, 252, 0.18) 0%,
    rgba(192, 132, 252, 0.06) 45%,
    rgba(255, 215,   0, 0.04)  60%, transparent 78%);
  animation-duration: 30s; animation-delay: -6s;
}

/* All direct children sit above the orb */
.section-wash[data-chakra] > * { position: relative; z-index: 1; }

/* ═══ CHAKRA DIVIDER SHIMMER ═══ */
.chakra-divider {
  position: relative;
  overflow: hidden;
}
.chakra-divider::after {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 50%; height: 3px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(255, 220, 80, 0.9)  40%,
    rgba(255, 255, 210, 1.0) 50%,
    rgba(255, 220, 80, 0.9)  60%,
    transparent 100%);
  filter: blur(0.6px);
  transform: translateX(-120%);
  animation: dividerShimmer 4.5s ease-in-out infinite;
}
@keyframes dividerShimmer {
  0%   { transform: translateX(-120%); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(260%);  opacity: 0; }
}

/* ═══ GOLD HUE-ROTATE ─ scroll-position warm/cool tilt ═══ */
.chakra-heading,
.hero-title,
.phil-text,
.infinity-title {
  filter: hue-rotate(var(--gold-hue-shift));
  transition: filter 1.8s ease;
}

/* ═══ SECTION TRANSITION BLOOM ═══ */
#section-bloom {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    hsla(var(--section-hue), 65%, 60%, 0.07) 0%,
    transparent 70%);
  transition: background 0.5s ease;
}
#section-bloom.blooming {
  animation: bloomFlash 1.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes bloomFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   FRACTAL & DEPTH ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ═══ 1. FRACTAL-INSPIRED SECTION BACKGROUNDS ═══ */
/* Nested radial + conic gradients creating self-similar patterns */
.section-wash[data-chakra]::before {
  background-image:
    radial-gradient(circle at 50% 50%,
      rgba(200, 168, 78, 0.025) 0%,
      transparent 25%),
    radial-gradient(circle at 50% 50%,
      rgba(200, 168, 78, 0.018) 0%,
      transparent 45%),
    radial-gradient(circle at 50% 50%,
      rgba(200, 168, 78, 0.012) 0%,
      transparent 65%),
    conic-gradient(
      from var(--fractal-angle, 0deg) at 50% 50%,
      transparent 0deg,
      rgba(107, 91, 75, 0.02) 30deg,
      transparent 60deg,
      rgba(200, 168, 78, 0.015) 90deg,
      transparent 120deg,
      rgba(107, 91, 75, 0.02) 150deg,
      transparent 180deg,
      rgba(200, 168, 78, 0.015) 210deg,
      transparent 240deg,
      rgba(107, 91, 75, 0.02) 270deg,
      transparent 300deg,
      rgba(200, 168, 78, 0.015) 330deg,
      transparent 360deg
    );
  background-size: 40% 40%, 65% 65%, 90% 90%, 100% 100%;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
  animation: fractalSectionRotate 90s linear infinite;
}

@keyframes fractalSectionRotate {
  from { --fractal-angle: 0deg; }
  to   { --fractal-angle: 360deg; }
}

/* ═══ 2. DEEPENED DEPTH SYSTEM ═══ */
/* Enhanced perspective and z-separation between layers */
.content-wrapper {
  transform-style: preserve-3d;
}

.hero {
  transform-style: preserve-3d;
  perspective: 800px;
}

/* Background elements: deep z-plane */
.chakra-number-bg {
  transform: scale(2) translateZ(-80px);
  will-change: transform, opacity;
}
.reveal.visible.chakra-number-bg,
.chakra-number-bg.visible {
  transform: scale(1) translateZ(-80px);
}

/* Chakra icons: mid z-plane */
.chakra-card .chakra-icon {
  transform: translateZ(20px);
  will-change: transform;
}

/* Headings: slightly elevated z-plane */
.chakra-card .chakra-heading {
  transform: translateZ(12px);
  will-change: transform;
}

/* Body text: near-surface z-plane */
.chakra-card .chakra-body {
  transform: translateZ(4px);
  will-change: transform;
}

/* Section divider glow: elevated above section background */
.section-wash .section-divider-glow {
  transform: translateZ(10px);
}

/* Logo backgrounds: deep behind content */
.logo-bg {
  transform: translateZ(-40px) scale(1.05);
  will-change: transform;
}

/* Sacred geometry: deep background layer */
.sacred-geo-wrap {
  transform: translate(-50%, -50%) translateZ(-60px);
}

/* Infinity symbol: elevated for emphasis */
.infinity-symbol {
  transform: translateZ(30px);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ═══ 3. GLASSMORPHISM ON .chakra-card ═══ */
.chakra-card {
  background: rgba(10, 9, 8, 0.45);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(200, 168, 78, 0.06);
  border-radius: 4px;
  padding: 2.5rem 2rem;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(200, 168, 78, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Subtle glass refraction edge highlight */
.chakra-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(200, 168, 78, 0.04) 0%,
    transparent 40%,
    transparent 60%,
    rgba(200, 168, 78, 0.02) 100%
  );
}

/* ═══ 4. FRACTAL BORDER DECORATIONS ═══ */
/* Repeating gradients as border-image suggesting recursive patterns */
.chakra-card {
  border-image: repeating-linear-gradient(
    45deg,
    rgba(200, 168, 78, 0.12) 0px,
    rgba(139, 109, 46, 0.06) 2px,
    transparent 4px,
    transparent 6px,
    rgba(200, 168, 78, 0.08) 8px,
    rgba(107, 91, 75, 0.04) 10px,
    transparent 12px,
    transparent 16px
  ) 1;
}

/* Fractal-like border on philosophy statement */
.phil-statement {
  border-image: repeating-conic-gradient(
    from 0deg,
    rgba(200, 168, 78, 0.06) 0deg,
    transparent 5deg,
    rgba(107, 91, 75, 0.04) 10deg,
    transparent 15deg
  ) 1;
  border-width: 1px;
  border-style: solid;
  padding: 3rem 2rem;
}

/* Fractal border on infinity section meditation box */
.meditation-box {
  border-image: repeating-linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.2) 0px,
    rgba(200, 168, 78, 0.1) 3px,
    transparent 6px,
    transparent 9px,
    rgba(200, 168, 78, 0.15) 12px,
    rgba(139, 109, 46, 0.08) 15px,
    transparent 18px,
    transparent 24px
  ) 1;
}

/* ═══ 5. @PROPERTY ANIMATED GRADIENT KEYFRAMES ═══ */
/* Smooth gradient position animation using registered properties */
@keyframes gradientShift {
  0%   { --gradient-pos: 0%; }
  50%  { --gradient-pos: 100%; }
  100% { --gradient-pos: 0%; }
}

@keyframes glowPulseProperty {
  0%, 100% { --glow-opacity: 0.04; }
  50%      { --glow-opacity: 0.12; }
}

@keyframes depthBreathe {
  0%, 100% { --depth-z: 0px; }
  50%      { --depth-z: 15px; }
}

/* Apply property-driven gradient to hero glow */
.phil-glow::before {
  animation: glowBreathe 6s ease-in-out infinite, glowPulseProperty 8s ease-in-out infinite;
}

/* ═══ 6. MEDITATION BOX — FRACTAL NESTED BORDER (concentric rectangles) ═══ */
.meditation-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    /* Innermost concentric rectangle */
    inset 0 0 0 8px rgba(10, 9, 8, 0.7),
    inset 0 0 0 9px rgba(200, 168, 78, 0.12),
    /* Second ring */
    inset 0 0 0 16px rgba(10, 9, 8, 0.5),
    inset 0 0 0 17px rgba(200, 168, 78, 0.08),
    /* Third ring */
    inset 0 0 0 26px rgba(10, 9, 8, 0.35),
    inset 0 0 0 27px rgba(200, 168, 78, 0.05),
    /* Fourth ring — faintest */
    inset 0 0 0 38px rgba(10, 9, 8, 0.2),
    inset 0 0 0 39px rgba(200, 168, 78, 0.03),
    /* Outer glow beyond the box */
    0 0 40px rgba(200, 168, 78, 0.04),
    0 0 80px rgba(200, 168, 78, 0.02);
  animation: meditationNestPulse 7s ease-in-out infinite;
}

@keyframes meditationNestPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 8px rgba(10, 9, 8, 0.7),
      inset 0 0 0 9px rgba(200, 168, 78, 0.12),
      inset 0 0 0 16px rgba(10, 9, 8, 0.5),
      inset 0 0 0 17px rgba(200, 168, 78, 0.08),
      inset 0 0 0 26px rgba(10, 9, 8, 0.35),
      inset 0 0 0 27px rgba(200, 168, 78, 0.05),
      inset 0 0 0 38px rgba(10, 9, 8, 0.2),
      inset 0 0 0 39px rgba(200, 168, 78, 0.03),
      0 0 40px rgba(200, 168, 78, 0.04),
      0 0 80px rgba(200, 168, 78, 0.02);
  }
  50% {
    box-shadow:
      inset 0 0 0 10px rgba(10, 9, 8, 0.6),
      inset 0 0 0 11px rgba(200, 168, 78, 0.18),
      inset 0 0 0 20px rgba(10, 9, 8, 0.4),
      inset 0 0 0 21px rgba(200, 168, 78, 0.12),
      inset 0 0 0 32px rgba(10, 9, 8, 0.25),
      inset 0 0 0 33px rgba(200, 168, 78, 0.08),
      inset 0 0 0 46px rgba(10, 9, 8, 0.12),
      inset 0 0 0 47px rgba(200, 168, 78, 0.05),
      0 0 50px rgba(200, 168, 78, 0.06),
      0 0 100px rgba(200, 168, 78, 0.03);
  }
}

/* ═══ 7. .fractal-bg CLASS — CSS-only Sierpinski-triangle-like pattern ═══ */
.fractal-bg {
  position: relative;
}
.fractal-bg::before,
.fractal-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Layer 1: Large-scale triangular pattern via conic gradients */
.fractal-bg::before {
  background:
    /* Primary triangle tier */
    conic-gradient(
      from 0deg at 50% 35%,
      transparent 0deg,
      rgba(200, 168, 78, 0.025) 55deg,
      transparent 65deg,
      transparent 175deg,
      rgba(200, 168, 78, 0.025) 185deg,
      transparent 195deg,
      transparent 295deg,
      rgba(200, 168, 78, 0.025) 305deg,
      transparent 315deg
    ),
    /* Second tier — smaller, offset */
    conic-gradient(
      from 180deg at 30% 65%,
      transparent 0deg,
      rgba(107, 91, 75, 0.02) 55deg,
      transparent 65deg,
      transparent 175deg,
      rgba(107, 91, 75, 0.02) 185deg,
      transparent 195deg,
      transparent 295deg,
      rgba(107, 91, 75, 0.02) 305deg,
      transparent 315deg
    ),
    /* Third tier — smaller still */
    conic-gradient(
      from 180deg at 70% 65%,
      transparent 0deg,
      rgba(107, 91, 75, 0.02) 55deg,
      transparent 65deg,
      transparent 175deg,
      rgba(107, 91, 75, 0.02) 185deg,
      transparent 195deg,
      transparent 295deg,
      rgba(107, 91, 75, 0.02) 305deg,
      transparent 315deg
    );
  opacity: 0.7;
  animation: fractalFade 12s ease-in-out infinite alternate;
}

/* Layer 2: Repeating radial dots at self-similar scales */
.fractal-bg::after {
  background:
    radial-gradient(circle at 50% 33%,
      rgba(200, 168, 78, 0.03) 0%, transparent 8%),
    radial-gradient(circle at 25% 67%,
      rgba(200, 168, 78, 0.025) 0%, transparent 6%),
    radial-gradient(circle at 75% 67%,
      rgba(200, 168, 78, 0.025) 0%, transparent 6%),
    radial-gradient(circle at 37.5% 50%,
      rgba(200, 168, 78, 0.018) 0%, transparent 4%),
    radial-gradient(circle at 62.5% 50%,
      rgba(200, 168, 78, 0.018) 0%, transparent 4%),
    radial-gradient(circle at 50% 67%,
      rgba(200, 168, 78, 0.018) 0%, transparent 4%);
  opacity: 0.6;
  animation: fractalFade 12s ease-in-out 3s infinite alternate;
}

@keyframes fractalFade {
  0%   { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* ═══ 8. SECTION TRANSITION CONTINUITY — smoother blending ═══ */
/* Top gradient bleed for each section — blends into the section above */
.section-wash[data-chakra]::before {
  /* Extend the gradient to overlap adjacent sections */
  top: -15%; left: 0;
  width: 100%; height: 130%;
  background-blend-mode: screen;
}

/* Additional vertical gradient overlaps between sections */
.section-wash[data-chakra="8"]::before {
  background:
    /* Existing radial wash */
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(90, 78, 60, 0.12) 0%, rgba(60, 50, 40, 0.06) 40%, transparent 75%),
    /* Top bleed — fading in from dark */
    linear-gradient(to bottom, transparent 0%, rgba(90, 78, 60, 0.04) 15%, transparent 30%),
    /* Bottom bleed — fading into next section's tone */
    linear-gradient(to bottom, transparent 70%, rgba(70, 75, 90, 0.03) 90%, transparent 100%);
}
.section-wash[data-chakra="9"]::before {
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(70, 75, 90, 0.14) 0%, rgba(45, 50, 65, 0.07) 40%, transparent 75%),
    linear-gradient(to bottom, transparent 0%, rgba(70, 75, 90, 0.04) 12%, transparent 28%),
    linear-gradient(to bottom, transparent 72%, rgba(85, 70, 55, 0.03) 92%, transparent 100%);
}
.section-wash[data-chakra="10"]::before {
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(85, 70, 55, 0.12) 0%, rgba(55, 40, 35, 0.06) 40%, transparent 75%),
    linear-gradient(to bottom, transparent 0%, rgba(85, 70, 55, 0.04) 12%, transparent 28%),
    linear-gradient(to bottom, transparent 72%, rgba(100, 65, 55, 0.03) 92%, transparent 100%);
}
.section-wash[data-chakra="11"]::before {
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(100, 65, 55, 0.12) 0%, rgba(70, 40, 35, 0.07) 40%, transparent 75%),
    linear-gradient(to bottom, transparent 0%, rgba(100, 65, 55, 0.04) 12%, transparent 28%),
    linear-gradient(to bottom, transparent 72%, rgba(95, 80, 60, 0.03) 92%, transparent 100%);
}
.section-wash[data-chakra="12"]::before {
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(95, 80, 60, 0.14) 0%, rgba(70, 55, 40, 0.07) 40%, transparent 75%),
    linear-gradient(to bottom, transparent 0%, rgba(95, 80, 60, 0.05) 12%, transparent 28%),
    linear-gradient(to bottom, transparent 75%, rgba(10, 9, 8, 0.06) 95%, transparent 100%);
}

/* ═══ FRACTAL DEPTH-OF-FIELD — dreamy text pulse ═══ */
@keyframes fractal-dof {
  0%, 100% { filter: blur(0px); }
  50%      { filter: blur(0.5px); }
}
.chakra-body {
  animation: fractal-dof 12s ease-in-out infinite;
}

/* ═══ SELF-SIMILAR CARD BORDERS — concentric golden shadows ═══ */
@keyframes cardBorderBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 4px  rgba(200, 168, 78, 0.08),
      0 0 0 12px rgba(200, 168, 78, 0.05),
      0 0 0 24px rgba(200, 168, 78, 0.03),
      0 0 0 48px rgba(200, 168, 78, 0.015);
  }
  50% {
    box-shadow:
      0 0 0 5px  rgba(200, 168, 78, 0.10),
      0 0 0 14px rgba(200, 168, 78, 0.065),
      0 0 0 28px rgba(200, 168, 78, 0.04),
      0 0 0 52px rgba(200, 168, 78, 0.02);
  }
}
.chakra-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(200, 168, 78, 0.04) 0%,
    transparent 40%,
    transparent 60%,
    rgba(200, 168, 78, 0.02) 100%
  );
  box-shadow:
    0 0 0 4px  rgba(200, 168, 78, 0.08),
    0 0 0 12px rgba(200, 168, 78, 0.05),
    0 0 0 24px rgba(200, 168, 78, 0.03),
    0 0 0 48px rgba(200, 168, 78, 0.015);
  animation: cardBorderBreathe 10s ease-in-out infinite;
}

/* ═══ FRACTAL GRID BACKGROUND ON HERO ═══ */
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.015;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(200, 168, 78, 0.6) 0px,
      transparent 1px,
      transparent 60px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(200, 168, 78, 0.6) 0px,
      transparent 1px,
      transparent 60px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(200, 168, 78, 0.4) 0px,
      transparent 1px,
      transparent 90px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(200, 168, 78, 0.4) 0px,
      transparent 1px,
      transparent 90px
    );
}

/* ═══ PERSPECTIVE DEPTH ENHANCEMENT ═══ */
.content-wrapper {
  perspective: 2000px;
}
.section-wash {
  transform-style: preserve-3d;
}

/* ═══ FRACTAL SHIMMER ON .infinity-title ═══ */
.infinity-title {
  position: relative;
}
.infinity-title::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.04;
  background: repeating-linear-gradient(
    30deg,
    transparent 0px,
    rgba(200, 168, 78, 0.5) 2px,
    transparent 4px,
    transparent 11px,
    rgba(200, 168, 78, 0.3) 13px,
    transparent 15px,
    transparent 27px,
    rgba(200, 168, 78, 0.2) 29px,
    transparent 31px,
    transparent 50px
  );
  background-size: 200% 200%;
  animation: fractalShimmerShift 8s linear infinite;
  mix-blend-mode: screen;
}
@keyframes fractalShimmerShift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 100%; }
}

/* ═══ NESTED GLOW RINGS ON .meditation-box ═══ */
.meditation-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background:
    /* Existing radial glow */
    radial-gradient(ellipse at center, rgba(139,92,246,0.08) 0%, rgba(255,215,0,0.04) 40%, transparent 70%),
    /* Golden-ratio scaled concentric rings */
    radial-gradient(circle at center,
      transparent 8.5%, rgba(200, 168, 78, 0.04) 9%, transparent 9.5%),
    radial-gradient(circle at center,
      transparent 14.1%, rgba(200, 168, 78, 0.035) 14.6%, transparent 15.1%),
    radial-gradient(circle at center,
      transparent 22.8%, rgba(200, 168, 78, 0.03) 23.6%, transparent 24.4%),
    radial-gradient(circle at center,
      transparent 37.4%, rgba(200, 168, 78, 0.025) 38.2%, transparent 39%),
    radial-gradient(circle at center,
      transparent 61%, rgba(200, 168, 78, 0.02) 61.8%, transparent 62.6%),
    radial-gradient(circle at center,
      transparent 99%, rgba(200, 168, 78, 0.015) 100%, transparent 100%);
  animation: glowBreathe 6s ease-in-out infinite;
}

/* ═══ SECTION DEPTH MARKERS — Roman numeral counters ═══ */
body {
  counter-reset: section-depth;
}
.section-wash {
  counter-increment: section-depth;
}
/* Depth markers layered into the ambient orb ::after pseudo-element.
   The counter text renders at opacity 0.03 in the bottom-right corner
   while the ambient orb background continues to function behind it. */
.section-wash[data-chakra]::after {
  /* Extend existing ambient orb with depth marker text */
  content: counter(section-depth, upper-roman);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: rgba(200, 168, 78, 0.03);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2rem;
  line-height: 1;
}

/* ═══ REDUCED MOTION OVERRIDES for new animations ═══ */
@media (prefers-reduced-motion: reduce) {
  .chakra-body {
    animation: none !important;
    filter: none !important;
  }
  .chakra-card::after {
    animation: none !important;
    box-shadow: none !important;
  }
  .hero::after {
    display: none !important;
  }
  .infinity-title::after {
    display: none !important;
  }
  .meditation-box::before {
    animation: none !important;
  }
}

/* ═══ 9. MIX-BLEND-MODE DEPTH EFFECTS ═══ */
/* Ambient orbs use screen blend to add luminance without opaque overlap */
.section-wash[data-chakra]::after {
  mix-blend-mode: screen;
}

/* Section bloom uses soft-light for subtle color tinting */
#section-bloom {
  mix-blend-mode: soft-light;
}

/* Hidden wisdom panel: multiply blend creates depth recess effect */
.hidden-wisdom {
  mix-blend-mode: normal;
  background: rgba(200, 168, 78, 0.015);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.12);
}

/* Chakra number background: overlay blend for depth */
.chakra-number-bg {
  mix-blend-mode: overlay;
}

/* Breath overlay: multiply for deepened vignette corners */
.breath-overlay {
  mix-blend-mode: multiply;
}

/* Philosophy glow: screen blend to layer luminosity */
.phil-glow::before {
  mix-blend-mode: screen;
}

/* Section divider glow: screen blend for additive light */
.section-wash .section-divider-glow {
  mix-blend-mode: screen;
}

/* Logo backgrounds: soft-light for tonal integration */
.logo-bg {
  mix-blend-mode: soft-light;
}

/* ═══ FRACTAL ROTATION ON SECTION CONIC GRADIENTS ═══ */
/* The section conic gradient rotates slowly via @property */
.section-wash[data-chakra].in-view::before {
  animation: fractalSectionRotate 90s linear infinite;
}

/* Stagger the rotation direction and speed per section */
.section-wash[data-chakra="9"]::before  { animation-duration: 110s; animation-direction: reverse; }
.section-wash[data-chakra="10"]::before { animation-duration: 80s; }
.section-wash[data-chakra="11"]::before { animation-duration: 100s; animation-direction: reverse; }
.section-wash[data-chakra="12"]::before { animation-duration: 130s; }

/* ═══ FRACTAL ENHANCEMENT 1: HERO MANDALA ═══ */
.fractal-mandala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(400px, 80vw);
  height: min(400px, 80vw);
  pointer-events: none;
  animation: mandalaRotate 180s linear infinite;
  z-index: 0;
}
.fractal-mandala svg {
  width: 100%;
  height: 100%;
}
@keyframes mandalaRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ═══ FRACTAL ENHANCEMENT 2: SECTION CORNER FRACTALS ═══ */
.corner-fractal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 80px;
  height: 80px;
  pointer-events: none;
  z-index: 1;
}

/* ═══ FRACTAL ENHANCEMENT 3: KOCH BORDER ON MEDITATION BOX ═══ */
.koch-border {
  z-index: 0;
}

/* ═══ FRACTAL ENHANCEMENT 4: SACRED SEED OF LIFE ═══ */
.sacred-seed {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.sacred-seed-lg {
  width: 40px;
  height: 40px;
  top: 15%;
  left: 8%;
}
.sacred-seed-md {
  width: 24px;
  height: 24px;
  top: 50%;
  right: 6%;
}
.sacred-seed-sm {
  width: 16px;
  height: 16px;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
}

/* ═══ FRACTAL ENHANCEMENT 5: SCROLL-REACTIVE SIERPINSKI GASKET ═══ */
.scroll-fractal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0.008;
}
.scroll-fractal svg {
  width: 100%;
  height: 100%;
}

/* ═══ RESPONSIVE: HIDE DECORATIVE FRACTALS ON SMALL SCREENS ═══ */
@media (max-width: 600px) {
  .fractal-mandala { width: 60vw; height: 60vw; }
  .corner-fractal { width: 50px; height: 50px; top: 0.5rem; right: 0.5rem; }
  .sacred-seed-lg { width: 28px; height: 28px; }
  .sacred-seed-md { width: 16px; height: 16px; }
  .sacred-seed-sm { width: 12px; height: 12px; }
}