/* =========================================================
   Animations — cinematic motion language
   ========================================================= */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes softPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shutterClose {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes starIn {
  to { opacity: 0.9; }
}

@keyframes typeCaret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.7; }
  42% { opacity: 1; }
  60% { opacity: 0.85; }
  61% { opacity: 1; }
}

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes confettiFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@keyframes glowBreath {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 168, 106, 0.15); }
  50% { box-shadow: 0 0 40px rgba(201, 168, 106, 0.35); }
}

@keyframes candleFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.95; }
  50% { transform: scaleY(1.08) scaleX(0.92); opacity: 1; }
}

@keyframes smokeRise {
  0% { transform: translateY(0) scale(1); opacity: 0.5; }
  100% { transform: translateY(-40px) scale(1.4); opacity: 0; }
}

@keyframes filmScratch {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.15; }
  20% { transform: translateX(2px); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes comicPop {
  0% { transform: scale(0.6) rotate(-4deg); opacity: 0; }
  60% { transform: scale(1.05) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes labScan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes terminalBlink {
  50% { border-color: transparent; }
}

@keyframes orbit {
  from { transform: rotate(0deg) translateX(40px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
}

@keyframes zoomPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes letterOpen {
  from { transform: rotateX(18deg) translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes barFill {
  from { width: 0; }
}

@keyframes glitchSkew {
  0%, 100% { transform: none; filter: none; }
  20% { transform: skewX(-2deg) translateX(2px); filter: hue-rotate(20deg); }
  40% { transform: skewX(1deg) translateX(-2px); }
  60% { transform: none; }
}

/* Utility classes */
.anim-fade-up { animation: fadeUp 1s var(--ease-out) both; }
.anim-fade-in { animation: fadeIn 1.2s var(--ease-out) both; }
.anim-pulse { animation: softPulse 2.8s ease-in-out infinite; }
.anim-float { animation: floatY 5s ease-in-out infinite; }
.anim-glow { animation: glowBreath 3.5s ease-in-out infinite; }
.anim-flicker { animation: flicker 4s linear infinite; }
.anim-shake { animation: shakeX 0.45s ease; }
.anim-comic { animation: comicPop 0.55s var(--ease-out) both; }
.anim-letter { animation: letterOpen 1s var(--ease-out) both; transform-origin: top center; perspective: 800px; }
.anim-glitch { animation: glitchSkew 0.5s steps(2) 2; }

.typewriter-caret::after {
  content: '▌';
  margin-left: 2px;
  animation: typeCaret 1s steps(1) infinite;
  color: var(--altin);
}

/* Opening sequence */
.opening-line {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}

.opening-line.is-shown {
  opacity: 1;
  transform: none;
}

.opening-line.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
}

/* Confetti pieces */
.confetti-piece {
  position: fixed;
  top: -8px;
  width: 8px;
  height: 10px;
  z-index: 8600;
  pointer-events: none;
  animation: confettiFall 1.8s linear forwards;
  border-radius: 1px;
}

/* Heart particle */
.heart-p {
  position: fixed;
  z-index: 8600;
  pointer-events: none;
  font-size: 14px;
  color: var(--kirmizi);
  animation: confettiFall 1.6s ease-in forwards;
  opacity: 0.85;
}

/* Film vignette */
.vignette::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
}

.film-scratch::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: 2px;
  left: 30%;
  background: rgba(255, 255, 255, 0.15);
  z-index: 3;
  pointer-events: none;
  animation: filmScratch 3.5s linear infinite;
}

/* Magnetic hover hint (desktop) */
.magnetic {
  display: inline-flex;
  transition: transform 0.15s linear;
}

/* Page-specific atmospheres injected via body class */
body.theme-void { background: #000; }
body.theme-november {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(107, 29, 42, 0.35), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(201, 168, 106, 0.08), transparent 45%),
    var(--ink);
}
body.theme-break {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(61, 16, 24, 0.7), transparent 55%),
    #080506;
}
body.theme-silence {
  background: #050508;
  color: rgba(243, 232, 216, 0.72);
}
body.theme-comic {
  background:
    radial-gradient(circle at 15% 20%, rgba(40, 70, 160, 0.35), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(158, 42, 58, 0.45), transparent 42%),
    #0b0a12;
}
body.theme-september {
  background:
    linear-gradient(160deg, #1a120c 0%, #0a0708 45%, #1c1014 100%);
}
body.theme-lab {
  background: #070b0e;
  color: #b8d4c8;
  font-family: var(--font-mono);
}
body.theme-game {
  background:
    radial-gradient(ellipse at center, #1a1018 0%, #08060a 70%);
}
body.theme-archive {
  background: #0c0b09;
}
body.theme-secret {
  background: #06080c;
  font-family: var(--font-mono);
}
body.theme-letter {
  background: #1a1510;
  color: #e8dcc8;
}
body.theme-cake {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(107, 29, 42, 0.4), transparent 55%),
    #050306;
}
body.theme-final {
  background: #000;
}
body.theme-time {
  background:
    radial-gradient(circle at 50% 40%, rgba(80, 40, 90, 0.2), transparent 50%),
    #07060c;
}
body.theme-map {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(61, 16, 24, 0.4), transparent 50%),
    var(--ink);
}

@keyframes daisyRise {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--fan)) rotateX(58deg) translateY(70px) scale(0.35);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(var(--fan)) rotateX(-8deg) translateY(0) scale(var(--sc, 1));
  }
}

@keyframes daisySway {
  0%, 100% { transform: rotateY(-14deg) rotateZ(-2deg); }
  50% { transform: rotateY(16deg) rotateZ(3deg); }
}

@keyframes petalOpen {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--p) * 30deg)) scaleY(0.12);
  }
  100% {
    opacity: 1;
    transform: rotate(calc(var(--p) * 30deg)) scaleY(1);
  }
}

@keyframes wrapIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(24px) rotateX(28deg);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotateX(0);
  }
}

@keyframes glowIn {
  from { opacity: 0; transform: translateX(-50%) scale(0.6); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes ilyDrift {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.7);
  }
  12% { opacity: 0.85; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), -420px) scale(1);
  }
}

@keyframes loveFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) rotate(var(--rot, 0deg)) scale(0.85);
  }
  8% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), -115vh) rotate(calc(var(--rot, 0deg) + 18deg)) scale(1.05);
  }
}

@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 8px #ff4fd8,
      0 0 18px rgba(255, 79, 216, 0.45),
      0 0 32px rgba(255, 196, 80, 0.15);
  }
  50% {
    box-shadow:
      0 0 14px #fff4a8,
      0 0 28px rgba(255, 79, 216, 0.85),
      0 0 52px rgba(255, 80, 180, 0.45);
  }
}

@keyframes neonFlicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  46% { opacity: 1; }
  50% { opacity: 0.55; filter: brightness(1.4); }
  54% { opacity: 1; }
}

@keyframes noteIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}