/* ============================================
   ASDF ORBITAL SYSTEM
   Mathematical harmony: Fibonacci sequences + Golden ratio
   9 elements orbiting the center (4 nodes + 5 tools)
   ============================================ */

:root {
  /* === FIBONACCI RADII === */
  --orbit-radius-f10: 55px; /* F10 - inner orbit */
  --orbit-radius-f11: 89px; /* F11 - middle orbit */
  --orbit-radius-f12: 144px; /* F12 - main orbit (used) */
  --orbit-radius-f13: 233px; /* F13 - outer orbit */

  /* Main orbital parameters */
  --orbit-radius: var(--orbit-radius-f12);
  --orbit-duration: 34s; /* F9 - organic timing */
  --orbit-item-size: 48px; /* Touch-friendly */

  /* === FIBONACCI TIMING === */
  --time-f3: 2s;
  --time-f4: 3s;
  --time-f5: 5s;
  --time-f6: 8s;
  --time-f7: 13s;
  --time-f8: 21s;
  --time-f9: 34s;

  /* === ANGULAR DISTRIBUTION === */
  /* 9 elements = 360° / 9 = 40° spacing */
  --angle-step: 40deg;

  /* Individual angles (clockwise from top) */
  --angle-0: 0deg; /* Learn */
  --angle-1: 40deg; /* Build */
  --angle-2: 80deg; /* Analytics */
  --angle-3: 120deg; /* Play */
  --angle-4: 160deg; /* Burns */
  --angle-5: 200deg; /* Forecast */
  --angle-6: 240deg; /* Holdex */
  --angle-7: 280deg; /* Staking */
  --angle-8: 320deg; /* Ignition */

  /* === ORBITAL DELAYS (Fibonacci distribution) === */
  /* Offset delays to create harmonious phasing */
  --delay-0: 0s; /* Learn - start */
  --delay-1: -3s; /* Build - F4 offset */
  --delay-2: -8s; /* Analytics - F6 offset */
  --delay-3: -13s; /* Play - F7 offset */
  --delay-4: -5s; /* Burns - F5 offset */
  --delay-5: -8s; /* Forecast - F6 offset */
  --delay-6: -13s; /* Holdex - F7 offset */
  --delay-7: -21s; /* Staking - F8 offset */
  --delay-8: -34s; /* Ignition - F9 offset (full cycle) */

  /* === GLOW PROGRESSION (Easter egg) === */
  /* Fibonacci sequence for progressive feedback */
  --glow-1: 3px; /* F4 */
  --glow-2: 5px; /* F5 */
  --glow-3: 8px; /* F6 */
  --glow-4: 13px; /* F7 */
  --glow-5: 21px; /* F8 */
  --glow-6: 34px; /* F9 */
  --glow-7: 55px; /* F10 */

  /* === PHI-BASED EASING === */
  --ease-phi: cubic-bezier(0.618, 0, 0.382, 1);
  --ease-phi-in: cubic-bezier(0.618, 0, 1, 1);
  --ease-phi-out: cubic-bezier(0, 0, 0.382, 1);
}

/* ============================================
   KEYFRAMES - ORBITAL ROTATION
   ============================================ */

@keyframes orbit-phi {
  from {
    transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
  }
}

/* Scale animation on hover (φ ratio) */
@keyframes orbit-hover-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08); /* 1 + φ/20 ≈ 1.08 */
  }
}

/* ============================================
   ORBITAL CONTAINER
   ============================================ */

.hub-orbit-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   FIERY PLANET CENTER
   CSS pure: glow orange/red animated + CSS sparks
   ============================================ */

/* Hub perspective zoom on planet hover — scoped to orbit container, desktop only */
.hub-orbit-container {
  transition: scale 1.4s cubic-bezier(0.618, 0, 0.382, 1);
}

@media (min-width: 769px) {
  .hub:has(.hub-planet:hover) .hub-orbit-container {
    scale: 1.12;
  }
}

