/* ═══════════════════════════════════════════════════
   Animation Controller — all entrance/transition
   animations live here, layered on top of components.
   ═══════════════════════════════════════════════════ */

/* ── Metallic sheen for h1/h2 headings (static, text-only) ── */
.kh-shine {
  --ks: #fff;
  background: linear-gradient(
    160deg,
    var(--ks) 0%,
    #f3e8b4 25%,
    var(--ks) 50%,
    #f3e8b4 75%,
    var(--ks) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Base entrance keyframe ── */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Hero load-time entrance ── */
.hero-favicon,
.hero-sub,
.hero-title-wrap,
.hero p {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 0.7s ease both;
}
.hero-favicon    { animation-delay: 0.08s; }
.hero-title-wrap { animation-delay: 0.16s; }
.hero-sub        { animation-delay: 0.24s; }
.hero p          { animation-delay: 0.32s; }

/* ── Below-fold load-time entrance (after hero finishes ~1.02s) ── */
.filter-bar { opacity: 0; transform: translateY(16px); animation: heroFadeIn 0.5s ease 0.9s both; }
.stat-box  { opacity: 0; transform: translateY(16px); animation: heroFadeIn 0.4s ease both; }
.stat-box:nth-child(1) { animation-delay: 0.95s; }
.stat-box:nth-child(2) { animation-delay: 1.0s; }
.stat-box:nth-child(3) { animation-delay: 1.05s; }
.stat-box:nth-child(4) { animation-delay: 1.1s; }
.stat-box:nth-child(5) { animation-delay: 1.15s; }
.stat-box:nth-child(6) { animation-delay: 1.2s; }
.compare   { opacity: 0; transform: translateY(16px); animation: heroFadeIn 0.5s ease 1.25s both; }

/* ── Scroll-triggered: era headers / descriptions / section headers ── */
.htp-header,
.htp-intro,
.era-header,
.era-sub,
.era-desc,
.section-header {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.htp-header.visible,
.htp-intro.visible,
.era-header.visible,
.era-sub.visible,
.era-desc.visible,
.section-header.visible {
  opacity: 1;
  transform: translateY(0);
}
.era-sub.visible  { transition-delay: 0.08s; }
.era-desc.visible { transition-delay: 0.16s; }

/* diagram section headers and footer: fade only (no slide) */
#charChartSection .section-header,
#timelineMapSection .section-header,
.footer {
  transform: none;
}

/* ── Scroll-triggered: HTP cards (sequential cascade) ── */
.htp-card,
.htp-card-featured {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.htp-card.visible,
.htp-card-featured.visible {
  opacity: 1;
  transform: translateY(0);
}
.how-to-play-grid > *:nth-child(1) { transition-delay: 0.06s; }
.how-to-play-grid > *:nth-child(2) { transition-delay: 0.1s; }
.how-to-play-grid > *:nth-child(3) { transition-delay: 0.14s; }
.how-to-play-grid > *:nth-child(4) { transition-delay: 0.18s; }
.how-to-play-grid > *:nth-child(5) { transition-delay: 0.22s; }
.how-to-play-grid > *:nth-child(6) { transition-delay: 0.26s; }

/* ── Scroll-triggered: entry cards (fade-in + slide-up) ──
   NOTE: translateY lives on .entry-card, NOT .entry, so that .entry's
   getBoundingClientRect stays accurate for keyboard-nav centering.
   The entrance transition is on .entry .entry-card (more specific),
   keeping .entry-card's own transition from kh_entries.css for hover. */
.entry .entry-card {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.entry.visible .entry-card {
  transform: translateY(0);
  opacity: 1;
}
/* staggered cascade within each timeline (up to 10 for Era II) */
.timeline > .entry:nth-child(1) { transition-delay: 0s; }
.timeline > .entry:nth-child(2) { transition-delay: 0.04s; }
.timeline > .entry:nth-child(3) { transition-delay: 0.08s; }
.timeline > .entry:nth-child(4) { transition-delay: 0.12s; }
.timeline > .entry:nth-child(5) { transition-delay: 0.16s; }
.timeline > .entry:nth-child(6) { transition-delay: 0.20s; }
.timeline > .entry:nth-child(7) { transition-delay: 0.24s; }
.timeline > .entry:nth-child(8) { transition-delay: 0.28s; }
.timeline > .entry:nth-child(9) { transition-delay: 0.32s; }
.timeline > .entry:nth-child(10){ transition-delay: 0.36s; }
.timeline > .entry:nth-child(1) .entry-card { transition-delay: 0s; }
.timeline > .entry:nth-child(2) .entry-card { transition-delay: 0.04s; }
.timeline > .entry:nth-child(3) .entry-card { transition-delay: 0.08s; }
.timeline > .entry:nth-child(4) .entry-card { transition-delay: 0.12s; }
.timeline > .entry:nth-child(5) .entry-card { transition-delay: 0.16s; }
.timeline > .entry:nth-child(6) .entry-card { transition-delay: 0.20s; }
.timeline > .entry:nth-child(7) .entry-card { transition-delay: 0.24s; }
.timeline > .entry:nth-child(8) .entry-card { transition-delay: 0.28s; }
.timeline > .entry:nth-child(9) .entry-card { transition-delay: 0.32s; }
.timeline > .entry:nth-child(10) .entry-card { transition-delay: 0.36s; }

/* ── Scroll-triggered: entry dot pop-in ── */
.entry-dot {
  transform: scale(0);
}
.entry.visible .entry-dot {
  transform: scale(1);
}

/* ── Scroll-triggered: timeline line draw-in ── */
.timeline::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 10px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.4),
    rgba(120, 40, 200, 0.2),
    transparent
  );
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline.visible::before {
  opacity: 1;
  transform: scaleY(1);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .timeline::before {
    left: 12px;
  }
}
@media (max-width: 1023px) {
  .timeline::before {
    left: 16px;
  }
}

/* ── Sidebar entrance animations ── */
@keyframes sidebarFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sidebarFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.sidebar-header,
.sidebar-nav,
.sidebar-progress,
.kbd-hint,
.sidebar-actions {
  opacity: 0;
  animation: sidebarFadeIn 0.4s ease both;
}
.sidebar-header   { animation-delay: 0.1s; }
.sidebar-nav      { animation-delay: 0.22s; }
.sidebar-progress { animation-delay: 0.30s; }
.kbd-hint         { animation-delay: 0.34s; }
.sidebar-actions  { animation-delay: 0.38s; }

/* ── Footer entrance (guide: scroll-triggered, homepage: load-time) ── */
.footer {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer.visible {
  opacity: 1;
}
.home-page .footer {
  opacity: 0;
  transform: translateY(12px);
  animation: heroFadeIn 0.6s ease 1.4s both;
}

/* ═══════════════════════════════════════════════════
   Homepage Hero Animations
   ═══════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-content .hero-title-wrap {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  animation: fadeInUp 0.9s ease-out 0.2s both;
}
.hero-content h1 {
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.15), 0 2px 8px rgba(0, 0, 0, 0.5);
}
.hero-content .sub {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
  animation: fadeInUp 0.9s ease-out 0.35s both;
}
.hero-character {
  opacity: 0;
  will-change: opacity;
  animation: fadeIn 0.9s ease-out 0.5s both;
}

/* ── Header logo entrance: light-bloom fade (homepage) ── */
@keyframes logoBloomIn {
  from { opacity: 0; filter: brightness(1.8); }
  to {
    opacity: 1;
    filter: brightness(1);
  }
}
.header-logo {
  opacity: 0;
  filter: brightness(1.8);
  will-change: opacity, filter;
  animation: logoBloomIn 0.7s ease-out 0.1s both;
}

/* ── Cone entrance: slide from edge + bloom ── */
@keyframes coneSlideRight {
  from {
    opacity: 0;
    transform: translateX(20%);
    filter: brightness(1.8);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: brightness(1);
  }
}
@keyframes coneSlideUp {
  from {
    opacity: 0;
    transform: translateY(-20%);
    filter: brightness(1.8);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: brightness(1);
  }
}
.home-cone-bg {
  opacity: 0;
  transform: translateX(20%);
  filter: brightness(1.8);
  will-change: transform, opacity, filter;
  animation: coneSlideRight 0.45s cubic-bezier(0.55, 0.085, 0.68, 0.53) 0.05s both;
}
.cone-rim-shadow {
  opacity: 0;
  will-change: opacity;
  animation: fadeIn 0.45s ease-out 0.05s both;
}
@media (max-width: 768px) {
  .home-cone-bg {
    transform: translateY(-20%);
    animation-name: coneSlideUp;
  }
}

/* ═══════════════════════════════════════════════════
   Sidebar Active Glow
   ═══════════════════════════════════════════════════ */
@keyframes sidebarGlow {
  0%,
  100% {
    border-left-color: var(--kh-gold);
  }
  50% {
    border-left-color: rgba(212, 175, 55, 0.4);
  }
}
.sidebar-nav a.active {
  animation: sidebarGlow 5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════
   Continuous Animations
   ═══════════════════════════════════════════════════ */
@keyframes floatUp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.scroll-top.visible {
  animation: floatUp 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.15);
  }
  50% {
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
  }
}
.entry:has(.entry-card.expanded) .entry-dot {
  animation: dotPulse 4s ease-in-out infinite;
}

@keyframes nextPulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(212, 175, 55, 0);
  }
  50% {
    box-shadow: 0 0 24px rgba(212, 175, 55, 0.3);
  }
}
.entry-card.next-target {
  animation: nextPulse 1.5s ease-in-out 3;
}

/* ── Homepage hover pulse (triggered via JS or hover) ── */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.kh-timeline-btn:hover {
  animation: pulse 2s ease-in-out infinite;
}

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .hero-content .hero-title-wrap,
  .hero-content .sub,
  .hero-character,
  .kh-timeline-btn::before,
  .kh-timeline-btn:hover,
  .sidebar-nav a.active,
  .scroll-top.visible,
  .entry:has(.entry-card.expanded) .entry-dot,
  .entry-card.next-target {
    animation: none;
  }
  .hero-content .hero-title-wrap,
  .hero-content .sub {
    opacity: 1;
    transform: none;
  }
  .hero-character {
    opacity: 1;
  }
  .header-logo {
    animation: none;
    opacity: 1;
    filter: none;
  }
  .home-cone-bg {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .cone-rim-shadow {
    animation: none;
    opacity: 1;
  }
}

/* ── Button border shimmer ── */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.kh-timeline-btn::before {
  animation: shimmer 5s ease-in-out infinite;
}

/* ── Filter dropdown open/close ── */
.filter-dropdown {
  transition: opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}