/* ==========================================================================
   animations.css — 704 Diesel & Welding Services
   Animation utilities, keyframes, scroll reveals, hover effects
   Google Fonts (Playfair Display) are loaded in /css/base.css
   ========================================================================== */


/* ==========================================================================
   1. SCROLL REVEAL CLASSES
   Used site-wide via IntersectionObserver in /js/animations.js
   Elements start hidden, gain .revealed when scrolled into view
   Stagger: data-delay="0.1s", "0.2s", etc. on individual .reveal elements
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* data-delay handled by JS: el.style.transitionDelay = el.dataset.delay */
/* .reveal[data-delay] — no extra CSS needed, JS sets transitionDelay inline */


/* ==========================================================================
   2. KEYFRAMES
   ========================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%,  100% { transform: scale(1); }
  50%        { transform: scale(1.05); }
}

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

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

/* Teal accent glow — used on CTAs, highlighted cards, accent borders */
@keyframes tealGlow {
  0%,  100% { box-shadow: 0 0  5px rgba(59, 247, 209, 0.3); }
  50%        { box-shadow: 0 0 20px rgba(59, 247, 209, 0.6),
                           0 0 40px rgba(59, 247, 209, 0.2); }
}

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

/* Subtle float — decorative icons or blobs */
@keyframes float {
  0%,  100% { transform: translateY(0); }
  50%        { transform: translateY(-8px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Accent line draw-on animation (width 0 -> var(--accent-line-width)) */
@keyframes accentLineDraw {
  from { width: 0; }
  to   { width: var(--accent-line-width, 60px); }
}


/* ==========================================================================
   3. ANIMATION UTILITY CLASSES
   Apply directly to elements that should animate on page load (not scroll).
   For scroll-triggered animation, use .reveal instead.
   ========================================================================== */

.animate-fade-in   { animation: fadeIn      0.6s ease          forwards; }
.animate-slide-up  { animation: slideUp     0.6s ease          forwards; }
.animate-slide-left  { animation: slideInLeft  0.6s ease        forwards; }
.animate-slide-right { animation: slideInRight 0.6s ease        forwards; }
.animate-pulse     { animation: pulse       2s  ease-in-out infinite; }
.animate-float     { animation: float       4s  ease-in-out infinite; }
.animate-spin      { animation: spin        1s  linear    infinite; }
.animate-teal-glow { animation: tealGlow    2s  ease-in-out infinite; }


/* ==========================================================================
   4. HOVER EFFECTS
   Utility classes for interactive lift / scale / image-zoom on hover.
   Pair with .card or image wrappers as needed.
   ========================================================================== */

/* Card / element lift */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Subtle scale */
.hover-scale {
  transition: transform var(--duration-normal) var(--ease-default);
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* Image zoom on hover — wrap <img> in .img-zoom */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform var(--duration-slow) var(--ease-default);
}
.img-zoom:hover img {
  transform: scale(1.06);
}


/* ==========================================================================
   5. ACCENT LINE DRAW ANIMATION
   Add .animated to an .accent-line element to trigger draw-on effect.
   Works best when added via JS after the element enters the viewport.
   ========================================================================== */

.accent-line.animated {
  animation: accentLineDraw 0.8s ease forwards;
}


/* ==========================================================================
   6. HERO TEXT ANIMATION CLASSES
   Applied directly to hero headline, subheadline, and CTA wrapper.
   Staggered via animation-delay so they cascade in on page load.
   ========================================================================== */

.hero-headline {
  animation: slideUp 0.8s ease forwards;
}

.hero-subheadline {
  animation: slideUp 0.8s ease 0.2s forwards;
  opacity: 0;
  animation-fill-mode: both;
}

.hero-ctas {
  animation: slideUp 0.8s ease 0.4s forwards;
  opacity: 0;
  animation-fill-mode: both;
}


/* ==========================================================================
   7. COUNTER ANIMATION
   Applied to stat numbers when they enter the viewport (via JS counter logic).
   ========================================================================== */

.counter-value {
  animation: countUp 0.5s ease forwards;
}


/* ==========================================================================
   8. SHIMMER EFFECT
   Decorative text shimmer using the teal accent color.
   Apply .shimmer-text to a heading or span for a gradient shine effect.
   ========================================================================== */

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    #fff               50%,
    var(--color-accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}


/* ==========================================================================
   9. REDUCED MOTION (ACCESSIBILITY — REQUIRED)
   Respects the user's system-level "Reduce Motion" preference.
   All transitions and animations are disabled or minimized.
   JS in /js/animations.js also checks matchMedia and skips observers.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Immediately reveal all scroll-reveal elements */
  .reveal {
    transition: none !important;
    transform:  none !important;
    opacity: 1  !important;
  }

  /* Disable all animations and transitions globally */
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}