/* ============================================================
   ANIMATIONS.CSS -- Global styles loaded on every page
   ============================================================ */

/* ---------- HIDE BROWSER SCROLLBAR (top progress bar replaces it) ---------- */
html {
  scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
  display: none; /* Chrome / Safari / Edge */
}

/* ---------- PAGE LOADER ---------- */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #080808;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 20px;
  transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo {
  width: 70px; height: 70px;
  animation: loaderPulse 1s ease-in-out infinite alternate;
}
.loader-bar-wrap {
  width: 180px; height: 3px;
  background: rgba(200,16,46,0.15); border-radius: 3px; overflow: hidden;
}
.loader-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #C8102E, #e31c3d);
  border-radius: 3px;
  animation: loaderFill 0.9s ease forwards;
}
@keyframes loaderPulse {
  from { filter: drop-shadow(0 0 6px rgba(200,16,46,0.4)); transform: scale(0.95); }
  to   { filter: drop-shadow(0 0 20px rgba(200,16,46,0.9)); transform: scale(1.05); }
}
@keyframes loaderFill {
  0%   { width: 0%; }
  60%  { width: 80%; }
  100% { width: 100%; }
}

/* ---------- MATRIX CANVAS (injected globally) ---------- */
.matrix-bg-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.14;
}

/* ---------- SCROLL-REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translate(0); }
.reveal-delay-1 { transition-delay: .1s !important; }
.reveal-delay-2 { transition-delay: .2s !important; }
.reveal-delay-3 { transition-delay: .3s !important; }
.reveal-delay-4 { transition-delay: .4s !important; }
.reveal-delay-5 { transition-delay: .5s !important; }
.reveal-delay-6 { transition-delay: .6s !important; }

/* ---------- HERO TEXT GLITCH ---------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
}
.glitch::before {
  color: #e31c3d;
  animation: glitch1 3.5s infinite linear;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  color: #fff;
  animation: glitch2 3.5s infinite linear;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch1 {
  0%,94%,100% { transform: translate(0); opacity: 0; }
  95%          { transform: translate(-3px, 1px); opacity: .7; }
  97%          { transform: translate(3px, -1px); opacity: .7; }
}
@keyframes glitch2 {
  0%,94%,100% { transform: translate(0); opacity: 0; }
  96%          { transform: translate(3px, 1px); opacity: .6; }
  98%          { transform: translate(-3px,-1px); opacity: .6; }
}

/* ---------- FLOATING BADGE ---------- */
.hero-badge {
  animation: floatBadge 3s ease-in-out infinite !important;
}
@keyframes floatBadge {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-6px); }
}

/* ---------- TYPED CURSOR ---------- */
.typed-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: #C8102E; margin-left: 3px;
  animation: blink .8s step-end infinite;
  vertical-align: middle; border-radius: 1px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---------- CARD TILT ---------- */
.tilt-card { transform-style: preserve-3d; will-change: transform; }

/* ---------- STAT COUNTER GLOW ---------- */
.hero-stat-num {
  animation: statGlow 2.5s ease-in-out infinite alternate;
}
@keyframes statGlow {
  from { text-shadow: 0 0 10px rgba(200,16,46,0.3); }
  to   { text-shadow: 0 0 20px rgba(200,16,46,0.7), 0 0 40px rgba(200,16,46,0.3); }
}

/* ---------- HERO GLOW ORB ---------- */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(80px);
}
.hero-orb-1 {
  width: 500px; height: 500px; top: -100px; left: -100px;
  background: radial-gradient(circle, rgba(200,16,46,0.1) 0%, transparent 70%);
  animation: orbFloat1 8s ease-in-out infinite;
}
.hero-orb-2 {
  width: 300px; height: 300px; bottom: 0; right: 10%;
  background: radial-gradient(circle, rgba(200,16,46,0.07) 0%, transparent 70%);
  animation: orbFloat2 6s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(30px, 20px) scale(1.05); }
  66%      { transform: translate(-20px, 30px) scale(.95); }
}
@keyframes orbFloat2 {
  0%,100% { transform: translate(0, 0); }
  50%      { transform: translate(-20px, -20px); }
}

/* ---------- SECTION HOVER BORDER GLOW ---------- */
.service-card:hover,
.why-card:hover,
.mission-card:hover,
.value-card:hover,
.step:hover {
  box-shadow: 0 0 0 1px rgba(200,16,46,0.3), 0 8px 40px rgba(200,16,46,0.08);
}

/* ---------- FADE-UP CLASSES (hero content) ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUpIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .30s; }
.delay-3 { animation-delay: .45s; }
.delay-4 { animation-delay: .60s; }
@keyframes fadeUpIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- LINK HOVER UNDERLINE ANIMATION ---------- */
a.service-link, a.product-link {
  position: relative;
}