/* ============================================================================
   cinematic.css — micro-interaction polish + animation helpers.
   Additive, marketing pages only. Reuses tokens.css.
   ============================================================================ */

/* magnetic elements get smooth return + GPU hint */
.btn,
.nav-link,
.nav-menu-toggle,
.brand-mark {
  transition: transform 0.45s var(--ease-out-expo), color 0.3s var(--ease-out-cubic),
    border-color 0.3s var(--ease-out-cubic), background 0.3s var(--ease-out-cubic),
    box-shadow 0.3s var(--ease-out-cubic);
  will-change: transform;
}

/* active-section nav indicator */
.nav-link {
  position: relative;
}
.nav-link.is-current {
  color: var(--ink);
}
.nav-link.is-current::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime-shadow);
  border-radius: 2px;
  transform-origin: 0 50%;
  animation: navUnderline 0.4s var(--ease-out-expo);
}
@keyframes navUnderline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* reveal-on-scroll utility (JS adds .in-view) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Failsafe: 5 s after page load, snap every still-hidden surface to visible.
   Uses opacity-only animations that compose with `.in-view`'s `opacity: 1` —
   does NOT override transforms (those are owned by GSAP / .in-view). */
@keyframes _bsg_snap_op { to { opacity: 1; } }
[data-reveal]:not(.in-view) { animation: _bsg_snap_op 0s linear 5s forwards; }
.hero-char { animation: _bsg_snap_op 0s linear 4s forwards; }
.hero-eyebrow, .hero-sub, .hero-cta-row { animation: _bsg_snap_op 0s linear 4s forwards; }
.wm-text { animation: _bsg_snap_wm 0s linear 4s forwards; }
.wm-bracket { animation: _bsg_snap_brk 0s linear 4s forwards; }
@keyframes _bsg_snap_wm { to { clip-path: inset(0 0% 0 0); } }
@keyframes _bsg_snap_brk { to { transform: scale(1); } }

/* WebGL hero centerpiece — sits behind hero content, non-interactive */
.hero { position: relative; isolation: isolate; }
.webgl-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.webgl-hero canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-halo { z-index: 1; }
.hero-grid,
.hero-content,
.hero-cards { position: relative; z-index: 2; }

/* hero value-prop pills */
.hero-pills {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.hero-pills li {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-pills li::before {
  content: '✓';
  color: var(--lime-deep);
  font-weight: 700;
}

/* clip-reveal headline words */
.line-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.line-mask > span {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav-link,
  .nav-menu-toggle,
  .brand-mark {
    transition-duration: 0.001ms !important;
    will-change: auto;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}