/* ═══════════════════════════════════════════════════════════
   LYQORA — Section Styles
   ═══════════════════════════════════════════════════════════ */

/* ─── SECTION 1: FIRST LIGHT BREATH ─── */
.section--breath {
  background: var(--deep-void);
  display: flex;
  align-items: center;
  justify-content: center;
}

.breath-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%) scaleX(calc(0.1 + var(--breath-progress) * 0.9));
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--aurora-cyan) 20%,
    var(--nebula-violet) 50%,
    var(--solar-rose) 80%,
    transparent 100%
  );
  box-shadow: var(--glow-cyan);
  opacity: calc(0.3 + var(--breath-progress) * 0.7);
  transition: opacity 0.3s;
  filter: blur(calc(1px - var(--breath-progress) * 0.5px));
}

.breath-aurora {
  position: absolute;
  inset: 0;
  opacity: var(--breath-progress);
  background:
    radial-gradient(ellipse 80% 40% at 50% 50%, rgba(124, 255, 234, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 30% at 30% 60%, rgba(179, 136, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 25% at 70% 40%, rgba(255, 111, 177, 0.06) 0%, transparent 50%);
  transform: scale(calc(0.5 + var(--breath-progress) * 0.5));
  transition: transform 0.1s linear;
}

/* ─── SECTION 2: AURORA CATHEDRAL ─── */
.section--cathedral {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--deep-void) 0%, var(--deep-indigo) 50%, var(--deep-void) 100%);
}

.cathedral-chamber {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  align-items: stretch;
  height: 80vh;
  height: 80dvh;
  padding: 2rem 1rem;
  width: 100%;
  max-width: 1400px;
  justify-content: center;
}

.aurora-curtain {
  position: relative;
  flex: 1;
  max-width: 200px;
  min-height: 300px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(124, 255, 234, 0.05) 0%,
    rgba(179, 136, 255, 0.15) 30%,
    rgba(255, 111, 177, 0.1) 60%,
    rgba(124, 255, 234, 0.05) 100%
  );
  transition: flex 0.8s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
  animation: curtain-flow 8s ease-in-out infinite;
}

.aurora-curtain:nth-child(1) { animation-delay: 0s; }
.aurora-curtain:nth-child(2) { animation-delay: -1.6s; }
.aurora-curtain:nth-child(3) { animation-delay: -3.2s; }
.aurora-curtain:nth-child(4) { animation-delay: -4.8s; }
.aurora-curtain:nth-child(5) { animation-delay: -6.4s; }

@keyframes curtain-flow {
  0%, 100% {
    filter: hue-rotate(0deg) brightness(1);
    transform: skewY(0deg);
  }
  50% {
    filter: hue-rotate(15deg) brightness(1.1);
    transform: skewY(0.5deg);
  }
}

.aurora-curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(124, 255, 234, 0.3) 20%,
    rgba(179, 136, 255, 0.4) 50%,
    rgba(124, 255, 234, 0.3) 80%,
    transparent 100%
  );
  animation: curtain-shimmer 4s ease-in-out infinite;
}

@keyframes curtain-shimmer {
  0%, 100% { transform: translateY(-10%); opacity: 0.6; }
  50% { transform: translateY(10%); opacity: 1; }
}

.aurora-curtain:hover,
.aurora-curtain:focus-visible,
.aurora-curtain.active {
  flex: 2;
  box-shadow: var(--glow-cyan), inset 0 0 40px rgba(124, 255, 234, 0.1);
}

.curtain-label {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(234, 246, 255, 0.5);
  white-space: nowrap;
  transition: color 0.4s, opacity 0.4s;
  z-index: 2;
}

.aurora-curtain:hover .curtain-label,
.aurora-curtain.active .curtain-label {
  color: var(--aurora-cyan);
  opacity: 1;
}

.curtain-reveal {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(124, 255, 234, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 30% 70%, rgba(179, 136, 255, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(255, 111, 177, 0.2) 0%, transparent 35%);
  transition: opacity 0.6s ease;
  z-index: 1;
}

.aurora-curtain.active .curtain-reveal {
  opacity: 1;
  animation: reveal-pulse 2s ease-in-out infinite;
}

@keyframes reveal-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ─── SECTION 3: MEMORY LIGHT FIELDS ─── */
.section--memory {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, var(--deep-indigo) 0%, var(--deep-void) 70%);
}

.memory-field {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 70vh;
  height: 70dvh;
  margin: 0 auto;
}

.memory-orb {
  position: absolute;
  width: clamp(80px, 15vw, 140px);
  height: clamp(80px, 15vw, 140px);
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  animation: orb-float 6s ease-in-out infinite;
}