/* Planet container */
.hub-planet {
  position: absolute;
  width: 120px;
  height: 120px;
  z-index: var(--z-elevated);
  cursor: zoom-in;
}

/* Outer atmosphere — large soft glow */
.planet-atmosphere {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(239, 68, 68, 0.18) 0%,
    rgba(249, 115, 22, 0.12) 35%,
    transparent 70%
  );
  animation: atmo-pulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes atmo-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Corona — medium ring */
.planet-corona {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(249, 115, 22, 0.35) 0%,
    rgba(239, 68, 68, 0.25) 45%,
    transparent 70%
  );
  box-shadow:
    0 0 30px rgba(249, 115, 22, 0.5),
    0 0 60px rgba(239, 68, 68, 0.25);
  animation: corona-breathe 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes corona-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  38.2% {
    transform: scale(1.08);
    opacity: 1;
  }
  61.8% {
    transform: scale(1.04);
    opacity: 0.9;
  }
}

/* Core sphere — the planet surface */
.planet-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    #fff5e0 0%,
    #fbbf24 10%,
    #f97316 28%,
    #ef4444 55%,
    #991b1b 78%,
    #450a0a 100%
  );
  box-shadow:
    0 0 20px rgba(249, 115, 22, 0.9),
    0 0 40px rgba(239, 68, 68, 0.6),
    0 0 80px rgba(239, 68, 68, 0.3),
    inset 0 -15px 30px rgba(0, 0, 0, 0.4);
  animation: core-pulse 3s ease-in-out infinite;
}

@keyframes core-pulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(249, 115, 22, 0.9),
      0 0 40px rgba(239, 68, 68, 0.6),
      0 0 80px rgba(239, 68, 68, 0.3),
      inset 0 -15px 30px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 30px rgba(249, 115, 22, 1),
      0 0 60px rgba(239, 68, 68, 0.8),
      0 0 100px rgba(239, 68, 68, 0.4),
      0 0 140px rgba(239, 68, 68, 0.15),
      inset 0 -15px 30px rgba(0, 0, 0, 0.4);
  }
}

/* Surface shimmer — moving fire bands */
.planet-surface {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(
    -30deg,
    transparent 0%,
    rgba(251, 191, 36, 0.06) 8%,
    transparent 16%
  );
  animation: surface-rotate 12s linear infinite;
  pointer-events: none;
}

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

/* Planet label */
.planet-label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(251, 191, 36, 0.7);
  white-space: nowrap;
  pointer-events: none;
}

/* CSS Sparks — fire particles rising from the planet */
.planet-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.planet-sparks i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  bottom: 50%;
  opacity: 0;
}

/* Phi-distributed spark origins */
.planet-sparks i:nth-child(1) {
  left: 30%;
  background: #fbbf24;
  animation: spark-rise 2s ease-out infinite 0s;
}
.planet-sparks i:nth-child(2) {
  left: 50%;
  background: #f97316;
  animation: spark-rise 2.5s ease-out infinite 0.3s;
}
.planet-sparks i:nth-child(3) {
  left: 70%;
  background: #ef4444;
  animation: spark-rise 1.8s ease-out infinite 0.6s;
}
.planet-sparks i:nth-child(4) {
  left: 40%;
  background: #fbbf24;
  animation: spark-rise 2.2s ease-out infinite 1s;
}
.planet-sparks i:nth-child(5) {
  left: 60%;
  background: #f97316;
  animation: spark-rise 3s ease-out infinite 0.4s;
}
.planet-sparks i:nth-child(6) {
  left: 35%;
  background: #ef4444;
  animation: spark-rise 1.6s ease-out infinite 1.3s;
}
.planet-sparks i:nth-child(7) {
  left: 55%;
  background: #fbbf24;
  animation: spark-rise 2.8s ease-out infinite 0.8s;
}
.planet-sparks i:nth-child(8) {
  left: 45%;
  background: #f97316;
  animation: spark-rise 2s ease-out infinite 1.5s;
}
.planet-sparks i:nth-child(9) {
  left: 25%;
  background: #fbbf24;
  animation: spark-rise 1.5s ease-out infinite 0.2s;
}
.planet-sparks i:nth-child(10) {
  left: 75%;
  background: #ef4444;
  animation: spark-rise 2.3s ease-out infinite 1.1s;
}
.planet-sparks i:nth-child(11) {
  left: 48%;
  background: #fef3c7;
  animation: spark-rise 1.9s ease-out infinite 0.7s;
}
.planet-sparks i:nth-child(12) {
  left: 58%;
  background: #f97316;
  animation: spark-rise 2.6s ease-out infinite 1.8s;
}

