/* ==========================================================
   SKY — KYTHERA — SECTIONS
   Layout for every section + the persistent background world.
   ========================================================== */

/* ==========================================================
   LOADING SCREEN
   ========================================================== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-deep-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  transition: opacity 0.8s var(--ease-out-soft), visibility 0.8s;
}
.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-ring {
  position: relative;
  width: 84px; height: 84px;
  animation: spin 3.4s linear infinite;
}
.loading-ring svg { width: 100%; height: 100%; }
.loading-spark {
  position: absolute;
  top: -2px; left: 50%;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--c-gold-soft);
  box-shadow: 0 0 12px 3px rgba(232,201,122,0.8);
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-label {
  font-family: var(--f-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-dim);
}
.loading-dots span {
  opacity: 0;
  animation: dotFade 1.4s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotFade {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ==========================================================
   LIVING SKY — persistent background world
   Layered per 03_ANIMATION_SYSTEM.md parallax speeds.
   Each .layer is positioned fixed and moved by parallax.js
   via translateY driven off scroll progress (transform only —
   no top/left animation, keeps compositing cheap).
   ========================================================== */
.sky-world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: radial-gradient(ellipse at 50% -10%, #0d1a33 0%, var(--c-deep-navy) 55%, #030509 100%);
}

.layer {
  position: absolute;
  inset: -10% -10%;
  width: 120%;
  height: 120%;
  will-change: transform;
}

.layer-aurora,
.layer-nebula {
  /* GSAP parallax only ever touches this outer element's transform.
     The drifting/animated texture lives on an inner child instead —
     otherwise CSS animation and GSAP's scroll-driven transform fight
     over the same property every frame, which is what caused the
     flicker/jitter seen on scroll. */
  overflow: hidden;
}

.layer-aurora-inner,
.layer-nebula-inner {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  background-repeat: no-repeat;
}

.layer-aurora-inner {
  z-index: var(--z-bg-aurora);
  background-image:
    radial-gradient(60% 40% at 20% 15%, rgba(111,227,217,0.16), transparent 70%),
    radial-gradient(50% 35% at 80% 10%, rgba(201,168,76,0.10), transparent 70%),
    url('../assets/background/aurora-texture.webp');
  /* Sized as a bounded patch of sky, not a full-bleed wallpaper —
     the texture is meant to read as one atmospheric feature drifting
     through the scene, not the entire background. */
  background-size: cover, cover, 55% auto;
  background-position: 20% 10%, 80% 5%, 30% 15%;
  background-blend-mode: normal, normal, normal;
  opacity: 0.45;
  filter: blur(30px);
  animation: auroraDrift 22s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.05); }
}

.layer-nebula-inner {
  z-index: var(--z-bg-nebula);
  background-image:
    radial-gradient(40% 30% at 65% 35%, rgba(168,216,240,0.08), transparent 70%),
    radial-gradient(35% 25% at 15% 55%, rgba(111,227,217,0.06), transparent 70%),
    url('../assets/background/nebula-texture.webp');
  background-size: cover, cover, 48% auto;
  background-position: 65% 35%, 15% 55%, 72% 40%;
  background-blend-mode: normal, normal, normal;
  opacity: 0.35;
  filter: blur(40px);
}

.layer-moon {
  z-index: var(--z-bg-moon);
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 72%);
  mask-image: radial-gradient(circle, #000 62%, transparent 72%);
}

.layer-constellation {
  z-index: var(--z-bg-constellation);
  opacity: 0.5;
}

.layer-stars-far, .layer-stars-mid, .layer-stars-near {
  background-repeat: repeat;
}
.layer-stars-far   { z-index: var(--z-bg-stars-far);  opacity: 0.5; }
.layer-stars-mid   { z-index: var(--z-bg-stars-mid);  opacity: 0.75; }
.layer-stars-near  { z-index: var(--z-bg-stars-near); opacity: 1; }

.layer-cloud {
  z-index: var(--z-bg-clouds);
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Far clouds: smaller, dimmer, sit deeper in the scene */
.layer-cloud-far {
  opacity: 0.22;
  background-image: url('../assets/background/cloud-silhouette-far.webp');
  background-size: 42% auto;
  background-position: 12% 18%;
}
.layer-cloud-far-b {
  background-position: 82% 62%;
  background-size: 36% auto;
}
/* Near clouds: bigger, a bit more visible, sit closer to the viewer */
.layer-cloud-near {
  opacity: 0.32;
  background-image: url('../assets/background/cloud-silhouette-near.webp');
  background-size: 55% auto;
  background-position: 70% 30%;
}
.layer-cloud-near-b {
  background-position: 18% 78%;
  background-size: 48% auto;
}

.layer-fog {
  z-index: var(--z-bg-fog);
  background: linear-gradient(180deg, transparent 0%, transparent 72%, rgba(6,10,22,0.18) 88%, rgba(6,10,22,0.32) 100%);
  pointer-events: none;
}

.layer-shooting, .layer-particles {
  z-index: var(--z-bg-foreground);
}

/* ==========================================================
   JOURNEY OF LIGHT — the guiding orb
   ========================================================== */
.orb {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  z-index: var(--z-orb);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.orb.is-active { opacity: 1; }
.orb-core {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--c-gold-soft) 40%, var(--c-aurora-cyan) 100%);
  box-shadow: 0 0 16px 4px rgba(232,201,122,0.7);
}
.orb-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,201,122,0.35), transparent 70%);
  animation: orbPulse 2.6s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.5); opacity: 0.3; }
}