.memory-orb:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.memory-orb:nth-child(2) { top: 25%; right: 15%; animation-delay: -1.5s; }
.memory-orb:nth-child(3) { bottom: 20%; left: 25%; animation-delay: -3s; }
.memory-orb:nth-child(4) { bottom: 30%; right: 10%; animation-delay: -4.5s; }

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -15px); }
  50% { transform: translate(-5px, -25px); }
  75% { transform: translate(-15px, -10px); }
}

.orb-core {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(234, 246, 255, 0.9) 0%,
    var(--aurora-cyan) 30%,
    var(--nebula-violet) 70%,
    transparent 100%
  );
  box-shadow: var(--glow-cyan);
  animation: orb-glow 3s ease-in-out infinite;
}

@keyframes orb-glow {
  0%, 100% { box-shadow: var(--glow-cyan); filter: brightness(1); }
  50% { box-shadow: var(--glow-violet); filter: brightness(1.2); }
}

.orb-label {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(234, 246, 255, 0.6);
  white-space: nowrap;
}

.orb-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--aurora-cyan);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
}

.memory-orb.active .orb-wave {
  animation: orb-wave-expand 1.5s ease-out forwards;
}

@keyframes orb-wave-expand {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

.memory-orb:hover .orb-core,
.memory-orb:focus-visible .orb-core {
  transform: scale(1.15);
}

/* ─── SECTION 4: ENERGY RIVERS ─── */
.section--rivers {
  background: var(--deep-void);
  display: flex;
  align-items: center;
  padding: 4rem 1rem;
}

.river-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.energy-river {
  position: relative;
  height: clamp(100px, 20vh, 180px);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.energy-river:hover,
.energy-river:focus-visible {
  transform: scaleY(1.1);
  box-shadow: var(--glow-cyan);
}

.river-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.river-name {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-heading);
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(234, 246, 255, 0.7);
  z-index: 2;
  pointer-events: none;
}

/* ─── SECTION 5: SKY FRACTURE ZONE ─── */
.section--fracture {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--deep-void) 0%, #0a0b18 50%, var(--deep-void) 100%);
  min-height: 120vh;
}

.fracture-zone {
  position: relative;
  width: 90vw;
  max-width: 1000px;
  height: 70vh;
  height: 70dvh;
}

.light-shard {
  position: absolute;
  width: clamp(60px, 12vw, 120px);
  height: clamp(80px, 15vw, 160px);
  cursor: pointer;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), filter 0.4s;
  animation: shard-drift 12s ease-in-out infinite;
}

.light-shard:nth-child(1) { top: 10%; left: 15%; --shard-hue: 170; animation-delay: 0s; }
.light-shard:nth-child(2) { top: 5%; right: 20%; --shard-hue: 270; animation-delay: -2s; transform: rotate(25deg); }
.light-shard:nth-child(3) { top: 40%; left: 5%; --shard-hue: 330; animation-delay: -4s; transform: rotate(-15deg); }
.light-shard:nth-child(4) { top: 35%; right: 10%; --shard-hue: 200; animation-delay: -6s; transform: rotate(40deg); }
.light-shard:nth-child(5) { bottom: 15%; left: 30%; --shard-hue: 150; animation-delay: -8s; transform: rotate(-30deg); }
.light-shard:nth-child(6) { bottom: 10%; right: 25%; --shard-hue: 290; animation-delay: -10s; transform: rotate(10deg); }

@keyframes shard-drift {
  0%, 100% { translate: 0 0; }
  33% { translate: 8px -12px; }
  66% { translate: -6px 8px; }
}

.shard-inner {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 30%, 80% 100%, 20% 100%, 0% 30%);
  background: linear-gradient(
    135deg,
    hsla(var(--shard-hue, 170), 80%, 70%, 0.6) 0%,
    hsla(calc(var(--shard-hue, 170) + 40), 70%, 50%, 0.3) 50%,
    hsla(var(--shard-hue, 170), 60%, 40%, 0.1) 100%
  );
  box-shadow: 0 0 30px hsla(var(--shard-hue, 170), 80%, 60%, 0.3);
  transition: filter 0.4s, transform 0.4s;
}

.light-shard:hover .shard-inner,
.light-shard:focus-visible .shard-inner,
.light-shard.active .shard-inner {
  filter: brightness(1.5) saturate(1.3);
  transform: scale(1.2);
}

.shard-reality {
  position: fixed;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--aurora-cyan);
  background: rgba(5, 6, 10, 0.8);
  border: 1px solid rgba(124, 255, 234, 0.2);
  border-radius: 2px;
  backdrop-filter: blur(10px);
  z-index: 100;
  animation: reality-fade 3s ease forwards;
}

