/*
 * Animations & Transitions
 * Scroll-triggered entrance animations, hover effects, and page transitions.
 * All animation classes are applied/triggered by assets/js/components/animations.js
 * Tekvera Initiative Theme
 */

/* ── Scroll-reveal base state ────────────────────────────────────────────── */
/* Elements start invisible and transform to visible when .is-visible is added */

[data-animate] {
  opacity: 0;
  transition-timing-function: var(--tv-ease-default);
  transition-property: opacity, transform;
  will-change: opacity, transform;
}

/* When JS detects element in viewport */
[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* Delay helpers */
[data-delay="100"]  { transition-delay: 0.10s; }
[data-delay="150"]  { transition-delay: 0.15s; }
[data-delay="200"]  { transition-delay: 0.20s; }
[data-delay="250"]  { transition-delay: 0.25s; }
[data-delay="300"]  { transition-delay: 0.30s; }
[data-delay="350"]  { transition-delay: 0.35s; }
[data-delay="400"]  { transition-delay: 0.40s; }
[data-delay="500"]  { transition-delay: 0.50s; }
[data-delay="600"]  { transition-delay: 0.60s; }
[data-delay="700"]  { transition-delay: 0.70s; }

/* ── Animation variants ───────────────────────────────────────────────────── */

/* Fade up (most common) */
[data-animate="fade-up"] {
  transform: translateY(28px);
  transition-duration: var(--tv-duration-slower);
}

/* Fade in (no transform) */
[data-animate="fade-in"] {
  transition-duration: var(--tv-duration-slow);
}

/* Slide in from left */
[data-animate="slide-left"] {
  transform: translateX(-32px);
  transition-duration: var(--tv-duration-slower);
}

/* Slide in from right */
[data-animate="slide-right"] {
  transform: translateX(32px);
  transition-duration: var(--tv-duration-slower);
}

/* Scale in */
[data-animate="scale-in"] {
  transform: scale(0.94);
  transition-duration: var(--tv-duration-slow);
}

/* Subtle scale — for images and media */
[data-animate="scale-subtle"] {
  transform: scale(0.97);
  transition-duration: var(--tv-duration-slower);
}

/* ── Hero entrance animations ─────────────────────────────────────────────── */
/* Hero elements animate on page load, not on scroll */
.tv-hero-animate {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal var(--tv-duration-slower) var(--tv-ease-default) forwards;
}

.tv-hero-animate:nth-child(1) { animation-delay: 0.1s; }
.tv-hero-animate:nth-child(2) { animation-delay: 0.22s; }
.tv-hero-animate:nth-child(3) { animation-delay: 0.34s; }
.tv-hero-animate:nth-child(4) { animation-delay: 0.46s; }
.tv-hero-animate:nth-child(5) { animation-delay: 0.58s; }

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero background scale on load */
.tv-hero__bg-img {
  animation: heroBgScale 1.2s var(--tv-ease-out) forwards;
}

@keyframes heroBgScale {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

/* ── Stat counter animation ───────────────────────────────────────────────── */
.tv-stat__number {
  transition: opacity var(--tv-duration-slow);
}

/* ── Pull quote reveal ────────────────────────────────────────────────────── */
.tv-quote-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--tv-duration-slower) var(--tv-ease-default);
}

.tv-quote-reveal.is-visible {
  clip-path: inset(0 0% 0 0);
}

/* ── Image parallax wrapper ──────────────────────────────────────────────── */
.tv-parallax-wrap {
  overflow: hidden;
}

.tv-parallax-img {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Hover lift (general reusable) ───────────────────────────────────────── */
.tv-hover-lift {
  transition:
    transform  var(--tv-duration-base) var(--tv-ease-spring),
    box-shadow var(--tv-duration-base) var(--tv-ease-default);
}

.tv-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--tv-shadow-md);
}

/* ── Underline link animation ────────────────────────────────────────────── */
.tv-animated-link {
  position: relative;
  text-decoration: none;
}

.tv-animated-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: currentColor;
  transition: width var(--tv-duration-base) var(--tv-ease-default);
}

.tv-animated-link:hover::after { width: 100%; }

/* ── Scroll indicator bounce ─────────────────────────────────────────────── */
.tv-scroll-indicator {
  animation: scrollBounce 2s var(--tv-ease-in-out) infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  55%       { transform: translateY(6px); }
}

/* ── Pulsing dot (hero pill) ─────────────────────────────────────────────── */
.tv-pulse-dot {
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

/* ── Section transition overlay ──────────────────────────────────────────── */
/* Used between sections for smooth visual flow */
.tv-section-wave {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.tv-section-wave svg {
  display: block;
  width: 100%;
}

/* ── Image hover zoom (contained) ────────────────────────────────────────── */
.tv-img-zoom {
  overflow: hidden;
}

.tv-img-zoom img {
  transition: transform var(--tv-duration-slower) var(--tv-ease-default);
}

.tv-img-zoom:hover img {
  transform: scale(1.06);
}

/* ── Stagger children (used via JS adding delay to sibling elements) ─────── */
.tv-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--tv-duration-slower) var(--tv-ease-default),
    transform var(--tv-duration-slower) var(--tv-ease-default);
}

.tv-stagger.is-visible > * { opacity: 1; transform: none; }
.tv-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.tv-stagger.is-visible > *:nth-child(2) { transition-delay: 0.09s; }
.tv-stagger.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.tv-stagger.is-visible > *:nth-child(4) { transition-delay: 0.27s; }
.tv-stagger.is-visible > *:nth-child(5) { transition-delay: 0.36s; }
.tv-stagger.is-visible > *:nth-child(6) { transition-delay: 0.44s; }

/* ── Reduce motion override ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  .tv-hero-animate,
  .tv-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}