/* ==========================================================
   CallCorico — Animations
   ========================================================== */

/* ===== KEYFRAMES ===== */
@keyframes cc-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(230,57,70,0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(230,57,70,0.05); }
}

@keyframes cc-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes cc-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cc-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes cc-glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

/* ===== SCROLL REVEAL ===== */
/* Applied by IntersectionObserver in main.js */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }
.reveal-delay-6 { transition-delay: 0.60s; }

/* ===== LOGO DOT PULSE ===== */
.logo-dot { animation: cc-pulse 2.4s ease-in-out infinite; }

/* ===== PULSING STATUS INDICATOR ===== */
.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: cc-glow-pulse 2s ease-in-out infinite;
}

/* ===== MARQUEE ===== */
.marquee { animation: cc-marquee 40s linear infinite; }
.marquee:hover { animation-play-state: paused; }

/* ===== HERO ENTRANCE (first paint) ===== */
.hero-text > * {
  animation: cc-fade-up 0.9s ease both;
}
.hero-text > *:nth-child(1) { animation-delay: 0.05s; }
.hero-text > *:nth-child(2) { animation-delay: 0.15s; }
.hero-text > *:nth-child(3) { animation-delay: 0.25s; }
.hero-text > *:nth-child(4) { animation-delay: 0.35s; }
.hero-text > *:nth-child(5) { animation-delay: 0.45s; }
.hero-art { animation: cc-fade-in 1s ease 0.2s both; }

/* ===== COUNTER NUMBER (driven by JS) ===== */
.counter-num {
  font-variant-numeric: tabular-nums;
  display: inline;
}

/* ===== CARD HOVER LIFTS ===== */
.pillar-card,
.service-card,
.sector-tile,
.sub-service-card,
.related-card,
.solution-card,
.article-card {
  will-change: transform;
}

/* ===== FOCUS VISIBLE ===== */
:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== 2026 DESIGN REFRESH ===== */
@keyframes cc-reveal-left  { from { opacity:0; transform:translateX(-24px); } to { opacity:1; transform:translateX(0); } }
@keyframes cc-reveal-right { from { opacity:0; transform:translateX(24px);  } to { opacity:1; transform:translateX(0); } }
@keyframes cc-float        { 0%,100% { transform:translateY(0);   } 50% { transform:translateY(-10px); } }
@keyframes cc-shimmer      { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes cc-blur-in      { from { opacity:0; filter:blur(8px); } to { opacity:1; filter:blur(0); } }
@keyframes cc-mesh-drift-1 { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(40px,-30px) scale(1.08); } 66% { transform:translate(-20px,20px) scale(0.96); } }
@keyframes cc-mesh-drift-2 { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(-50px,20px) scale(1.06); } 66% { transform:translate(30px,-40px) scale(0.98); } }

.reveal-left  { opacity:0; transform:translateX(-24px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left.is-visible  { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(24px);  transition:opacity .7s ease, transform .7s ease; }
.reveal-right.is-visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s ease; }
.reveal-scale.is-visible { opacity:1; transform:scale(1); }

/* Override: hero art gets float animation after initial fade-in */
.hero-art { animation: cc-fade-in 1s ease .2s both, cc-float 6s ease-in-out 1.2s infinite; }