/* ==========================================================
   MOON NAVIGATOR — replaces the scroll progress bar
   ========================================================== */
.moon-nav {
  position: fixed;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: var(--z-moon-nav);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-direction: row-reverse;
}
.moon-nav-dial {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,21,40,0.5);
  border: 1px solid var(--c-border-soft);
  backdrop-filter: blur(10px);
}
.moon-nav-dial svg { width: 26px; height: 26px; }
.moon-nav-phase {
  font-size: var(--fs-caption);
  color: var(--c-text-dim);
  letter-spacing: 0.04em;
  background: rgba(13,21,40,0.5);
  border: 1px solid var(--c-border-soft);
  padding: 0.4rem 0.8rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.moon-nav:hover .moon-nav-phase { opacity: 1; transform: translateX(0); }

/* ==========================================================
   AUDIO TOGGLE
   ========================================================== */
.audio-toggle {
  position: fixed;
  bottom: var(--sp-3);
  right: var(--sp-3);
  z-index: var(--z-moon-nav);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,21,40,0.5);
  border: 1px solid var(--c-border-soft);
  backdrop-filter: blur(10px);
  color: var(--c-text-dim);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.audio-toggle[aria-pressed="true"] {
  color: var(--c-aurora-cyan);
  border-color: var(--c-border-gold);
}
.audio-wave { transition: opacity 0.3s ease; }

/* ==========================================================
   INTRO CINEMATIC
   ========================================================== */
.intro-cinematic {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.intro-text {
  max-width: 640px;
}
.intro-line {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 3.4vw, 1.7rem);
  color: var(--c-text-dim);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(14px);
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
}
.hero-logo {
  position: relative;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-2);
  animation: spin 40s linear infinite;
}
.hero-logo svg { width: 100%; height: 100%; }
.hero-logo-inner {
  position: absolute;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 50%;
  animation: counterSpin 40s linear infinite;
}
@keyframes counterSpin { to { transform: rotate(-360deg); } }

