/* Globotech — Animations & Keyframes */

/* ── HERO DRIFT (Ken-Burns background) ───────────────────────────────────── */
@keyframes heroDrift {
  0%   { transform: scale(1)    translateX(0)     translateY(0); }
  33%  { transform: scale(1.06) translateX(-1.5%) translateY(-1%); }
  66%  { transform: scale(1.04) translateX(1%)    translateY(-1.5%); }
  100% { transform: scale(1)    translateX(0)     translateY(0); }
}

/* ── PULSE (glowing dot / badge pulse) ───────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.15); }
}

/* ── MARQUEE SCROLL (trust logos forward) ────────────────────────────────── */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── FLOW DIAGRAM DOT — right direction ─────────────────────────────────── */
@keyframes fdotR {
  0%   { left: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ── FLOW DIAGRAM DOT — left direction ──────────────────────────────────── */
@keyframes fdotL {
  0%   { right: 0;    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { right: 100%; opacity: 0; }
}

/* ── PULSE RING (hero node glow) ─────────────────────────────────────────── */
@keyframes pulseRing {
  0%   { transform: scale(0.85); opacity: 0.7; }
  60%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(0.85); opacity: 0; }
}

/* ── SPIN RING (rotating dashed border) ─────────────────────────────────── */
@keyframes spinRing {
  to { transform: rotate(360deg); }
}

/* ── MARQUEE (alias used in some components) ─────────────────────────────── */
@keyframes mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── MARQUEE REVERSE ─────────────────────────────────────────────────────── */
@keyframes mqr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── REVEAL FILL (process connector line fill) ───────────────────────────── */
@keyframes revfill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── STAMP DROP (section badge entrance) ────────────────────────────────── */
@keyframes stampDrop {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(3px)   scale(1.02); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

/* ── RIPPLE FADE (CTA button ripple) ─────────────────────────────────────── */
@keyframes rippleFade {
  0%   { transform: scale(0); opacity: 0.45; }
  100% { transform: scale(3); opacity: 0; }
}

/* ── DOT TRAVEL (flow edge travelling dot) ──────────────────────────────── */
@keyframes dotTravel {
  0%   { offset-distance: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── FADE IN UP (reveal helper) ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FLOAT (subtle hover float) ─────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── BAR GROW (results chart bar fill) ──────────────────────────────────── */
@keyframes barGrow {
  from { width: 0; }
  to   { width: var(--bar-w, 100%); }
}

/* ── GLOW PULSE (CTA section glow orb) ─────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%       { opacity: 0.32; transform: scale(1.08); }
}

/* ── SHIMMER (skeleton loading) ─────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ── APPLIED ANIMATION CLASSES ───────────────────────────────────────────── */

/* Hero overlay background */
.hero-photo.animate-in {
  animation: heroDrift 18s ease-in-out infinite;
  will-change: transform;
}

/* Pulse ring elements */
.pulse-ring.animate-in {
  animation: pulseRing 2.4s ease-out infinite;
  will-change: transform;
}
.pulse-ring:nth-child(2) { animation-delay: 0.8s; }
.pulse-ring:nth-child(3) { animation-delay: 1.6s; }

/* Spin ring */
.spin-ring.animate-in {
  animation: spinRing 8s linear infinite;
  will-change: transform;
}

/* Trust logo marquee track */
.mq-track.animate-in {
  animation: marquee-scroll 32s linear infinite;
}
.mq-track:hover {
  animation-play-state: paused;
}
.mq-track--reverse.animate-in {
  animation: mqr 28s linear infinite;
}

/* Flow diagram dots */
.flow-dot-r.animate-in {
  animation: fdotR 2.2s ease-in-out infinite;
}
.flow-dot-l.animate-in {
  animation: fdotL 2.2s ease-in-out infinite;
}

/* Process connector fill (triggered by JS adding .active class) */
.conn-fill {
  width: 0;
  transition: none;
}
.conn-fill.active {
  animation: revfill 0.6s ease forwards;
}

/* Results bar chart bars (JS sets --bar-w and adds .active) */
.bar-fill {
  width: 0;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bar-fill.active {
  width: var(--bar-w, 80%);
}

/* Eyebrow stamp entrance (triggered only when scrolled into view) */
.section-eyebrow.in {
  animation: stampDrop 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* CTA glow orb */
.cta-glow.animate-in {
  animation: glowPulse 4s ease-in-out infinite;
}

/* Float animation on decorative elements */
.anim-float.animate-in {
  animation: float 4s ease-in-out infinite;
  will-change: transform;
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}