/* ============================================================
   SECTION TRANSITION — used by common/defaultTransition.js
   ============================================================ */
@keyframes tabEnter {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.section.leaving {
  animation: sectionExit 0.12s ease both;
  pointer-events: none;
}

@keyframes sectionExit {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes contentSwitch {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ============================================================
   NAV LINK SELECTION — used by common/defaultTransition.js
   ============================================================ */
.nav a.is-nav-selecting {
  animation: navSelectPop 0.46s var(--ease) both;
}

@keyframes navSelectPop {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ============================================================
   LANGUAGE SWITCH — (removed, caused watermark glitch on mobile)
   ============================================================

   ============================================================
   SPLASH SCREEN — used by index.html
   ============================================================ */
@keyframes splashText {
  0% { opacity: 0; transform: scale(0.92); letter-spacing: 0.5em; }
  7% { opacity: 1; transform: scale(1.02); letter-spacing: 0.3em; }
  9% { opacity: 0.1; transform: translateX(-5px) scale(1); }
  11% { opacity: 0.85; transform: translateX(3px); }
  13% { opacity: 1; transform: translateX(0); }
  78% { opacity: 1; }
  84% { opacity: 0.15; transform: translateX(6px) skewX(3deg); }
  86% { opacity: 0.9; transform: translateX(-3px) skewX(-2deg); }
  88% { opacity: 0.04; transform: translateX(7px) scale(1.03); }
  90% { opacity: 0; transform: translateX(0); }
  100% { opacity: 0; }
}

@keyframes splashOut {
  0% { opacity: 1; }
  88% { opacity: 1; }
  92% { opacity: 0.35; }
  95% { opacity: 0.85; }
  97% { opacity: 0; }
  100% { opacity: 0; pointer-events: none; }
}

@keyframes splashBar {
  0% { width: 0%; }
  85% { width: 100%; }
  100% { width: 100%; }
}

@keyframes splashWait {
  0%, 10% { opacity: 0; }
  13% { opacity: 1; }
  78% { opacity: 1; }
  84% { opacity: 0; }
  100% { opacity: 0; }
}

/* ============================================================
   STORY POPUP — used by story popup component
   ============================================================ */
.story-overlay.open .story-popup {
  animation: storyGlitchIn 0.5s var(--ease) both;
}

.story-overlay.closing .story-popup {
  animation: storyGlitchOut 0.25s var(--ease) both;
}

@keyframes storyGlitchIn {
  0% { transform: scale(0.88) translateY(10px); opacity: 0; clip-path: inset(0 0 100% 0); }
  10% { transform: scale(1.01) translateY(-2px); opacity: 1; clip-path: inset(0 0 0 0); }
  12% { transform: translateX(-4px) skewX(2deg); }
  14% { transform: translateX(3px) skewX(-1deg); }
  16% { transform: translateX(0) skewX(0); }
  30% { border-color: var(--accent); box-shadow: 0 0 30px var(--white-006); }
  100% { transform: scale(1) translateY(0); opacity: 1; border-color: var(--accent); box-shadow: 0 0 40px var(--white-008); }
}

@keyframes storyGlitchOut {
  0% { transform: scale(1); opacity: 1; }
  20% { transform: translateX(3px) skewX(-1deg); opacity: 0.9; }
  40% { transform: translateX(-5px) skewX(2deg); opacity: 0.6; }
  100% { transform: scale(0.9) translateY(8px); opacity: 0; }
}

/* ============================================================
   CARD REVEAL — used by layout.css on section.active cards
   ============================================================ */
@keyframes cardFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  #splash {
    display: none;
  }
}