/* ═══════════════════════════════════════════════════════
   Trijal Mart — animations.css
   Works WITH ultra.css + app.js, not against them.
   ═══════════════════════════════════════════════════════ */

/* ── 1. Scroll progress bar ─────────────────────────── */
#tm-progress {
  position: fixed;
  top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #1249d6, #4f8ef7);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(18,73,214,.6);
}

/* ── 2. Hero word-by-word reveal ────────────────────── */
/* Override ultra.css's plain kg-fade-up on h1
   with our word-split version. The .is-active check
   stays on the slide level exactly as ultra.css does. */
.kg-hero-slide.is-active .kg-hero-copy h1 {
  animation: none !important;
  opacity: 1 !important;
}
/* Wrapper per word — clips the word during slide-up */
.tm-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}
/* The actual word — starts below clip, slides up */
.tm-word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity  0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.tm-word-inner.tm-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 3. Enhance existing [data-reveal] transitions ──── */
/* ultra.css uses 28px + 0.65s. We make it more dramatic
   but keep the same [data-reveal].is-visible trigger so
   app.js works exactly as before. */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays — enhanced to feel snappier */
[data-delay="1"] { transition-delay: 0.05s !important; }
[data-delay="2"] { transition-delay: 0.12s !important; }
[data-delay="3"] { transition-delay: 0.19s !important; }
[data-delay="4"] { transition-delay: 0.26s !important; }
[data-delay="5"] { transition-delay: 0.33s !important; }
[data-delay="6"] { transition-delay: 0.40s !important; }
[data-delay="7"] { transition-delay: 0.47s !important; }
[data-delay="8"] { transition-delay: 0.54s !important; }

/* ── 4. Product cards — enhance reveal + add tilt ───── */
/* Cards get data-reveal="up" added by app.js section 13.
   We just make the reveal more dramatic and add tilt states. */
.kg-product-card[data-reveal] {
  transform: translateY(48px) scale(0.97) !important;
}
.kg-product-card[data-reveal].is-visible {
  transform: none !important;
}
/* Tilt states — JS sets inline transform, CSS defines transitions */
.kg-product-card.tm-tilt-on {
  transition:
    transform  0.07s linear,
    box-shadow 0.07s linear !important;
}
.kg-product-card.tm-tilt-off {
  transition:
    transform  0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.45s ease !important;
}

/* ── 5. Parallax image ──────────────────────────────── */
.kg-hero-media img {
  will-change: transform !important;
}

/* ── 6. Navbar hide/show ────────────────────────────── */
.store-header {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

/* ── Reduced-motion safety ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .tm-word-inner { transition: none !important; opacity: 1 !important; transform: none !important; }
  .store-header { transition: none !important; }
  #tm-progress { display: none; }
}