/* ═══════════════════════════════════════════════════════════════
   ASTER MEDISPRO — animations.css  (April 2026)

   To REVERT ALL animations: remove <link> to this file.
   To REVERT ONE animation: comment out the labeled block below.

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────
   A1. Scroll Progress Bar
   A2. CTA Button Glow Pulse
   A3. WOW.js helpers (product detail pages)
   A4. Typed.js hero line (homepage)
   A5. GSAP ScrollTrigger helpers
   ─────────────────────────────────────────────────────────────
*/


/* ── A1. SCROLL PROGRESS BAR ──────────────────────────────────
   A thin teal gradient line at the very top of the page that
   fills in as the user scrolls down. Injected by animations.js.
   To revert: comment out this block + the A1 block in animations.js.
   ──────────────────────────────────────────────────────────── */
#anim-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #1ebeb6, #00827c);
  z-index: 100000;
  pointer-events: none;
  transition: width 0.08s linear;
}


/* ── A2. CTA BUTTON GLOW PULSE ────────────────────────────────
   A soft teal glow ring that pulses outward from every
   .btn-gradient button, drawing the visitor's eye.
   To revert: comment out this entire block.
   ──────────────────────────────────────────────────────────── */
@keyframes btn-glow-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(30, 190, 182, 0.55); }
  65%  { box-shadow: 0 0 0 10px rgba(30, 190, 182, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(30, 190, 182, 0);   }
}
.btn-gradient {
  animation: btn-glow-pulse 2.6s ease-out infinite;
}
.btn-gradient:hover,
.btn-gradient:focus {
  animation: none;
  box-shadow: 0 8px 26px rgba(30, 190, 182, 0.42) !important;
}


/* ── A3. WOW.JS HELPERS — product detail pages ────────────────
   Keep WOW-targeted elements invisible until JS reveals them.
   To revert: comment out this block + A3 block in animations.js
              and remove wow/animated classes from product page HTML.
   ──────────────────────────────────────────────────────────── */
.product-detail-page .wow {
  visibility: hidden;
}
.product-detail-page .wow.animated {
  visibility: visible;
}


/* ── A4. TYPED.JS HERO LINE — homepage ────────────────────────
   Styles the animated typing line in the first hero carousel slide.
   To revert: comment out this block + A4 block in animations.js
              and remove .hero-typed-line element from index.php hero.
   ──────────────────────────────────────────────────────────── */
.hero-typed-line {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  margin: 6px 0 22px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.hero-typed-line .typed-specialist {
  color: #1ebeb6;
  font-weight: 700;
}
.typed-cursor {
  color: #1ebeb6;
  font-weight: 300;
  font-size: 1.1em;
}
@keyframes typed-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typed-cursor.typed-cursor--blink {
  animation: typed-blink 0.65s infinite;
}


/* ── A5. GSAP SCROLL TRIGGER HELPERS ─────────────────────────
   Initial visibility states for GSAP-animated elements so they
   don't flash in before the animation runs.
   To revert: comment out this block + A5 block in animations.js.
   ──────────────────────────────────────────────────────────── */

/* Feature cards: hidden until GSAP fires */
.prod-feature-card {
  will-change: transform, opacity;
}

/* Sidebar widgets: hidden until GSAP fires */
.department-single-area .sidebar .widget {
  will-change: transform, opacity;
}

/* Choose-us thumb: set overflow for parallax */
.choose-us-area .col-lg-6:last-child {
  overflow: hidden;
}