/**
 * TECTRANZ — ANIMATIONS & SCROLL EFFECTS
 */

/* ── REVEAL ON SCROLL ─────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--anim-reveal-y));
  transition:
    opacity var(--tr-slow),
    transform var(--tr-slow);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(calc(-1 * var(--anim-reveal-y)));
}

[data-reveal="right"] {
  transform: translateX(var(--anim-reveal-y));
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal].revealed {
  opacity: 1;
  transform: none !important;
}

/* Stagger delays via data-delay */
[data-delay="1"] { transition-delay: calc(var(--anim-stagger) * 1); }
[data-delay="2"] { transition-delay: calc(var(--anim-stagger) * 2); }
[data-delay="3"] { transition-delay: calc(var(--anim-stagger) * 3); }
[data-delay="4"] { transition-delay: calc(var(--anim-stagger) * 4); }
[data-delay="5"] { transition-delay: calc(var(--anim-stagger) * 5); }
[data-delay="6"] { transition-delay: calc(var(--anim-stagger) * 6); }

/* ── COUNTER ANIMATION ────────────────────────── */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── HERO ENTRANCE ────────────────────────────── */
.hero-enter {
  animation: heroEnter 0.8s var(--ease) forwards;
}

.hero-enter-delay-1 { animation-delay: 0.1s; opacity: 0; }
.hero-enter-delay-2 { animation-delay: 0.25s; opacity: 0; }
.hero-enter-delay-3 { animation-delay: 0.4s; opacity: 0; }
.hero-enter-delay-4 { animation-delay: 0.55s; opacity: 0; }

@keyframes heroEnter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── GRADIENT SHIFT ───────────────────────────── */
.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── FLOATING ANIMATION ───────────────────────── */
.float-anim {
  animation: float 6s ease-in-out infinite;
}

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

/* ── GLOW PULSE ───────────────────────────────── */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(35,0,232,0.2); }
  50%       { box-shadow: 0 0 40px rgba(35,0,232,0.45); }
}

/* ── PROGRESS BAR ─────────────────────────────── */
.progress-bar {
  height: 4px;
  background: var(--c-gray-100);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--g-blue);
  border-radius: var(--r-full);
  width: 0;
  transition: width 1.2s var(--ease) 0.3s;
}

.progress-bar.animated .progress-bar__fill {
  width: var(--progress, 100%);
}

/* ── SCROLL INDICATOR ─────────────────────────── */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  animation: scrollBounce 2s ease-in-out infinite;
  opacity: 0.6;
}

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

/* ── TYPING CURSOR ────────────────────────────── */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--c-blue);
  margin-left: 2px;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ── PAGE TRANSITION ──────────────────────────── */
.page-transition {
  animation: pageIn 0.4s var(--ease) forwards;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SHIMMER SKELETON ─────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-gray-100) 0%,
    var(--c-gray-50) 50%,
    var(--c-gray-100) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-md);
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── DOT PULSE BADGE ──────────────────────────── */
@keyframes dotPulse {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

.live-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.live-dot::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c-green-vivid);
  animation: dotPulse 1.5s ease-out infinite;
}

/* ── HOVER SHIMMER ON CARDS ───────────────────── */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.12) 50%,
    transparent 60%
  );
  transform: skewX(-15deg);
  transition: left 0.6s var(--ease);
}

.card-shine:hover::after {
  left: 120%;
}

/* ── REDUCED MOTION ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].revealed,
  .hero-enter,
  .float-anim,
  .glow-pulse,
  .gradient-shift,
  .scroll-indicator {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}