/* ============================================
   kAsteria Design System
   Editorial black/offwhite, signal-gold accent,
   built around one signature element: the planet.
   ============================================ */

/* Color/type/spacing tokens now live in assets/css/tokens.css, loaded before
   this file on every page (landing included) so the whole site shares one
   design system. A couple of landing-only aliases: */
:root {
  --loader-bg: var(--background);
  --loader-ring: var(--secondary);
  --loader-text: var(--on-surface);
}

/* --- Custom Cursor --- */
body { cursor: none; }

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
}

.cursor-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: var(--gold-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border: 1px solid var(--outline-variant);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease-out, height 0.15s ease-out, border-color 0.15s ease-out;
  animation: cursorBreathe 2.4s ease-in-out infinite;
}

#custom-cursor.hovering .cursor-ring {
  width: 42px;
  height: 42px;
  border-color: var(--gold-accent);
  animation: none;
}

@keyframes cursorBreathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ring { animation: none; }
}

/* --- Part-Name Tooltip (follows cursor while hovering the 3D model) --- */
#part-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 22px)) translateY(6px) scale(0.94);
  transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

#part-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 22px)) translateY(0) scale(1);
}

#part-tooltip .tooltip-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--gold-accent);
  vertical-align: middle;
}

@media (pointer: coarse) {
  #part-tooltip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #part-tooltip { transition: opacity 0.15s ease-out; }
}

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

/* --- Scroll Reveal (fade + rise on first entry into view) --- */
.reveal-up {
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered children (discovery cards, etc.) — delay set per-element by JS */
.reveal-up.reveal-stagger { transition-delay: var(--reveal-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  .reveal-up { opacity: 1; transform: none; transition: none; }
}

/* Underline sweep on the italic gold "elegant word" accents */
.elegant-word {
  position: relative;
}

.elegant-word::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--gold-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.signal-headline:hover .elegant-word::after,
.challenge-headline:hover .elegant-word::after,
.features-heading .display-large:hover .elegant-word::after {
  transform: scaleX(1);
}

/* Light-sweep shine on the character action buttons */
.char-action-btn {
  position: relative;
  overflow: hidden;
}

.char-action-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  transform: translateX(-140%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.char-action-btn:hover::after { transform: translateX(140%); }

/* Selector arrows get a little press + rotate feedback */
.selector-arrow:active { transform: scale(0.92) rotate(-6deg); }
.selector-arrow.next-arrow:hover { transform: scale(1.08) translateX(2px); }
.selector-arrow.prev-arrow:hover { transform: scale(1.08) translateX(-2px); }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}

html::-webkit-scrollbar { display: none; } /* Chrome, Safari, new Edge */

body::-webkit-scrollbar { display: none; }
body { scrollbar-width: none; -ms-overflow-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--on-surface);
  transition: background-color var(--theme-transition), color var(--theme-transition);
  overflow-x: hidden;
  margin: 0;
}

/* --- Typography --- */
.display-large {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 72px;
  line-height: 1.08;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--on-surface);
}

.headline-medium {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.body-large {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--on-surface-variant);
}

.body-medium {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--on-surface-variant);
}

.eyebrow {
  display: inline-block;
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-accent);
  margin-bottom: var(--space-3);
  background: linear-gradient(90deg, var(--gold-accent) 0%, #fff2c9 50%, var(--gold-accent) 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: eyebrowShimmer 5s ease-in-out infinite;
}

@keyframes eyebrowShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow { animation: none; }
}

.elegant-word {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-accent);
  letter-spacing: 0.005em;
  display: inline-block;
}

.huge-kasteria {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 76px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--on-surface);
  display: inline-block;
  margin-left: 14px;
}

/* --- Cinematic Vignette --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
  mix-blend-mode: multiply;
}

[data-theme="light"] body::after {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(20, 18, 12, 0.12) 100%);
}

/* --- Fixed 3D Canvas --- */
#telescope-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 1;
  pointer-events: auto;
}

/* --- Content Overlay --- */
#content {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section-container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-desktop);
  padding-right: var(--margin-desktop);
  pointer-events: auto;
}

/* --- Section 1: Hero --- */
.hero-section { pointer-events: none; }

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeInHint 1s ease 2.5s forwards;
  pointer-events: none;
}

.scroll-line {
  width: 1px;
  height: 32px;
  background: var(--outline);
  opacity: 0.4;
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold-accent);
  animation: scrollPulse 2s ease-in-out infinite 3s;
}

@keyframes fadeInHint { to { opacity: 1; } }
@keyframes scrollPulse { 0% { top: -100%; } 50% { top: 100%; } 100% { top: 100%; } }

/* --- Section 2: The Signal --- */
.signal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 880px;
}

.signal-headline { max-width: 880px; margin: 0 auto; }

/* --- Section 3: The Challenge --- */
.challenge-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.challenge-content { max-width: 660px; }

.challenge-headline { margin-bottom: var(--space-6); }

.meet-text {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 28px;
  font-weight: 560;
  display: flex;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

/* --- SECTION 3B: EXPLORE THE MISSION BANNER --- */
.explore-section { min-height: 40vh; }

.explore-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.explore-mission-banner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  text-decoration: none;
  color: var(--on-surface);
  padding: var(--space-4) var(--space-7);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  animation: bannerGlowPulse 4s ease-in-out infinite;
}

.explore-mission-banner:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--gold-accent);
  box-shadow: var(--shadow-elevated);
}

@keyframes bannerGlowPulse {
  0%, 100% { box-shadow: var(--shadow-soft); }
  50% { box-shadow: var(--shadow-soft), 0 0 34px rgba(232, 185, 74, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .explore-mission-banner { animation: none; }
}

.banner-line { width: 48px; height: 1px; background: var(--gold-accent); flex-shrink: 0; }

.banner-text {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* ============================================
   SECTION 4: FEATURES — the planet (signature element)
   ============================================ */
.features-section { position: relative; overflow: hidden; }

.features-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  position: relative;
}

.features-heading { max-width: 380px; flex-shrink: 0; }
.features-heading .display-large { font-size: 48px; }

/* Stage that hosts the 3D-perspective planet */
.planet-stage {
  position: relative;
  width: 560px;
  height: 560px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
}

/* Saturn-like orbit ring, a true ellipse (not a rotated square) */
.planet-orbit-ring {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  transform: rotateX(78deg);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.planet-stage:hover .planet-orbit-ring,
.planet-stage.illuminated .planet-orbit-ring {
  border-color: var(--gold-accent);
}

.planet-stage.illuminated { cursor: grabbing; }
.planet-stage { cursor: grab; }

/* The planet body itself — pure CSS, shaded like a rocky exoplanet
   with a soft day/night terminator and atmospheric rim light */
.planet-core {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, #ffdf9b 0%, #e8b94a 26%, #7a5416 58%, #211407 100%);
  box-shadow:
    inset -34px -18px 60px rgba(0, 0, 0, 0.65),
    inset 14px 10px 40px rgba(43, 214, 168, 0.16);
}

[data-theme="light"] .planet-core {
  background: radial-gradient(circle at 32% 28%, #ffe9b8 0%, #d9a53d 26%, #8a6120 58%, #3a280f 100%);
  box-shadow:
    inset -34px -18px 60px rgba(0, 0, 0, 0.45),
    inset 14px 10px 40px rgba(43, 214, 168, 0.2);
}

/* Rotating band layer — the actual visible "spin". A conic-gradient of
   translucent bands rotated continuously reads as real surface rotation,
   while the radial-gradient shading above stays fixed (so the lit side
   never appears to move, just like a real planet under a fixed sun). */
.planet-clouds {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.12) 0deg,
    rgba(0, 0, 0, 0.18) 24deg,
    rgba(43, 214, 168, 0.22) 58deg,
    rgba(255, 255, 255, 0.08) 96deg,
    rgba(0, 0, 0, 0.22) 140deg,
    rgba(232, 185, 74, 0.2) 190deg,
    rgba(255, 255, 255, 0.1) 240deg,
    rgba(0, 0, 0, 0.16) 300deg,
    rgba(255, 255, 255, 0.12) 360deg
  );
  mix-blend-mode: overlay;
  animation: planetSpin 22s linear infinite;
  pointer-events: none;
}

.planet-terminator {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 42%, rgba(0, 0, 0, 0.55) 62%, rgba(0, 0, 0, 0.85) 100%);
}

.planet-atmosphere {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  box-shadow: 0 0 46px 6px rgba(43, 214, 168, 0.18);
  pointer-events: none;
}

@keyframes planetSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .planet-clouds { animation: none; }
}

