/* ═══════════════════════════════
   BIZERA v3 — Animations
   ═══════════════════════════════ */

/* ─── Page load fade ─── */
body { animation: pageFadeIn 0.6s ease both; }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Typing cursor ─── */
.typed-cursor {
  display: inline-block; width: 3px; height: 1em;
  background: var(--blue); margin-left: 4px; vertical-align: middle;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── Neon text glow ─── */
.glow-blue {
  text-shadow: 0 0 20px rgba(37,99,235,0.6), 0 0 60px rgba(37,99,235,0.3);
}
.glow-green {
  text-shadow: 0 0 20px rgba(16,185,129,0.6), 0 0 60px rgba(16,185,129,0.3);
}

/* ─── Gradient text ─── */
.grad-text {
  background: linear-gradient(135deg, var(--text) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Ambient orbs ─── */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(80px); opacity: 0.12;
}
.orb-blue  { background: var(--blue); }
.orb-green { background: var(--green); }

/* ─── Card shine on hover ─── */
.shine-card {
  position: relative; overflow: hidden;
}
.shine-card::after {
  content: '';
  position: absolute; top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.shine-card:hover::after { left: 125%; }

/* ─── Pulsing dot ─── */
.pulse-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--green); position: relative;
}
.pulse-dot::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 2px solid var(--green);
  animation: pulseRing 1.5s ease-out infinite;
}
@keyframes pulseRing { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(2)} }

/* ─── Section divider line ─── */
.divider-line {
  width: 48px; height: 2px; background: var(--blue); border-radius: 2px; margin: 1.5rem 0;
}
.divider-line.centered { margin: 1.5rem auto; }

/* ─── Floating badge ─── */
.float-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25);
  color: var(--green); padding: 0.4rem 0.9rem; border-radius: 100px;
  font-family: var(--font-h); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  animation: floatBadge 4s ease-in-out infinite;
}
@keyframes floatBadge { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ─── Number counter ─── */
.counter { display: inline-block; }

/* ─── Mascot speech bubble variants ─── */
.mascot-speech.green {
  background: var(--green);
  box-shadow: 0 8px 32px rgba(16,185,129,0.35);
}

/* ─── Horizontal scroll marquee ─── */
.marquee-track {
  display: flex; gap: 3rem; white-space: nowrap;
  animation: marquee 25s linear infinite;
}
.marquee-wrap { overflow: hidden; padding: 1.5rem 0; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  font-family: var(--font-h); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-3); display: inline-flex; align-items: center; gap: 1.5rem;
}
.marquee-item::after { content: '✦'; color: var(--blue); }

/* ─── Image parallax container ─── */
.parallax-img { overflow: hidden; }
.parallax-img img { will-change: transform; }

/* ─── Grid background ─── */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.03;
  background-image: linear-gradient(var(--blue) 1px, transparent 1px),
                    linear-gradient(90deg, var(--blue) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ─── Hero animated line ─── */
.hero-line {
  position: absolute; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  height: 1px; width: 60%; left: 20%;
  animation: heroLine 4s ease-in-out infinite;
  opacity: 0.3;
}
@keyframes heroLine { 0%,100%{opacity:0.2;width:40%} 50%{opacity:0.5;width:70%} }

/* ─── Rotating border ─── */
@keyframes spinBorder {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Stagger children on enter ─── */
.stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.5s, transform 0.5s;
}
.stagger.in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.stagger.in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.12s; }
.stagger.in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.19s; }
.stagger.in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.26s; }
.stagger.in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.33s; }
.stagger.in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.40s; }

/* ─── Video hologram effect ─── */
.holo-video {
  position: relative;
}
.holo-video::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(37,99,235,0.03) 3px, rgba(37,99,235,0.03) 4px);
}

/* ─── Blueprint border ─── */
.blueprint-border {
  border: 1px solid var(--border);
  position: relative;
}
.blueprint-border::before,
.blueprint-border::after {
  content: '';
  position: absolute; width: 12px; height: 12px;
  border-color: var(--blue); border-style: solid;
}
.blueprint-border::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.blueprint-border::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }