/* ============================================================
   18-cinematic-spectacular.css
   Big Bear Marketing — "woah-factor" upgrade pass 2026-05-20

   Adds:
     1. Boot-sequence intro overlay (.bbm-boot-overlay)
     2. Code rain canvas (#hero-code-rain)
     3. Mega-title glitch reveal (.hero-glitch-ready)
     4. Magnetic and pulsing CTA glow
     5. Scroll reveal cascade with stagger (data-reveal)
     6. Stat counter resets (handled in JS — no CSS needed beyond what exists)
     7. Ambient particles canvas (#bbm-particles)

   Hard rules: no ampersands in copy, max one em-dash per paragraph,
   all kinetic effects respect prefers-reduced-motion.
   ============================================================ */


/* ============================================================
   1. BOOT-SEQUENCE INTRO OVERLAY
   Full-screen black overlay that types in terminal lines, then
   wipes away with a scanline sweep to reveal the hero.
   z-index 9999 — above everything.
   ============================================================ */

.bbm-boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  overflow: hidden;

  /* After JS adds .bbm-boot--exiting, we clip the overlay away with a
     top-to-bottom scanline wipe. clip-path is animated via transition. */
  transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.3, 1);
  clip-path: inset(0 0 0 0);
}

.bbm-boot-overlay.bbm-boot--exiting {
  clip-path: inset(0 0 100% 0);
}

/* Reduced motion: no clip sweep, just a fast opacity fade */
@media (prefers-reduced-motion: reduce) {
  .bbm-boot-overlay {
    transition: opacity 0.4s ease;
  }
  .bbm-boot-overlay.bbm-boot--exiting {
    opacity: 0;
    clip-path: none;
  }
}