/* --- F1-score readout, overlaid on the planet --- */
.planet-stat {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  pointer-events: none;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  color: #fff8ec;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.01em;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 248, 236, 0.72);
}

.stat-flags {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.planet-stage:hover .stat-flags,
.planet-stage.illuminated .stat-flags {
  opacity: 1;
  transform: translateY(0);
}

.fp-flag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255, 92, 92, 0.9);
  color: #1a0a0a;
  letter-spacing: 0.04em;
}

/* True 3D field for orbiting labels — positions set in JS via
   spherical coordinates (x, y AND z all vary => reads as a sphere) */
.node-field {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.feature-node {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  /* No backdrop-filter here on purpose: this element's transform is
     rewritten every animation frame, and a live blur would have to
     re-sample the animating WebGL canvas behind it 60x/sec — that
     was the main cause of the hover freeze. A layered gradient gives
     a near-identical glass look for free. */
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    var(--card-bg);
  border: 1px solid var(--card-border);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  cursor: pointer;
  will-change: transform;
  transform: translateZ(0);
}

.node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-accent);
  flex-shrink: 0;
}

.feature-node:hover,
.feature-node.node-hovered {
  background: var(--gold-accent);
  color: #14120a;
  border-color: var(--gold-accent);
}

.feature-node:hover .node-dot,
.feature-node.node-hovered .node-dot {
  background: #14120a;
}

/* Polly Mascot */
.polly-wrapper {
  position: absolute;
  bottom: var(--space-6);
  right: var(--margin-desktop);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 10;
}

.polly-avatar {
  width: 96px;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  animation: pollyIdleBob 3.6s ease-in-out infinite;
}

.polly-avatar:hover { transform: scale(1.08) rotate(4deg); animation-play-state: paused; }

@keyframes pollyIdleBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .polly-avatar { animation: none; }
}

.polly-speech-bubble {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 230px;
  padding: var(--space-3);
  background: var(--surface-bright);
  color: var(--on-surface);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-bottom: var(--space-2);
}

.polly-wrapper:hover .polly-speech-bubble,
.polly-speech-bubble.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.polly-caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--outline);
  margin-top: var(--space-2);
  text-transform: uppercase;
}

/* --- SECTION 5: BUILD FOR DISCOVERY --- */
.discovery-container {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discovery-center-title {
  text-align: center;
  position: relative;
  z-index: 5;
}

.center-heading { font-size: 60px; }

.discovery-surround-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-6);
  pointer-events: none;
  perspective: 1000px;
}

.discovery-card {
  position: relative;
  pointer-events: auto;
  max-width: 380px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: var(--space-4);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
  transform-style: preserve-3d;
  /* Base resting transform + the pointer-driven tilt/lift set by JS via
     custom properties. Only transform/opacity animate here (cheap,
     compositor-only) — nothing here touches box-shadow every frame. */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: translateZ(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
  will-change: transform;
}

.top-left-card { justify-self: start; align-self: start; }
.top-right-card { justify-self: end; align-self: start; }
.bottom-left-card { justify-self: start; align-self: end; }
.bottom-right-card { justify-self: end; align-self: end; }

.discovery-card:hover {
  border-color: var(--gold-accent);
  transition: transform 0.08s linear, border-color 0.3s ease;
}

/* Cursor-tracking glow spotlight — an opacity-only fade (never animates
   position/size directly), so it stays cheap even while the mouse moves. */
.discovery-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 185, 74, 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.discovery-card:hover::before { opacity: 1; }

/* Soft elevated glow — pre-rendered on a pseudo-element and only faded
   in/out via opacity, instead of animating box-shadow directly. */
.discovery-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--shadow-elevated), 0 0 40px rgba(232, 185, 74, 0.1);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.discovery-card:hover::after { opacity: 1; }

