/* ==========================================
   ANIMATIONS — SCROLL REVEAL VARIANTS
========================================== */

/* Base hidden state */
[data-a]{opacity:0;will-change:transform,opacity}

/* Variants */
[data-a="fade-up"]   {transform:translateY(55px)}
[data-a="fade-down"] {transform:translateY(-40px)}
[data-a="fade-left"] {transform:translateX(60px)}
[data-a="fade-right"]{transform:translateX(-60px)}
[data-a="zoom"]      {transform:scale(.82)}
[data-a="zoom-tilt"] {transform:scale(.85) rotate(-3deg)}
[data-a="clip-up"]{
  transform:translateY(30px);
  clip-path:inset(0 0 100% 0);
}
[data-a="blur"]{
  transform:translateY(25px);
  filter:blur(12px);
}

/* Active state (JS adds .aon) */
[data-a].aon{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0% 0) !important;
  filter:none !important;
  transition:
    opacity    .75s cubic-bezier(.4,0,.2,1) var(--ad,0s),
    transform  .75s cubic-bezier(.4,0,.2,1) var(--ad,0s),
    clip-path  .75s cubic-bezier(.4,0,.2,1) var(--ad,0s),
    filter     .6s  cubic-bezier(.4,0,.2,1) var(--ad,0s);
}

/* ==========================================
   SPLIT TEXT REVEAL
========================================== */
.split-wrap{overflow:hidden;display:inline-block}
.split-word{
  display:inline-block;
  transform:translateY(105%);
  opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1) var(--sw,0s),
             opacity    .5s ease var(--sw,0s);
}
.split-word.aon{transform:translateY(0);opacity:1}

/* ==========================================
   SECTION LINE ACCENT
========================================== */
.sec-line{
  display:block;
  width:0;height:3px;
  background:linear-gradient(90deg,var(--burg),var(--burg-l),transparent);
  border-radius:3px;
  margin-bottom:1.2rem;
  transition:width .9s cubic-bezier(.4,0,.2,1) var(--ad,0s);
}
.sec-line.aon{width:72px}

/* ==========================================
   COUNTER PULSE (on land)
========================================== */
@keyframes cpulse{
  0%{transform:scale(1)}
  30%{transform:scale(1.06)}
  60%{transform:scale(.97)}
  100%{transform:scale(1)}
}
.stat-n.pulse{animation:cpulse .5s ease}

/* ==========================================
   3D CARD TILT
========================================== */
.tilt{
  transform-style:preserve-3d;
  transition:box-shadow .3s ease;
}
.tilt:hover{
  box-shadow:0 20px 60px rgba(128,0,32,.18);
}
.tilt-inner{
  transform:translateZ(12px);
  transition:transform .3s ease;
}

/* ==========================================
   PARALLAX LAYER
========================================== */
.plx{will-change:transform}

/* ==========================================
   PROGRESS BARS (why-section)
========================================== */
.why-it{position:relative;overflow:hidden}
.why-it::after{
  content:'';
  position:absolute;
  bottom:0;inset-inline-start:0;
  width:0;height:2px;
  background:var(--burg);
  transition:width .8s cubic-bezier(.4,0,.2,1) var(--ad,0s);
  border-radius:0 2px 2px 0;
}
.why-it.aon::after{width:100%}

/* ==========================================
   JOURNEY NUMBER SPIN
========================================== */
@keyframes nspin{
  0%{transform:rotateY(90deg);opacity:0}
  100%{transform:rotateY(0deg);opacity:1}
}
.snum[data-a]{transform-style:preserve-3d}
.snum.aon{animation:nspin .6s cubic-bezier(.16,1,.3,1) var(--ad,0s) both}

/* ==========================================
   MARQUEE (stats floating label)
========================================== */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee-wrap{
  overflow:hidden;white-space:nowrap;
  padding:.6rem 0;
  background:var(--burg-d);
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.marquee-track{
  display:inline-block;
  animation:marquee 18s linear infinite;
  font-family:var(--font-en);font-weight:700;
  font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.marquee-track span{margin:0 2rem}