.hero-title {
  font-size: var(--fs-h1);
  letter-spacing: 0.08em;
}
.hero-subtitle {
  font-size: var(--fs-lead);
  color: var(--c-text-dim);
  max-width: 480px;
  font-weight: 300;
}
.hero-cta {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.scroll-cue {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.scroll-cue span {
  width: 1px; height: 34px;
  background: linear-gradient(var(--c-warm-gold), transparent);
  animation: scrollCue 1.8s ease-in-out infinite;
}
.scroll-cue p {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
@keyframes scrollCue {
  0%   { opacity: 0; transform: scaleY(0.3); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.3); transform-origin: bottom; }
}

/* ==========================================================
   ABOUT (both variants)
   ========================================================== */
.about, .about-2 {
  display: flex;
  justify-content: center;
}
.about-inner {
  max-width: 720px;
  text-align: center;
}
.about-inner h2 {
  margin: var(--sp-2) 0 var(--sp-4);
}
.about-copy p {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lead);
}
.about-emphasis {
  font-family: var(--f-display);
  color: var(--c-gold-soft);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* ==========================================================
   STATISTICS
   ========================================================== */
.statistics { text-align: center; }
.statistics h2 { margin: var(--sp-2) 0 var(--sp-6); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 860px) {
  .stat-grid { grid-template-columns: repeat(1, 1fr); }
}

/* ==========================================================
   ONLINE MEMBERS — Constellation
   ========================================================== */
.online-members { text-align: center; }
.online-members h2 { margin: var(--sp-2) 0 var(--sp-1); }
.section-lead {
  color: var(--c-text-dim);
  font-size: var(--fs-lead);
  max-width: 560px;
  margin: 0 auto var(--sp-6);
}
.constellation {
  position: relative;
  min-height: 320px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4) var(--sp-5);
}
.constellation-loading {
  color: var(--c-text-faint);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
}
.constellation-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.member-star {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.member-star-avatar {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--c-border-soft);
  transition: transform 0.3s var(--ease-out-soft), border-color 0.3s ease, box-shadow 0.3s ease;
}
.member-star:hover .member-star-avatar {
  transform: translateY(-4px) scale(1.06);
  border-color: var(--c-border-gold);
  box-shadow: var(--glow-gold);
}
.member-star-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-status-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--c-deep-navy);
}
.status-online  { background: #3ba55d; }
.status-idle    { background: #faa61a; }
.status-dnd     { background: #ed4245; }
.status-offline { background: #4f545c; }
.member-star-name {
  font-size: 0.72rem;
  color: var(--c-text-dim);
  max-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.constellation-tooltip {
  position: fixed;
  z-index: var(--z-overlay);
  padding: 0.6rem 0.9rem;
  background: rgba(13,21,40,0.92);
  border: 1px solid var(--c-border-gold);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  color: var(--c-text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.constellation-tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================
   FEATURE STORY intro
   ========================================================== */
.feature-story { text-align: center; }
.feature-story h2 { margin: var(--sp-2) 0 var(--sp-2); }

/* ==========================================================
   FEATURE SHOWCASE — cinematic projection sequence
   ========================================================== */
.showcase {
  position: relative;
  z-index: var(--z-content);
}
.showcase-feature {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: var(--sp-7) var(--section-pad-x);
  max-width: 1240px;
  margin: 0 auto;
}
.showcase-feature.is-reversed {
  flex-direction: row-reverse;
}
@media (max-width: 900px) {
  .showcase-feature, .showcase-feature.is-reversed {
    flex-direction: column;
    text-align: center;
    min-height: auto;
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
  }
}
@media (max-width: 900px) and (orientation: portrait) {
  .showcase-feature, .showcase-feature.is-reversed {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    gap: var(--sp-3);
  }
  .showcase-visual { min-height: 220px; }
  .showcase-img-wrap { max-height: min(46vh, 420px); }
}

.showcase-text {
  flex: 1;
  opacity: 0;
  transform: translateY(24px);
}
.showcase-text .eyebrow { display: block; margin-bottom: var(--sp-1); }
.showcase-text h3 {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-1);
}
.showcase-subtitle {
  color: var(--c-aurora-cyan);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
  opacity: 0.85;
}
.showcase-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.showcase-bullets li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--c-text-dim);
  font-size: var(--fs-body);
}
.showcase-bullets li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-warm-gold);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ---------- The projected screenshot ---------- */
.showcase-visual {
  flex: 1.15;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  perspective: 1200px;
}
.showcase-projection {
  position: relative;
  width: 100%;
  max-width: 520px;
  opacity: 0;
  transform: scale(0.92) rotate(-1.4deg);
  transition: none; /* driven by GSAP */
}
.is-reversed .showcase-projection {
  transform: scale(0.92) rotate(1.4deg);
}

.showcase-glow {
  position: absolute;
  inset: -18%;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(201,168,76,0.22), rgba(111,227,217,0.10) 55%, transparent 75%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
}

.showcase-img-wrap {
  position: relative;
  z-index: 1;
  will-change: transform;
  animation: showcaseFloat 6s ease-in-out infinite;

  /* Fixed viewport so long/tall screenshots don't blow up the layout.
     Content that overflows scrolls internally instead of being
     stretched or auto-cropped. */
  max-height: min(64vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--r-md);

  /* Keep the internal scroll from "leaking" into Lenis's page-level
     smooth scroll once the user reaches the top/bottom of the frame. */
  overscroll-behavior: contain;

  /* Edge-fade lives on the wrapper (fixed, doesn't scroll with the
     image inside) so the "dissolve into the sky" effect stays put
     even while a tall screenshot is being scrolled. Putting this
     mask on the <img> itself would have scrolled the fade away from
     the visible edge as soon as the user scrolled the frame. */
  -webkit-mask-image: radial-gradient(ellipse 82% 90% at 50% 50%, black 62%, transparent 97%);
  mask-image: radial-gradient(ellipse 82% 90% at 50% 50%, black 62%, transparent 97%);

  /* Thin, on-brand scrollbar so it reads as an intentional viewer,
     not a broken overflow. */
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.5) transparent;
}
.showcase-img-wrap::-webkit-scrollbar { width: 6px; }
.showcase-img-wrap::-webkit-scrollbar-track { background: transparent; }
.showcase-img-wrap::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.45);
  border-radius: var(--r-pill);
}

/* Small on-brand cue that the screenshot is scrollable, shown only
   when the image is actually taller than the frame (JS adds this
   class after measuring). Fades out once the user has scrolled. */
