/* === MARQUEE KEYFRAME === */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === SVG LINE-DRAW === */
/* Icons are visible by default. The line-draw animation only plays
   when ScrollTrigger adds the .drawn class on scroll-enter. */
@keyframes drawIcon {
  from { stroke-dashoffset: var(--path-length); }
  to { stroke-dashoffset: 0; }
}
.icon-animated svg path,
.icon-animated svg circle,
.icon-animated svg line,
.icon-animated svg polyline {
  /* No stroke-dash hiding by default — icons render normally */
}
.icon-animated.drawing svg path,
.icon-animated.drawing svg circle,
.icon-animated.drawing svg line,
.icon-animated.drawing svg polyline {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: drawIcon 0.8s ease-out forwards;
}

/* === CERT BADGE SHIMMER === */
.cert-logo {
  transition: transform var(--transition);
}
.cert-logo:hover {
  transform: scale(1.1);
}

/* === GSAP INITIAL STATES — only applied after JS confirms GSAP loaded === */
/* Elements start visible by default; GSAP applies opacity:0 inline via fromTo.
   This ensures content is always visible even if GSAP fails to load or trigger. */

/* === GLOSSY CARD OVERLAY === */
.card-tilt-glossy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 106, 212, 0.06) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-tilt-glossy:hover::after { opacity: 1; }

/* === 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;
  }
  .gsap-hero-text,
  .gsap-fade-up,
  .gsap-stagger {
    opacity: 1 !important;
    transform: none !important;
  }
  .partner-marquee { animation: none !important; }
}