/* =========================================================
   Safalta Academy — Animations
   Restrained by design: motion supports comprehension
   (things arriving in reading order, a route climbing to a
   summit) rather than decorating for its own sake.
   Everything here is disabled under prefers-reduced-motion.
   ========================================================= */

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal].revealed{opacity:1; transform:none;}

/* If JS never runs, content must still be visible. */
.no-js [data-reveal]{opacity:1; transform:none;}

/* In the Elementor editor, show everything immediately —
   otherwise widgets look broken while you're building. */
body.elementor-editing [data-reveal],
body.elementor-editor-active [data-reveal]{opacity:1; transform:none;}

/* ---------- Page-load sequence (hero) ---------- */
.hero .eyebrow{animation:fade-up .7s cubic-bezier(.22,.61,.36,1) both;}
.hero h1{animation:fade-up .8s cubic-bezier(.22,.61,.36,1) .08s both;}
.hero-sub{animation:fade-up .8s cubic-bezier(.22,.61,.36,1) .18s both;}
.hero-ctas{animation:fade-up .8s cubic-bezier(.22,.61,.36,1) .28s both;}
.hero-search{animation:fade-up .8s cubic-bezier(.22,.61,.36,1) .36s both;}

@keyframes fade-up{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:none;}
}

/* ---------- The summit ascent line draws itself ---------- */
.hero-mountain .range-far,
.hero-mountain .range-mid,
.hero-mountain .range-near{
  animation:range-rise 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.hero-mountain .range-mid{animation-delay:.1s;}
.hero-mountain .range-near{animation-delay:.2s;}

@keyframes range-rise{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:inherit; transform:none;}
}

.hero-mountain.is-animated .ascent-line{
  stroke-dasharray:4 9;
  stroke-dashoffset:400;
  animation:ascend 2.6s cubic-bezier(.4,0,.2,1) .6s forwards;
}
@keyframes ascend{to{stroke-dashoffset:0;}}

.hero-mountain.is-animated .summit-marker{
  opacity:0;
  transform-origin:900px 40px;
  animation:plant-flag .6s cubic-bezier(.34,1.56,.64,1) 2.9s forwards;
}
@keyframes plant-flag{
  0%{opacity:0; transform:scale(.4) translateY(8px);}
  100%{opacity:1; transform:scale(1) translateY(0);}
}

.hero-mountain.is-animated .summit-label{
  opacity:0;
  animation:fade-in .8s ease 3.2s forwards;
}
@keyframes fade-in{to{opacity:1;}}

/* ---------- Prayer flags flutter ---------- */
.prayer-flags .flag{
  transform-origin:left center;
  animation:flutter 3.4s ease-in-out infinite;
  animation-delay:calc(var(--flag-i) * -0.18s);
}
@keyframes flutter{
  0%,100%{transform:skewY(0deg) scaleY(1);}
  35%{transform:skewY(2.5deg) scaleY(.96);}
  70%{transform:skewY(-2deg) scaleY(1.02);}
}

/* ---------- Diya flame ---------- */
.diya-flame{transform-origin:60px 52px; animation:flicker 2.2s ease-in-out infinite;}
.diya-flame-inner{transform-origin:60px 50px; animation:flicker 1.7s ease-in-out infinite reverse;}
.diya-glow{animation:glow-pulse 2.8s ease-in-out infinite;}
@keyframes flicker{
  0%,100%{transform:scaleY(1) scaleX(1);}
  30%{transform:scaleY(1.08) scaleX(.94) translateX(.5px);}
  60%{transform:scaleY(.95) scaleX(1.04) translateX(-.5px);}
}
@keyframes glow-pulse{
  0%,100%{opacity:.1; r:22;}
  50%{opacity:.2; r:26;}
}

/* ---------- Counter numerals ---------- */
.stat-num [data-count]{font-variant-numeric:tabular-nums;}

/* ---------- Card hover micro-interactions ---------- */
.program-card{transition:background .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);}
.program-card:hover{transform:translateY(-3px);}

.feature-card{transition:background .25s ease, transform .25s ease;}
.feature-card:hover{transform:translateY(-2px);}
.feature-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.feature-card:hover .feature-icon{transform:scale(1.08) rotate(-3deg);}

.doc-card, .award-item, .review-card{transition:transform .25s ease, box-shadow .25s ease;}
.doc-card:hover, .award-item:hover, .review-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(14,21,32,.07);
}

.btn{transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;}
.btn-primary:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

/* Progress bars fill when scrolled into view */
.bar-fill{width:0 !important; transition:width 1.1s cubic-bezier(.22,.61,.36,1);}
.bar-fill.filled{width:var(--bar-width) !important;}

/* Timetable rows */
.timetable tbody tr{transition:background .2s ease;}
.timetable tbody tr:hover{background:var(--ivory);}

/* Live status pill pulses */
.status-live{position:relative;}
.status-live::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--crimson); margin-right:6px; vertical-align:middle;
  animation:pulse 1.8s ease-in-out infinite;
}

/* Nav dropdown */
.dropdown{
  animation:dropdown-in .18s cubic-bezier(.22,.61,.36,1);
}
@keyframes dropdown-in{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:none;}
}

/* Language switch */
.lang-switch a{transition:background .18s ease, color .18s ease;}

/* Section motifs sit quietly behind content */
.motif-wrap{width:100%;}
.nepal-motif{color:var(--navy); max-width:100%; height:auto;}
.motif-divider{padding:0; margin:0; line-height:0;}

/* =========================================================
   Reduced motion: honour the system setting completely.
   Content still appears — it just arrives without movement.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important;}
  .hero .eyebrow, .hero h1, .hero-sub, .hero-ctas, .hero-search,
  .hero-mountain .range-far, .hero-mountain .range-mid, .hero-mountain .range-near{
    animation:none !important;
  }
  .hero-mountain.is-animated .ascent-line{stroke-dashoffset:0 !important; animation:none !important;}
  .hero-mountain.is-animated .summit-marker,
  .hero-mountain.is-animated .summit-label{opacity:1 !important; animation:none !important; transform:none !important;}
  .prayer-flags .flag, .diya-flame, .diya-flame-inner, .diya-glow,
  .status-live::before, .notify-dot{animation:none !important;}
  .bar-fill{width:var(--bar-width) !important; transition:none !important;}
  .program-card:hover, .feature-card:hover, .doc-card:hover,
  .award-item:hover, .review-card:hover, .btn-primary:hover{transform:none !important;}
  .dropdown{animation:none !important;}
}