/* ============================================================
   Lumen Studio — animation library
   All Ghibli-flavoured: slow, soft, sinusoidal. Honors
   prefers-reduced-motion so the site is calm for everyone.
   ============================================================ */

@keyframes drift-x {
  0%   { transform: translate3d(-12px, 0, 0); }
  50%  { transform: translate3d( 12px, 4px, 0); }
  100% { transform: translate3d(-12px, 0, 0); }
}
@keyframes drift-x-rev {
  0%   { transform: translate3d( 10px, 0, 0); }
  50%  { transform: translate3d(-14px, -6px, 0); }
  100% { transform: translate3d( 10px, 0, 0); }
}
@keyframes float-y {
  0%   { transform: translate3d(0,  6px, 0); }
  50%  { transform: translate3d(0, -8px, 0); }
  100% { transform: translate3d(0,  6px, 0); }
}
@keyframes pulse-glow {
  0%   { opacity: 0.55; transform: scale(0.96); }
  50%  { opacity: 1;    transform: scale(1.05); }
  100% { opacity: 0.55; transform: scale(0.96); }
}
@keyframes sun-pulse {
  0%   { opacity: 0.78; transform: scale(1); }
  50%  { opacity: 1;    transform: scale(1.03); }
  100% { opacity: 0.78; transform: scale(1); }
}
@keyframes fall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(40px, 110vh, 0) rotate(540deg); opacity: 0; }
}
@keyframes sway {
  0%   { transform: rotate(-2deg); }
  50%  { transform: rotate( 2deg); }
  100% { transform: rotate(-2deg); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--r, 80px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r, 80px)) rotate(-360deg); }
}
@keyframes wind {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(2deg); }
}

/* Utility classes */
.anim-drift     { animation: drift-x 18s ease-in-out infinite; }
.anim-drift-rev { animation: drift-x-rev 24s ease-in-out infinite; }
.anim-float     { animation: float-y 6s ease-in-out infinite; }
.anim-pulse     { animation: pulse-glow 4s ease-in-out infinite; }
.anim-sun       { animation: sun-pulse 9s ease-in-out infinite; transform-origin: center; }
.anim-sway      { animation: sway 6s ease-in-out infinite; transform-origin: bottom center; }
.anim-wind      { animation: wind 8s ease-in-out infinite; transform-origin: bottom center; }
.anim-orbit     { animation: orbit 22s linear infinite; }

/* Fade-up reveal — JS adds .is-in when element enters viewport */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.fade-up.is-in { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: .1s; }
.fade-up.delay-2 { transition-delay: .2s; }
.fade-up.delay-3 { transition-delay: .3s; }
.fade-up.delay-4 { transition-delay: .4s; }

/* Parallax layers — JS drives translateY based on scroll */
.parallax { will-change: transform; transition: transform .1s linear; }

/* Falling sakura — relies on JS to spawn petals */
.petal-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.petal {
  position: absolute; top: -40px;
  width: 14px; height: 14px;
  opacity: 0;
  animation: fall linear forwards;
  filter: drop-shadow(0 1px 2px rgba(150,80,40,0.18));
}

/* Twinkling fireflies — pure CSS */
.firefly {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,235,180,1), rgba(255,180,90,0.6) 50%, transparent 70%);
  box-shadow: 0 0 12px 2px rgba(255,200,120,0.6);
  animation: pulse-glow 3.4s ease-in-out infinite, float-y 7s ease-in-out infinite;
}

/* Sparkle (tiny four-point star) — pure CSS */
.sparkle {
  position: absolute;
  width: 12px; height: 12px;
  background:
    linear-gradient(90deg, transparent 46%, var(--amber) 50%, transparent 54%),
    linear-gradient(0deg,  transparent 46%, var(--amber) 50%, transparent 54%);
  animation: pulse-glow 2.4s ease-in-out infinite;
}

/* Soft pre-load shimmer for skeletons */
.shimmer {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--paper) 100%, transparent),
    color-mix(in srgb, var(--cream-deep) 90%, transparent),
    color-mix(in srgb, var(--paper) 100%, transparent));
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-drift, .anim-drift-rev, .anim-float, .anim-pulse, .anim-sun,
  .anim-sway, .anim-wind, .anim-orbit, .firefly, .sparkle, .petal,
  .shimmer {
    animation: none !important;
  }
  .fade-up { opacity: 1; transform: none; transition: none; }
}