/* ==========================================================================
   Gulmarg Ski Club — animations.css
   Scroll reveals, keyframes, atmosphere (snow / fog / clouds), magnetic UI
   All animated properties are transform/opacity for GPU compositing.
   ========================================================================== */

/* ------------------------------------------------------- scroll reveals */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.92); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children — add data-stagger to a parent */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-stagger].is-visible > *       { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.35s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.45s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.55s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 0.65s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 0.75s; }

/* Word-by-word heading animation — spans injected by JS */
[data-split] .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
[data-split] .split-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
}
[data-split].is-visible .split-word > span { transform: translateY(0); }

/* Image curtain reveal */
.img-reveal {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1.1s var(--ease-inout);
  z-index: 2;
}
.img-reveal.is-visible::after { transform: scaleY(0); }
.img-reveal img {
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-out);
}
.img-reveal.is-visible img { transform: scale(1); }

/* ------------------------------------------------------------ keyframes */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

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

@keyframes scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}

@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* --------------------------------------------------------- atmosphere */
/* Snow canvas sits above content in hero, below UI text */
.fx-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* Fog layers — translucent drifting gradients */
.fx-fog {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 40%;
  pointer-events: none;
  background: radial-gradient(50% 90% at 50% 100%, rgba(255, 255, 255, 0.35), transparent 70%);
  animation: drift-x 18s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 4;
}
.fx-fog--slow { animation-duration: 30s; opacity: 0.6; }

/* Floating cloud blobs for section backgrounds */
.fx-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  background: rgba(42, 36, 200, 0.10);
  animation: float-y 12s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------------ magnetic */
[data-magnetic] {
  transition: transform 0.25s var(--ease-out);
  will-change: transform;
}

/* Mouse-follow glow orb (desktop only, added by JS) */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42, 36, 200, 0.07), transparent 65%);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

/* -------------------------------------------------- horizontal scroller */
.hscroll {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  padding: 0.5rem 0.2rem 1.4rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-primary) transparent;
}
.hscroll > * {
  flex: 0 0 min(78vw, 380px);
  scroll-snap-align: start;
}

/* ------------------------------------------------------ scroll indicator */
.scroll-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.scroll-indicator__mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.scroll-indicator__mouse::before {
  content: "";
  width: 4px;
  height: 8px;
  border-radius: 3px;
  background: var(--c-white);
  animation: scroll-dot 1.8s var(--ease-inout) infinite;
}

/* Progress bar at very top of viewport */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 1200;
  background: transparent;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--g-brand);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}