@keyframes reality-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  15%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* ─── SECTION 6: CONSCIOUSNESS GRID ─── */
.section--grid {
  background: var(--deep-void);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-canvas {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

/* ─── SECTION 7: CELESTIAL HARMONY DOME ─── */
.section--harmony {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0d0e1a 0%, var(--deep-void) 80%);
}

.harmony-dome {
  position: relative;
  width: min(90vw, 600px);
  height: min(90vw, 600px);
}

.harmony-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.harmony-rings {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}

.harmony-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(124, 255, 234, 0.1);
  animation: harmony-ring-pulse 4s ease-in-out infinite;
}

.harmony-ring:nth-child(1) { animation-delay: 0s; }
.harmony-ring:nth-child(2) { inset: 8%; animation-delay: -1.3s; border-color: rgba(179, 136, 255, 0.1); }
.harmony-ring:nth-child(3) { inset: 16%; animation-delay: -2.6s; border-color: rgba(255, 111, 177, 0.08); }

@keyframes harmony-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.03); opacity: 0.8; }
}

/* ─── SECTION 8: VOID OF STILL LIGHT ─── */
.section--void {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--deep-void);
  min-height: 80vh;
}

.void-particles {
  position: absolute;
  inset: 0;
}

.void-whisper {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 1em;
  text-transform: lowercase;
  color: rgba(234, 246, 255, 0.15);
  z-index: 2;
  animation: whisper-fade 6s ease-in-out infinite;
}

@keyframes whisper-fade {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.3; }
}

/* ─── SECTION 9: INFINITE AURORA SKY ─── */
.section--infinite {
  background: var(--deep-void);
  min-height: 120vh;
}

.infinite-canvas {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: sticky;
  top: 0;
}

/* ─── SECTION 10: FINAL LIGHT CORE ─── */
.section--core {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a0c15 0%, var(--deep-void) 60%);
  min-height: 100vh;
  padding: 4rem 1.5rem;
}

.light-core-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
  z-index: 2;
}

.light-core {
  position: relative;
  width: clamp(120px, 25vw, 200px);
  height: clamp(120px, 25vw, 200px);
}

.core-glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(124, 255, 234, 0.3) 0%,
    rgba(179, 136, 255, 0.15) 40%,
    transparent 70%
  );
  animation: core-radiate 4s ease-in-out infinite;
}

@keyframes core-radiate {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.core-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(255, 255, 255, 0.9) 0%,
    var(--aurora-cyan) 25%,
    var(--nebula-violet) 60%,
    var(--solar-rose) 85%,
    transparent 100%
  );
  box-shadow: var(--glow-cyan), var(--glow-violet);
  animation: core-pulse-anim 3s ease-in-out infinite;
}

@keyframes core-pulse-anim {
  0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
  50% { transform: scale(1.05); filter: hue-rotate(20deg); }
}

.core-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--text-light);
  max-width: 600px;
  text-shadow: 0 0 40px rgba(124, 255, 234, 0.2);
}

.enter-lyqora {
  position: relative;
  width: clamp(160px, 40vw, 220px);
  height: clamp(160px, 40vw, 220px);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.enter-lyqora:hover,
.enter-lyqora:focus-visible {
  transform: scale(1.05);
}

.enter-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(124, 255, 234, 0.4);
  animation: enter-ring-pulse 2.5s ease-in-out infinite;
}

.enter-ring--1 {
  inset: 0;
}

.enter-ring--2 {
  inset: 15%;
  border-color: rgba(179, 136, 255, 0.3);
  animation-delay: -1.25s;
}

@keyframes enter-ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.08); opacity: 1; }
}

.enter-text {
  font-family: var(--font-heading);
  font-size: clamp(0.65rem, 2vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--aurora-cyan);
  z-index: 2;
  transition: color 0.3s, text-shadow 0.3s;
}

.enter-lyqora:hover .enter-text {
  color: var(--text-light);
  text-shadow: var(--glow-cyan);
}

/* ─── Mobile adjustments ─── */
@media (max-width: 768px) {
  .cathedral-chamber {
    flex-direction: column;
    height: auto;
    min-height: 80dvh;
  }

  .aurora-curtain {
    max-width: 100%;
    min-height: 80px;
    flex: none !important;
    height: 80px;
  }

  .aurora-curtain:hover,
  .aurora-curtain.active {
    height: 160px;
    flex: none;
  }

  .curtain-label {
    transform: translateX(-50%) rotate(0);
    bottom: 0.75rem;
  }

  .memory-orb {
    width: clamp(60px, 20vw, 100px);
    height: clamp(60px, 20vw, 100px);
  }

  .fracture-zone {
    height: 80dvh;
  }
}