/* ===== Keyframes ===== */

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

@keyframes logo-rotate {
  0%, 100% { transform: rotateY(-4deg) rotateX(2deg); }
  50%      { transform: rotateY(4deg)  rotateX(-2deg); }
}

@keyframes halo-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

@keyframes ray-spin {
  to { transform: rotate(360deg); }
}

@keyframes sparkle-twinkle {
  0%, 100%   { opacity: 0;   transform: scale(0.5) rotate(0deg); }
  20%, 60%   { opacity: 0.95; transform: scale(1) rotate(45deg); }
  80%        { opacity: 0.3; transform: scale(0.8) rotate(90deg); }
}

@keyframes drift-x {
  0%   { transform: translateX(0); }
  100% { transform: translateX(120vw); }
}

@keyframes drift-x-rev {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-120vw); }
}

@keyframes panel-flip-in {
  0% {
    opacity: 0;
    transform: perspective(1600px) rotateY(-10deg) translate3d(0, 24px, -60px);
    filter: blur(2px);
  }
  60% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
    transform: perspective(1600px) rotateY(0) translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@keyframes panel-flip-out {
  0% {
    opacity: 1;
    transform: perspective(1600px) rotateY(0) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: perspective(1600px) rotateY(10deg) translate3d(0, -24px, -60px);
  }
}

/* Scroll-reveal: starts hidden, JS adds .in to play */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-soft),
              transform 700ms var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"].in { transition-delay:  80ms; }
.reveal[data-delay="2"].in { transition-delay: 160ms; }
.reveal[data-delay="3"].in { transition-delay: 240ms; }
.reveal[data-delay="4"].in { transition-delay: 320ms; }
.reveal[data-delay="5"].in { transition-delay: 400ms; }

/* Reveal variants */
.reveal-left  { transform: translateX(-24px); }
.reveal-left.in  { transform: translateX(0); }
.reveal-right { transform: translateX(24px); }
.reveal-right.in { transform: translateX(0); }

/* Pointer-tracked tilt — set via JS on .tilt elements */
.tilt {
  transition: transform 600ms var(--ease-soft);
  will-change: transform;
}

/* Parallax sparkle layer offsets applied as CSS vars via JS */
.sparkle-field {
  --px: 0px;
  --py: 0px;
}
.sparkle-field .sparkle {
  transform: translate3d(calc(var(--px) * var(--p, 1)),
                         calc(var(--py) * var(--p, 1)), 0);
  transition: transform 700ms var(--ease-soft);
}

/* ===== Reduced motion: smooth, calm, sensory-friendly ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
    scroll-behavior: auto !important;
  }
  /* Replace transform-based reveals with simple fade */
  .reveal { transform: none !important; }
  .reveal.in { transform: none !important; }
  /* Freeze drifting decorations but keep them visible */
  .cloud-bg, .sun-rays, .hero-logo-wrap, .sparkle-field .sparkle, .halo {
    animation: none !important;
    transform: none !important;
  }
  .sparkle-field .sparkle { opacity: 0.6; }
  .hero-logo-wrap {
    /* preserve gentle drop shadow only */
    filter: drop-shadow(0 18px 24px rgba(255,157,61,0.25));
  }
  .panel[data-transition] .panel-inner {
    animation: panel-fade-in 320ms var(--ease-soft) both;
  }
  .qr-card { transform: none !important; }
  .qr-card:hover { transform: scale(1.01); }
  .pillar:hover, .event-card:hover, .contact-card:hover {
    transform: translateY(-2px);
  }
}

@keyframes panel-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}