.card-number {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--gold-accent);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-1);
}

.discovery-card .headline-medium {
  font-size: 21px;
  margin-bottom: var(--space-1);
}

/* ============================================
   SECTION 6: BREAKDOWN — sticky question SCOPED to
   this section only, so it releases naturally before
   the selector section/cards ever appear.
   ============================================ */
.breakdown-section {
  min-height: 170vh;
  display: block;
  padding: 0;
}

.pinned-question-container {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--margin-desktop);
  pointer-events: none;
}

.small-decoding-text {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gold-accent);
  margin-bottom: var(--space-3);
  min-height: 20px;
  display: block;
}

.cta-question {
  font-size: 58px;
  line-height: 1.12;
}

/* --- SECTION 7: GAME CHARACTER SELECTOR --- */
.selector-section { min-height: 100vh; }

.selector-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.selector-container .eyebrow { margin-bottom: var(--space-5); }

.game-selector-wrapper {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.selector-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
}

.selector-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: var(--surface-bright);
  color: var(--on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.selector-arrow:hover {
  transform: scale(1.08);
  background: var(--gold-accent);
  color: #14120a;
  border-color: var(--gold-accent);
}

.character-stage {
  position: relative;
  width: 320px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.character-card {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: fit-content;
  margin: auto 0;
  padding: var(--space-5);
  border-radius: 20px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  text-decoration: none;
  color: var(--on-surface);
  flex-direction: column;
  align-items: center;
  text-align: center;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  transform-style: preserve-3d;
}

.character-card.active { display: flex; }

/* Cinematic entrance — a filmic dolly-in with a slight rotation settle,
   rather than a flat fade/scale. Direction-aware via data-dir on the
   stage (set from JS: 'next' or 'prev'). */
.character-card.entering {
  animation: charEnterNext 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.character-stage[data-dir='prev'] .character-card.entering {
  animation-name: charEnterPrev;
}

@keyframes charEnterNext {
  0%   { opacity: 0; transform: perspective(1200px) translateX(60px) translateZ(-120px) rotateY(-18deg) scale(0.88); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(1200px) translateX(0) translateZ(0) rotateY(0deg) scale(1); filter: blur(0); }
}

@keyframes charEnterPrev {
  0%   { opacity: 0; transform: perspective(1200px) translateX(-60px) translateZ(-120px) rotateY(18deg) scale(0.88); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(1200px) translateX(0) translateZ(0) rotateY(0deg) scale(1); filter: blur(0); }
}

/* Cinematic exit — the outgoing card pulls back into the distance and
   whip-blurs off in the opposite direction of travel. */
.character-card.leaving {
  animation: charExitNext 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.character-stage[data-dir='prev'] .character-card.leaving {
  animation-name: charExitPrev;
}

@keyframes charExitNext {
  0%   { opacity: 1; transform: perspective(1200px) translateX(0) translateZ(0) rotateY(0deg) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: perspective(1200px) translateX(-70px) translateZ(-160px) rotateY(16deg) scale(0.85); filter: blur(8px); }
}

@keyframes charExitPrev {
  0%   { opacity: 1; transform: perspective(1200px) translateX(0) translateZ(0) rotateY(0deg) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: perspective(1200px) translateX(70px) translateZ(-160px) rotateY(-16deg) scale(0.85); filter: blur(8px); }
}

/* Light-sweep glare that races across the card as it settles in —
   a single GPU-cheap gradient sweep for that cinematic "reveal" beat. */
.character-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(248, 244, 234, 0.35) 50%, transparent 60%);
  transform: translateX(-140%);
  opacity: 0;
}

.character-card.entering::after {
  animation: charSweep 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes charSweep {
  0%   { transform: translateX(-140%); opacity: 0; }
  35%  { opacity: 0.9; }
  70%  { opacity: 0; }
  100% { transform: translateX(140%); opacity: 0; }
}

.char-icon {
  font-size: 48px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.char-logo-img { max-height: 52px; width: auto; object-fit: contain; }

.char-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 24px;
  font-weight: 560;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
  color: var(--on-surface);
}

.char-action-btn {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--surface-bright);
  color: var(--on-surface);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 1px solid var(--card-border);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.char-action-btn.primary-btn {
  background: var(--gold-accent);
  color: #14120a;
  border-color: var(--gold-accent);
}

.char-action-btn:hover { transform: translateY(-2px); }

.selector-indicators {
  display: flex;
  gap: 10px;
  margin-top: var(--space-2);
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--card-border);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.indicator-dot.active {
  background: var(--gold-accent);
  border-color: var(--gold-accent);
  transform: scale(1.25);
}

/* --- FOOTER --- */
#footer {
  position: relative;
  z-index: 30;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--card-border);
  background: var(--background);
  text-align: center;
}

.footer-text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--on-surface-variant);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-bottom: var(--space-3);
}
.footer-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--gold-accent); }