/* Terminal text block — centred, narrow-ish for drama */
.bbm-boot-terminal {
  width: min(520px, 88vw);
  font-family: var(--f-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: clamp(0.75rem, 1.8vw, 0.95rem);
  line-height: 1.9;
  color: var(--c-cyan, #00f0ff);
}

/* Each line types in — starts invisible, becomes visible when JS adds .bbm-line--visible */
.bbm-boot-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.bbm-boot-line.bbm-line--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: all lines visible immediately, no stagger */
@media (prefers-reduced-motion: reduce) {
  .bbm-boot-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Colour accents within lines */
.bbm-boot-line .ok    { color: var(--c-yellow, #FFD700); }
.bbm-boot-line .ready { color: #fff; font-weight: 700; }

/* Blinking cursor appended to the last visible line */
.bbm-boot-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  background: var(--c-cyan, #00f0ff);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: bbm-blink 0.9s step-end infinite;
}

@keyframes bbm-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bbm-boot-cursor { animation: none; opacity: 1; }
}

/* Skip button — top-right corner, always visible */
.bbm-boot-skip {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--f-mono, 'JetBrains Mono', Consolas, monospace);
  font-size: 0.78rem;
  color: var(--c-cyan, #00f0ff);
  background: none;
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 4px;
  padding: 8px 14px;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbm-boot-skip:hover,
.bbm-boot-skip:focus-visible {
  color: var(--c-yellow, #FFD700);
  border-color: var(--c-yellow, #FFD700);
  background: rgba(255, 215, 0, 0.08);
  outline: none;
}

/* Scanline sweep that plays across the overlay on exit — cosmetic only */
.bbm-boot-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--c-cyan, #00f0ff) 40%,
    #fff 50%,
    var(--c-cyan, #00f0ff) 60%,
    transparent 100%
  );
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.9), 0 0 60px rgba(0, 240, 255, 0.45);
  top: 0;
  opacity: 0;
  pointer-events: none;
}

.bbm-boot-overlay.bbm-boot--exiting .bbm-boot-scanline {
  animation: bbm-exit-sweep 0.52s ease-out forwards;
}

@keyframes bbm-exit-sweep {
  0%   { top: 0;    opacity: 1; }
  100% { top: 100%; opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  .bbm-boot-scanline { display: none; }
}

/* Mobile: slightly smaller text, bigger skip target */
@media (max-width: 480px) {
  .bbm-boot-terminal { font-size: 0.72rem; }
  .bbm-boot-skip { padding: 10px 18px; font-size: 0.72rem; top: 12px; right: 12px; }
}


/* ============================================================
   2. CODE RAIN CANVAS
   Sits inside #hero, behind all content. Pointer-events off.
   The canvas is absolutely positioned and managed entirely in JS.
   CSS just constrains its layer position.
   ============================================================ */

#hero-code-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;    /* above background, below orbs (z:2) and vignette (z:3) */
  opacity: 1;
}

/* Hidden on mobile for perf — JS also skips init on narrow viewports,
   this CSS rule is a belt-and-braces guard */
@media (max-width: 480px) {
  #hero-code-rain { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #hero-code-rain { display: none; }
}


/* ============================================================
   3. MEGA TITLE GLITCH REVEAL
   The <h1> in .hero-copy gets class .hero-glitch-ready.
   On entrance (matching cinematic-enter timing), a brief RGB-split
   plays. After that, periodic micro-glitches fire via JS adding
   .hero-micro-glitch momentarily.
   ============================================================ */

/* Initial glitch burst — plays once on entrance.
   Matches the cinematic-fade-up timing: h1 animates at 0.70s delay,
   so the glitch starts around 0.7s and runs for 0.3s. */
.cinematic-enter .hero-glitch-ready {
  animation-name: cinematic-fade-up, hero-glitch-burst;
  /* cinematic-fade-up delay + duration already set in 03-hero.css at 0.70s delay.
     We layer the glitch on top with its own delay + short duration.
     !important needed because 03-hero.css sets animation-delay on the h1 directly. */
  animation-delay: 0.70s, 0.85s !important;
  animation-duration: 0.85s, 0.30s !important;
  animation-timing-function: var(--ease-out), steps(3, end) !important;
  animation-fill-mode: forwards, forwards !important;
}

@keyframes hero-glitch-burst {
  0%  {
    text-shadow:
      -3px 0 var(--c-magenta, #ff007a),
       3px 0 var(--c-cyan, #00f0ff);
    transform: translateY(0) skewX(-1deg);
  }
  33% {
    text-shadow:
       3px 0 var(--c-magenta, #ff007a),
      -3px 0 var(--c-cyan, #00f0ff);
    transform: translateY(0) skewX(1.5deg);
  }
  66% {
    text-shadow:
      -2px 0 var(--c-magenta, #ff007a),
       2px 0 var(--c-cyan, #00f0ff);
    transform: translateY(0) skewX(-0.5deg);
  }
  100% {
    text-shadow: none;
    transform: translateY(0) skewX(0deg);
  }
}

/* Micro-glitch fired by JS every 8-12s */
.hero-micro-glitch {
  animation: hero-micro-glitch-anim 0.22s steps(4, end) forwards !important;
}

@keyframes hero-micro-glitch-anim {
  0%  { text-shadow: -2px 0 var(--c-magenta, #ff007a), 2px 0 var(--c-cyan, #00f0ff); transform: translateX(-2px); }
  25% { text-shadow:  2px 0 var(--c-magenta, #ff007a), -2px 0 var(--c-cyan, #00f0ff); transform: translateX(2px); }
  50% { text-shadow: -1px 0 var(--c-cyan, #00f0ff), 1px 0 var(--c-magenta, #ff007a); transform: translateX(-1px); }
  100% { text-shadow: none; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-enter .hero-glitch-ready {
    animation-delay: 0.70s !important;
    animation-duration: 0.85s !important;
    animation-name: cinematic-fade-up !important;
    animation-fill-mode: forwards !important;
  }
  .hero-micro-glitch {
    animation: none !important;
    text-shadow: none !important;
  }
}


/* ============================================================
   4. MAGNETIC AND PULSING CTAs
   Yellow CTA buttons in the hero get a pulsing glow ring and
   an arrow that slides on hover.
   The existing btn-glow class handles the base neon glow;
   we add the rhythmic pulse ring on top.
   ============================================================ */

/* Pulsing outer glow ring on the primary CTA */
.hero-actions .btn-yellow,
.hero-actions .btn-glow {
  position: relative;
}

.hero-actions .btn-yellow::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55);
  animation: cta-pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

@keyframes cta-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(255, 215, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

/* Hover: brighter glow */
.hero-actions .btn-yellow:hover::before {
  animation: none;
  box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.22);
}

/* Arrow slides right on hover */
.hero-actions .btn-yellow .btn-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s var(--ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.hero-actions .btn-yellow:hover .btn-arrow {
  transform: translateX(3px);
}

/* Active/press: brief inner flash */
.hero-actions .btn-yellow:active {
  animation: cta-press-flash 0.1s ease forwards;
}

@keyframes cta-press-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0.4); }
  50%  { box-shadow: inset 0 0 24px 4px rgba(255, 255, 255, 0.35); }
  100% { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn-yellow::before {
    animation: none;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
  }
  .hero-actions .btn-yellow:active {
    animation: none;
  }
}


/* ============================================================
   5. SCROLL REVEAL CASCADE
   Elements with data-reveal start hidden and slide up when
   they enter the viewport (JS adds .in-view).
   data-reveal-stagger="60" on a parent staggers its children.
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.2, 0.6, 0.3, 1),
    transform 0.6s cubic-bezier(0.2, 0.6, 0.3, 1);
  will-change: opacity, transform;
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — JS sets --reveal-delay on each child */
[data-reveal-stagger] > [data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* Reduced motion: instant appear, no slide */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: opacity 0.001s;
  }
  [data-reveal].in-view {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   7. AMBIENT PARTICLES CANVAS
   Fixed full-page canvas behind everything. z-index -1 keeps it
   below all content. JS handles the actual particle animation.
   ============================================================ */

#bbm-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 1;
}

/* Skip on narrow mobile for perf — JS also guards this */
@media (max-width: 600px) {
  #bbm-particles { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #bbm-particles { display: none; }
}