/* BiiSensing — Animation-specific CSS
   Loaded after main.css; contains transitions, keyframes, and motion-dependent rules */

/* ── Spec bar fill animation ── */
.bar-fill {
  width: 0;
  transition: width 1.1s cubic-bezier(.4,0,.2,1);
}
.bar-fill.go {
  width: var(--bar-w, 80%);
}

/* ── Hero fiber canvas ── */
#fiber-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Globe canvas wrapper ── */
.globe-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#globe-canvas {
  border-radius: 50%;
  max-width: 100%;
}

/* ── Mobile menu open/close transition ── */
.mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Nav scroll transition ── */
.site-nav {
  transition: background .3s ease, padding .3s ease, border-color .3s ease;
}

/* ── Product tab panel fade ── */
.tab-panel {
  display: none;
  animation: fadeIn .35s ease;
}
.tab-panel.on {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Scroll-triggered reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Arrow bounce (hero scroll indicator) ── */
@keyframes arrowBounce {
  0%,100% { transform: translateY(0); }
  55%      { transform: translateY(5px); }
}
.hero-scroll svg {
  animation: arrowBounce 2.2s ease-in-out infinite;
}

/* ── Stat number entrance ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.stat.in .stat-val {
  animation: countUp .55s ease forwards;
}

/* ── Beam sweep ── */
@keyframes beamSweep {
  0%   { left: -45%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ── Wave scroll ── */
@keyframes waveScroll {
  from { background-position: 0 0; }
  to   { background-position: 800px 0; }
}

/* ── Reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .bar-fill,
  .mobile-menu,
  .tab-panel,
  .hero-scroll svg,
  .stat.in .stat-val {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bar-fill {
    width: var(--bar-w, 80%) !important;
  }
}