@keyframes spark-rise {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(1);
  }
  15% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
    transform: translateX(calc((var(--spark-dx, 8px)))) translateY(-55px) scale(0.3);
  }
}

/* Varied drift directions for each spark */
.planet-sparks i:nth-child(odd) {
  --spark-dx: 12px;
}
.planet-sparks i:nth-child(even) {
  --spark-dx: -10px;
}
.planet-sparks i:nth-child(3n) {
  --spark-dx: 5px;
}
.planet-sparks i:nth-child(4n) {
  --spark-dx: -14px;
}

/* ============================================
   ORBITAL ITEMS (9 elements)
   ============================================ */

.hub-orbit-item {
  position: absolute;
  width: var(--orbit-item-size);
  height: var(--orbit-item-size);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px; /* F4 */

  /* Start at center, positioned by transform */
  left: 50%;
  top: 50%;
  margin-left: calc(var(--orbit-item-size) / -2);
  margin-top: calc(var(--orbit-item-size) / -2);

  /* Initial transform uses static angle (set via inline style) */
  transform: rotate(var(--static-angle, 0deg)) translateX(var(--orbit-radius))
    rotate(calc(var(--static-angle, 0deg) * -1));

  /* Visual styling */
  background: rgba(26, 18, 13, 0.7);
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 12px; /* Slightly rounded */
  backdrop-filter: blur(8px);

  color: var(--text-primary);
  font-size: 13px; /* --text-sm */
  font-weight: 500;
  text-decoration: none;
  text-align: center;

  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-phi),
    border-color var(--duration-fast) var(--ease-phi),
    scale var(--duration-normal) var(--ease-phi),
    box-shadow var(--duration-fast) var(--ease-phi);

  /* Apply orbital animation (single animation, --static-angle used as start position) */
  animation: orbit-phi var(--orbit-duration) linear infinite;
  animation-delay: var(--orbit-delay, 0s);

  z-index: var(--z-base);
}

/* Hover state — use `scale` property (not transform) so it composes with animation */
.hub-orbit-item:hover {
  background: rgba(26, 18, 13, 0.9);
  border-color: var(--gold);
  scale: 1.08;
  box-shadow: 0 0 13px rgba(234, 179, 8, 0.4);
  z-index: var(--z-elevated);
  animation-play-state: paused; /* Pause orbit on hover */
}

/* Focus state (keyboard navigation) */
.hub-orbit-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  z-index: var(--z-elevated);
}

/* Active state */
.hub-orbit-item:active {
  scale: 0.95;
}

/* Icon within item */
.hub-orbit-item-icon {
  font-size: 20px;
  line-height: 1;
}

/* Label within item */
.hub-orbit-item-label {
  font-size: 11px; /* --text-xs */
  font-weight: 600;
  opacity: 0.9;
}

/* ============================================
   EASTER EGG STATES
   ============================================ */

/* Items that count for easter egg */
.hub-orbit-item[data-easter-egg='true'] {
  position: relative;
}

