/* ============================================================
   TRIVIKRA TECH 4.0 — ANIMATIONS
   File: assets/css/animations.css
   
   Scroll reveal, hover micro-interactions, and transitions.
   All subtle and minimal — no flashy effects.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   1. SCROLL REVEAL ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* Base hidden state for all reveal elements */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Fade Up (default) */
[data-reveal="fade-up"] {
  transform: translateY(24px);
}

[data-reveal="fade-up"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Down */
[data-reveal="fade-down"] {
  transform: translateY(-24px);
}

[data-reveal="fade-down"].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Left */
[data-reveal="fade-left"] {
  transform: translateX(-24px);
}

[data-reveal="fade-left"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Fade Right */
[data-reveal="fade-right"] {
  transform: translateX(24px);
}

[data-reveal="fade-right"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale Up */
[data-reveal="scale-up"] {
  transform: scale(0.96);
}

[data-reveal="scale-up"].revealed {
  opacity: 1;
  transform: scale(1);
}

/* Slide Left */
[data-reveal="slide-left"] {
  transform: translateX(-40px);
}

[data-reveal="slide-left"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Slide Right */
[data-reveal="slide-right"] {
  transform: translateX(40px);
}

[data-reveal="slide-right"].revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Delay modifiers (applied via data-delay attribute in JS) */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }

/* Stagger Reveal */
[data-stagger] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

[data-stagger].revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ════════════════════════════════════════════════════════════
   2. HERO ANIMATIONS
   ════════════════════════════════════════════════════════════ */
.hero-animate-1 { animation: heroFadeUp 0.6s 0.2s both; }
.hero-animate-2 { animation: heroFadeUp 0.6s 0.35s both; }
.hero-animate-3 { animation: heroFadeUp 0.6s 0.5s both; }
.hero-animate-4 { animation: heroFadeUp 0.6s 0.65s both; }
.hero-animate-5 { animation: heroFadeUp 0.6s 0.8s both; }

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


/* ════════════════════════════════════════════════════════════
   3. COUNTER ANIMATION
   ════════════════════════════════════════════════════════════ */
[data-counter] {
  display: inline-block;
}


/* ════════════════════════════════════════════════════════════
   4. TYPEWRITER CURSOR
   ════════════════════════════════════════════════════════════ */
.typewriter-text {
  display: inline;
}

.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* ════════════════════════════════════════════════════════════
   5. PROGRESS BAR ANIMATION
   ════════════════════════════════════════════════════════════ */
.progress-bar-custom {
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ════════════════════════════════════════════════════════════
   6. IMAGE REVEAL
   ════════════════════════════════════════════════════════════ */
.img-reveal-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.img-reveal-wrap img {
  transform: scale(1.05);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal-wrap.revealed img {
  transform: scale(1);
}


/* ════════════════════════════════════════════════════════════
   7. HOVER MICRO-INTERACTIONS
   ════════════════════════════════════════════════════════════ */

/* Lift on hover (already handled per-component) */
.hover-lift {
  transition: var(--transition);
}

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

/* Subtle glow */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(33, 60, 114, 0.08);
}


/* ════════════════════════════════════════════════════════════
   8. PREFERS REDUCED MOTION
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-stagger] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   9. INTERACTIVE SINGLE-DOT CUSTOM CURSOR WITH PULSE
   ════════════════════════════════════════════════════════════ */
/* Only hide default cursor when custom cursor is active on hover device */
@media (hover: hover) and (pointer: fine) {
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: none !important;
  }
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border-radius: 50%;
  background-color: var(--primary, #213C72);
  box-shadow: 0 0 10px rgba(33, 60, 114, 0.3);
  pointer-events: none !important;
  z-index: 2147483647;
  opacity: 0;
  transition: opacity 0.3s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), margin 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
  will-change: transform;
}

/* Hovering over links / buttons / cards / interactive items */
body.cursor-hovering .custom-cursor-dot {
  width: 54px;
  height: 54px;
  margin-top: -27px;
  margin-left: -27px;
  background-color: rgba(255, 116, 116, 0.85);
  backdrop-filter: blur(4px);
  animation: cursorPulse 1.4s infinite ease-in-out;
}

/* Custom Cursor Adaptation on Dark Backgrounds (CTA, Footer, Dark Sections) */
body.cursor-on-dark .custom-cursor-dot {
  background-color: #FFFFFF !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9) !important;
}

body.cursor-on-dark.cursor-hovering .custom-cursor-dot {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 32px rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(4px);
  animation: cursorPulseWhite 1.4s infinite ease-in-out;
}

@keyframes cursorPulseWhite {
  0% {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.6), 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 32px rgba(255, 255, 255, 0.9), 0 0 0 14px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.6), 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Pulsating Animation on Interactive Hover */
@keyframes cursorPulse {
  0% {
    box-shadow: 0 0 16px rgba(255, 116, 116, 0.4), 0 0 0 0 rgba(255, 116, 116, 0.4);
  }
  50% {
    box-shadow: 0 0 36px rgba(255, 116, 116, 0.7), 0 0 0 12px rgba(255, 116, 116, 0);
  }
  100% {
    box-shadow: 0 0 16px rgba(255, 116, 116, 0.4), 0 0 0 0 rgba(255, 116, 116, 0);
  }
}

/* Click feedback */
body.cursor-clicking .custom-cursor-dot {
  transform: scale(0.65) !important;
  animation: none;
}