/* ==========================================================================
   ANIMATIONS — keyframes, ambient particle layers, reveals.
   All ambient motion is disabled for prefers-reduced-motion visitors
   (see the override block at the bottom).
   ========================================================================== */

/* ---------- ambient: layer & particles ---------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* rose petals — drifting, swaying, slowly falling */
.petal {
  position: absolute;
  top: -6vh;
  left: var(--x);
  width: calc(14px * var(--s));
  height: calc(16px * var(--s));
  background: radial-gradient(circle at 30% 25%, #f0a5b8, var(--rose-deep) 70%);
  border-radius: 100% 4px 100% 4px;
  opacity: var(--o);
  animation:
    fall var(--d) linear var(--delay) infinite,
    sway var(--t) ease-in-out var(--delay) infinite;
}
.petal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset -1px -1px 2px rgba(120, 10, 40, 0.45);
}

/* cherry blossoms — pale pink, five-petal cross */
.blossom {
  position: absolute;
  top: -5vh;
  left: var(--x);
  width: calc(11px * var(--s));
  height: calc(11px * var(--s));
  background:
    radial-gradient(circle at 50% 0%, #ffd9e3 45%, transparent 48%),
    radial-gradient(circle at 100% 50%, #ffd9e3 45%, transparent 48%),
    radial-gradient(circle at 50% 100%, #ffd9e3 45%, transparent 48%),
    radial-gradient(circle at 0% 50%, #ffd9e3 45%, transparent 48%),
    radial-gradient(circle, #ffc3d4 40%, transparent 46%);
  opacity: calc(var(--o) * 0.9);
  animation:
    fall var(--d) linear var(--delay) infinite,
    sway var(--t) ease-in-out var(--delay) infinite,
    spin calc(var(--d) * 1.4) linear var(--delay) infinite;
}

/* golden sparks — tiny glints rising like embers */
.spark {
  position: absolute;
  bottom: -4vh;
  left: var(--x);
  width: calc(3px * var(--s));
  height: calc(3px * var(--s));
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px 1px rgba(255, 217, 142, 0.8);
  opacity: 0;
  animation:
    rise var(--d) ease-in var(--delay) infinite,
    twinkle calc(var(--t) * 1.6) ease-in-out var(--delay) infinite;
}

/* stars — calm background pinpricks */
.star {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(2px * var(--s));
  height: calc(2px * var(--s));
  border-radius: 50%;
  background: #fff6e4;
  opacity: var(--o);
  animation: twinkle calc(2.6s + var(--t) * 1.2) ease-in-out var(--delay) infinite;
}

/* soft bokeh lights — Diwali string lights feel */
.bokeh {
  position: absolute;
  bottom: 12vh;
  left: var(--x);
  width: calc(30px * var(--s));
  height: calc(30px * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 110, 0.55), transparent 70%);
  filter: blur(6px);
  opacity: calc(var(--o) * 0.7);
  animation: bokeh-breathe calc(4s + var(--t)) ease-in-out var(--delay) infinite;
}

/* tiny ambient hearts */
.ambient-heart {
  position: absolute;
  bottom: -4vh;
  left: var(--x);
  color: var(--rose);
  opacity: 0;
  font-size: calc(12px * var(--s));
  animation:
    rise calc(var(--d) * 1.3) linear var(--delay) infinite,
    sway var(--t) ease-in-out var(--delay) infinite;
}

/* ---------- fx: sparkles burst / golden rain / floating hearts ---------- */
.fx-spark {
  position: fixed;
  z-index: 52;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px 2px rgba(255, 217, 142, 0.85);
  pointer-events: none;
  animation: spark-out var(--sd, 0.9s) cubic-bezier(0.1, 0.7, 0.4, 1) forwards;
}

.fx-rain {
  position: absolute;
  top: -3vh;
  left: var(--x);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px 2px rgba(255, 217, 142, 0.7);
  animation: rain-fall var(--rd, 3s) linear var(--rdel, 0s) forwards;
}

.fx-heart {
  position: absolute;
  bottom: -6vh;
  left: var(--x);
  font-size: calc(16px * var(--hs, 1));
  animation: heart-rise var(--hd, 5s) ease-in forwards;
  filter: drop-shadow(0 0 6px rgba(226, 106, 141, 0.6));
}

/* ---------- scroll reveals ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease var(--reveal-delay, 0s), transform 0.9s cubic-bezier(0.16, 0.84, 0.28, 1) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- keyframes ---------- */
@keyframes fall {
  from {
    transform: translateY(-6vh);
  }
  to {
    transform: translateY(112vh);
  }
}
@keyframes sway {
  0%,
  100% {
    margin-left: 0;
    rotate: -14deg;
  }
  50% {
    margin-left: 7vw;
    rotate: 16deg;
  }
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
@keyframes rise {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-116vh);
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: calc(var(--o, 0.6) * 0.35);
  }
  50% {
    opacity: var(--o, 0.9);
  }
}
@keyframes bokeh-breathe {
  0%,
  100% {
    opacity: calc(var(--o) * 0.35);
    transform: scale(0.9);
  }
  50% {
    opacity: calc(var(--o) * 0.85);
    transform: scale(1.15);
  }
}
@keyframes flame-dance {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  30% {
    transform: scale(1.06, 0.94) translateY(0.5px);
  }
  60% {
    transform: scale(0.95, 1.08) translateY(-0.5px);
  }
}
@keyframes flame-sway {
  0%,
  100% {
    rotate: -3deg;
  }
  50% {
    rotate: 3.5deg;
  }
}
@keyframes halo-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.12);
  }
}
@keyframes garland-sway {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
@keyframes spark-out {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx, 30px), var(--dy, -50px)) scale(0.2);
    opacity: 0;
  }
}
@keyframes rain-fall {
  from {
    transform: translateY(-4vh) translateX(0);
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  to {
    transform: translateY(104vh) translateX(3vw);
    opacity: 0;
  }
}
@keyframes heart-rise {
  0% {
    transform: translateY(0) scale(0.7) rotate(-8deg);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-108vh) scale(1.15) rotate(10deg);
    opacity: 0;
  }
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}
@keyframes note-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
@keyframes heart-glow {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.18);
  }
}
@keyframes sprite-play {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(-1 * var(--sheet-width, 0px)) 0;
  }
}

/* spritesheet helper (only used when content.js declares type "sheet") */
.anime-sprite {
  animation-timing-function: steps(1);
}

/* ---------- reduced motion: stillness ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    scroll-behavior: auto !important;
  }
  .ambient {
    display: none;
  }
  .petal,
  .blossom,
  .spark,
  .star,
  .bokeh,
  .ambient-heart {
    display: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .diya .flame {
    opacity: 1;
    transform: scale(1);
  }
  .timeline-thread {
    transform: scaleY(1);
  }
}