/* --- Loading Screen --- */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loader-bg);
  transition: opacity 0.8s ease;
}

#loading-screen.hidden { opacity: 0; pointer-events: none; }

.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-ring {
  width: 44px;
  height: 44px;
  border: 2px solid var(--outline-variant);
  border-top-color: var(--gold-accent);
  border-radius: 50%;
  animation: spin 1.1s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
}

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

.loader-text {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--loader-text);
}

.loader-progress {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--outline);
}

/* --- Theme Toggle --- */
#theme-toggle {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  width: 44px;
  height: 44px;
  border: 1px solid var(--card-border);
  border-radius: 50%;
  background: var(--toggle-bg);
  color: var(--toggle-icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: transform 0.3s ease;
}

#theme-toggle:hover { transform: scale(1.08); }

#theme-toggle .icon-sun,
#theme-toggle .icon-moon {
  position: absolute;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

[data-theme="light"] #theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg); }
[data-theme="light"] #theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg); }
[data-theme="dark"] #theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg); }
[data-theme="dark"] #theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg); }

/* --- Responsive Breakpoints --- */
@media (max-width: 1200px) {
  .planet-stage { width: 460px; height: 460px; }
  .planet-orbit-ring { width: 320px; height: 320px; }
}

@media (max-width: 1024px) {
  .features-container {
    flex-direction: column;
    text-align: center;
    gap: var(--space-5);
  }

  .features-heading { max-width: 100%; }
  .features-heading .display-large { font-size: 42px; }

  .polly-wrapper { position: static; margin-top: var(--space-4); }

  .discovery-surround-grid {
    position: static;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .discovery-card { max-width: 100%; }

  .display-large { font-size: 52px; }
  .cta-question { font-size: 42px; }
  .huge-kasteria { font-size: 52px; }
}

@media (max-width: 768px) {
  .section-container {
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
  }

  .pinned-question-container { padding: 0 var(--margin-mobile); }

  .planet-stage { width: 320px; height: 320px; }
  .planet-orbit-ring { width: 230px; height: 230px; }
  .planet-core { width: 150px; height: 150px; }
  .feature-node { font-size: 12px; padding: 8px 14px 8px 11px; }

  .display-large { font-size: 36px; }
  .cta-question { font-size: 30px; }
  .huge-kasteria { font-size: 40px; margin-left: 6px; }
  .center-heading { font-size: 40px; }
}