/* Glow progression on click (Fibonacci) */
.hub-orbit-item[data-easter-egg='true']::after {
  content: '';
  position: absolute;
  inset: -3px; /* Default glow */
  border-radius: 14px;
  background: radial-gradient(circle, rgba(234, 179, 8, 0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-phi);
  pointer-events: none;
  z-index: -1;
}

/* Apply glow when clicked (set via JS) */
.hub-orbit-item[data-easter-clicked='true']::after {
  opacity: 1;
  inset: calc(var(--easter-glow, 3px) * -1);
}

/* ============================================
   TERRIER UNLOCK ANIMATION
   ============================================ */

.hub-orbit-center.terrier-unlocked {
  animation: terrier-unlock 2s var(--ease-phi) forwards;
}

@keyframes terrier-unlock {
  0% {
    transform: scale(1) rotate(0deg);
    filter: blur(0);
    box-shadow: 0 0 0 rgba(234, 179, 8, 0);
  }
  50% {
    transform: scale(2) rotate(360deg);
    filter: blur(10px);
    box-shadow: 0 0 34px rgba(234, 179, 8, 0.8);
  }
  75% {
    transform: scale(0.8) rotate(540deg);
    filter: blur(5px);
  }
  100% {
    transform: scale(1) rotate(720deg);
    filter: blur(0);
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
  }
}

/* Terrier portal (revealed after unlock) */
.terrier-portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px; /* F5 */

  padding: 13px 21px; /* F7, F8 */
  background: rgba(234, 179, 8, 0.15);
  border: 2px solid var(--gold);
  border-radius: 16px;

  color: var(--gold);
  font-size: 15px; /* --text-base */
  font-weight: 600;
  text-decoration: none;

  cursor: pointer;
  animation: portal-pulse 2s ease-in-out infinite;
  transition: all 0.3s var(--ease-phi);
}

.terrier-portal:hover {
  background: rgba(234, 179, 8, 0.25);
  transform: scale(1.05);
}

@keyframes portal-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
  }
  50% {
    box-shadow: 0 0 21px rgba(234, 179, 8, 0.9);
  }
}

/* ============================================
   F11 HINT TOAST
   ============================================ */

.f11-hint {
  position: fixed;
  top: 21px; /* Fibonacci F8 */
  right: 21px;

  padding: 13px 21px; /* Fibonacci F7, F8 */
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid var(--gold);
  border-radius: 8px; /* Fibonacci F6 */

  backdrop-filter: blur(8px);

  font-size: 14px;
  color: var(--gold);

  display: flex;
  align-items: center;
  gap: 13px;

  animation: f11-slide-in 0.5s var(--ease-phi);
  z-index: 9999;
}

@keyframes f11-slide-in {
  from {
    transform: translateX(150%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.f11-hint-text {
  display: flex;
  flex-direction: column;
  gap: 5px; /* Fibonacci F5 */
}

.f11-hint-title {
  font-weight: 600;
  font-size: 16px;
}

.f11-hint-subtitle {
  font-size: 13px;
  color: rgba(234, 179, 8, 0.8);
}

.f11-hint-retry {
  padding: 8px 13px;
  background: var(--gold);
  color: #0d0906; /* Dark bg */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: transform 0.2s var(--ease-phi);
}

.f11-hint-retry:hover {
  transform: scale(1.05);
}

.f11-hint-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s var(--ease-phi);
}

.f11-hint-close:hover {
  opacity: 0.7;
}

/* ============================================
   RESPONSIVE - MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  :root {
    --orbit-radius: var(--orbit-radius-f11); /* 89px - smaller orbit on mobile */
    --orbit-item-size: 40px;
  }

  .hub-orbit-center {
    width: 100px;
    height: 100px;
    font-size: 20px;
  }

  .hub-orbit-item-icon {
    font-size: 16px;
  }

  .hub-orbit-item-label {
    font-size: 9px;
    letter-spacing: -0.01em;
  }
}

@media (max-width: 480px) {
  :root {
    --orbit-item-size: 36px;
  }

  .hub-orbit-item-label {
    display: none; /* Hide labels on small screens to prevent overlap */
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .hub-orbit-item {
    animation: none;
    /* Static positioning in a circle */
    transform: rotate(var(--static-angle, 0deg)) translateX(var(--orbit-radius))
      rotate(calc(var(--static-angle, 0deg) * -1));
  }

  @keyframes terrier-unlock {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.1);
    }
  }

  @keyframes portal-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.8;
    }
  }
}