/* Anand & Palak — gentle ambient motion + scroll reveals.
   Only transform / opacity / filter are animated. Each hero keeps its own layer,
   so you can retarget or replace any of these presets per element. --i (layer index)
   desyncs siblings so nothing moves in lockstep. */

/* Hanging things sway from the top; trees sway from the base. */
@keyframes amb-hang   { 0%,100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
@keyframes amb-tree   { 0%,100% { transform: rotate(-0.7deg); } 50% { transform: rotate(0.7deg); } }
@keyframes amb-glow   { 0%,100% { filter: brightness(1); }      50% { filter: brightness(1.14); } }
@keyframes amb-flicker{ 0%,100% { filter: brightness(1); } 18% { filter: brightness(1.2); }
                        37% { filter: brightness(0.93); } 58% { filter: brightness(1.23); }
                        78% { filter: brightness(1.02); } }
@keyframes amb-shimmer{ 0%,100% { filter: brightness(1) saturate(1); }
                        50% { filter: brightness(1.08) saturate(1.12); } }
@keyframes amb-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.5%); } }

.amb-hang    { transform-origin: 50% 0;   animation: amb-hang 6s ease-in-out infinite; }
.amb-tree    { transform-origin: 50% 100%; animation: amb-tree 7.5s ease-in-out infinite; }
.amb-glow    { animation: amb-glow 4.6s ease-in-out infinite; }
.amb-flicker { animation: amb-flicker 3.2s ease-in-out infinite; }
.amb-shimmer { animation: amb-shimmer 5s ease-in-out infinite; }
.amb-float   { animation: amb-float 8s ease-in-out infinite; }

/* Combined presets (one `animation` property can't merge across classes). */
.amb-hang.amb-glow {
  transform-origin: 50% 0;
  animation: amb-hang 6s ease-in-out infinite, amb-glow 4.6s ease-in-out infinite;
}
.amb-glow.amb-flicker {
  animation: amb-glow 4.6s ease-in-out infinite, amb-flicker 3.2s ease-in-out infinite;
}

.hero { animation-delay: calc(var(--i, 0) * -0.7s); }

/* Scroll reveal for the image text lines (only when JS is present). */
.js .reveal {
  opacity: 0;
  transform: translateY(2.2%);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.05s);
}
.js .reveal.in { opacity: 1; transform: none; }

/* Star twinkle sparkles injected over the night sky (slide 3). */
.sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 240, 200, 0.7) 40%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  animation: twinkle var(--t, 3s) ease-in-out var(--td, 0s) infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.9; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none !important; }
  .sparkle { display: none; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}