.showcase-img-wrap.has-overflow::after {
  content: '';
  position: sticky;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 36px;
  margin-top: -36px;
  background: linear-gradient(180deg, transparent, rgba(6,10,22,0.55));
  pointer-events: none;
}
@keyframes showcaseFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.showcase-img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
}

.showcase-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.5) 48%, rgba(111,227,217,0.35) 52%, transparent 70%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 82% 90% at 50% 50%, black 62%, transparent 97%);
  mask-image: radial-gradient(ellipse 82% 90% at 50% 50%, black 62%, transparent 97%);
}

/* Living micro-interactions inside screenshots (toggled per-feature via JS) */
.showcase-pulse-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #3ba55d;
  box-shadow: 0 0 6px 2px rgba(59,165,93,0.8);
  animation: livingBlink 2.2s ease-in-out infinite;
}
@keyframes livingBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
.showcase-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.10) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmerSlide 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSlide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================
   GALLERY — Floating Memories
   ========================================================== */
.gallery { text-align: center; }
.gallery h2 { margin: var(--sp-2) 0 var(--sp-1); }
.gallery-field {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.gallery-card {
  aspect-ratio: 4/5;
  opacity: 0;
  transform: translateY(30px);
}

/* ==========================================================
   RULES — Ancient Archive
   ========================================================== */
.rules { display: flex; justify-content: center; }
.rules-inner {
  max-width: 780px;
  padding: var(--sp-6) clamp(1.5rem, 5vw, 4rem);
  text-align: left;
}
.rules-inner .eyebrow, .rules-inner h2, .rules-inner .section-lead {
  text-align: center;
}
.rules-inner .section-lead { margin-left: auto; margin-right: auto; }
.rules-list {
  margin-top: var(--sp-5);
  counter-reset: rule-counter;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.rule-item {
  counter-increment: rule-counter;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border-soft);
  opacity: 0;
  transform: translateY(14px);
}
.rule-item:last-child { border-bottom: none; }
.rule-item::before {
  content: counter(rule-counter, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: 0.85rem;
  color: var(--c-warm-gold);
  opacity: 0.7;
  padding-top: 0.1rem;
}
.rule-item p {
  font-size: 0.9rem;
  color: var(--c-text-dim);
}

/* ==========================================================
   JOIN JOURNEY
   ========================================================== */
.join-journey {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
}
.join-journey h2 { margin: var(--sp-1) 0; }
.btn-large {
  margin-top: var(--sp-4);
  padding: 1.1rem 2.8rem;
  font-size: 1.05rem;
}

.portal {
  position: absolute;
  top: 50%; left: 50%;
  width: 420px; height: 420px;
  transform: translate3d(-50%, -50%, 0);
  z-index: -1;
  pointer-events: none;
}
.portal-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.18);
  animation: portalSpin 26s linear infinite;
}
.portal-ring:nth-child(2) {
  inset: 12%;
  border-color: rgba(111,227,217,0.14);
  animation-duration: 34s;
  animation-direction: reverse;
}
@keyframes portalSpin { to { transform: rotate(360deg); } }
.portal-core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,201,122,0.18), transparent 70%);
  filter: blur(20px);
}

/* ==========================================================
   REDIRECT OVERLAY
   ========================================================== */
.redirect-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--c-deep-navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}
.redirect-overlay.is-visible { opacity: 1; visibility: visible; }
.redirect-portal-glow {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.25), transparent 70%);
  filter: blur(30px);
  animation: orbPulse 2s ease-in-out infinite;
}
.redirect-text {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  color: var(--c-gold-soft);
}
.redirect-count {
  font-family: var(--f-display);
  font-size: 3rem;
  color: var(--c-text);
}
.redirect-bar-wrap {
  width: 220px; height: 2px;
  background: var(--c-border-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.redirect-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-warm-gold), var(--c-aurora-cyan));
}
.redirect-sub {
  font-size: var(--fs-caption);
  color: var(--c-text-faint);
}

/* ==========================================================
   FOOTER — Eclipse
   ========================================================== */
.footer {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  padding-bottom: var(--sp-6);
  text-align: center;
}
.footer-content { position: relative; z-index: 1; }
.footer-title {
  font-family: var(--f-display);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--c-text);
}
.footer-tagline {
  font-size: var(--fs-caption);
  color: var(--c-text-faint);
  margin-top: 0.3rem;
}
.socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-text-dim);
  font-size: var(--fs-caption);
  transition: color 0.25s ease, transform 0.25s ease;
}
.social-link:hover {
  color: var(--c-gold-soft);
  transform: translateY(-2px);
}
.footer-note {
  font-size: 0.72rem;
  color: var(--c-text-faint);
  letter-spacing: 0.04em;
}

/* ---------- Generic scroll-reveal used across sections ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}