/* motion-pulse.css
   Continuous-motion layer on top of motion-extras.
   Idempotent. Reduced-motion respected at bottom. */

/* ============ 1) HERO AMBIENT ============ */
.hero { position: relative; isolation: isolate; }
.hero-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
/* Drifting plasma */
.hero-ambient::before,
.hero-ambient::after {
  content: ""; position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  will-change: transform;
}
.hero-ambient::before {
  left: -20vmax; top: -10vmax;
  background: radial-gradient(circle, rgba(255, 58, 14, 0.55) 0%, rgba(255, 58, 14, 0) 60%);
  animation: hp-drift-a 22s ease-in-out infinite alternate;
}
.hero-ambient::after {
  right: -22vmax; bottom: -18vmax;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.32) 0%, rgba(255, 90, 31, 0) 60%);
  animation: hp-drift-b 28s ease-in-out infinite alternate;
}
@keyframes hp-drift-a {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(12vmax, 8vmax) scale(1.1); }
  100% { transform: translate(-6vmax, 14vmax) scale(0.95); }
}
@keyframes hp-drift-b {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-10vmax, -6vmax) scale(1.15); }
  100% { transform: translate(8vmax, 6vmax) scale(0.9); }
}

/* Hero dot grid — moving with cursor */
.hero-grid {
  position: absolute; inset: -40px; z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 30%, transparent 95%);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* Cursor spotlight */
.hero-spotlight {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
  background:
    radial-gradient(circle 480px at var(--mx, 50%) var(--my, 50%),
      rgba(255, 58, 14, 0.12) 0%,
      rgba(255, 58, 14, 0.04) 35%,
      transparent 70%);
  mix-blend-mode: screen;
}
.hero:hover .hero-spotlight { opacity: 1; }

/* Hero-inner above ambient layers */
.hero-inner { position: relative; z-index: 2; }

/* Subtle parallax on the headline (set via JS --py) */
.cascade { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* ============ 2) SECTION TRANSITION HAIRLINE ============ */
section { position: relative; }
section::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,58,14,0.55) 50%, transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.2s cubic-bezier(.65,0,.35,1) .1s;
  pointer-events: none;
  opacity: 0.7;
  z-index: 4;
}
section.in-view::after { transform: scaleX(1); }

/* ============ 3) MID-PAGE MARQUEE STRIP ============ */
.mp-marquee {
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  background: linear-gradient(180deg, #07070a 0%, var(--void) 100%);
  height: 56px;
  display: flex; align-items: center;
}
.mp-marquee-track {
  display: flex;
  width: max-content;
  animation: mp-mq-scroll 38s linear infinite;
}
.mp-marquee-track:hover { animation-play-state: paused; }
.mp-mq-item {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 0 32px;
  white-space: nowrap;
  font-family: var(--type-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-mute);
}
.mp-mq-item b { color: var(--bone); font-weight: 500; }
.mp-mq-item em { color: var(--ember); font-style: normal; }
.mp-mq-item::after {
  content: "●"; color: var(--ember); font-size: 8px; margin-left: 16px;
}
@keyframes mp-mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============ 4) SCRAMBLER ============ */
.scramble {
  font-variant-ligatures: none;
  display: inline-block;
}
.scramble.is-scrambling {
  color: var(--ember);
  text-shadow: 0 0 12px rgba(255, 58, 14, 0.45);
}

/* ============ 5) PARALLAX BACKGROUNDS ============ */
.adv-visual .bg,
.gs-bg img,
.close-bg video {
  will-change: transform;
}
.adv-visual .bg { transform: translate3d(0, var(--adv-py, 0px), 0) scale(1.08); }
.gs-bg img      { transform: translate3d(0, var(--gs-py, 0px), 0) scale(1.06); }

/* ============ 6) FRAMEWORK CARD COMET ============ */
.fw-card { overflow: hidden; }
.fw-card::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, transparent, rgba(255,58,14,0.65), transparent) top left/100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,58,14,0.65), transparent) top right/1px 100% no-repeat,
    linear-gradient(90deg, transparent, rgba(255,58,14,0.65), transparent) bottom right/100% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(255,58,14,0.65), transparent) bottom left/1px 100% no-repeat;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 1;
}
.fw-card:hover::before { opacity: 1; animation: fw-sweep 2.2s linear infinite; }
@keyframes fw-sweep {
  0%   { background-position: -100% 0, top right, 200% 100%, bottom -100%; }
  100% { background-position:  200% 0, top right, -100% 100%, bottom 200%; }
}
/* Comet dot riding the border */
.fw-card .fw-comet {
  position: absolute; top: -3px; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 14px rgba(255,58,14,0.9), 0 0 28px rgba(255,58,14,0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  offset-path: rect(0 100% 100% 0);
  offset-distance: 0%;
}
.fw-card:hover .fw-comet {
  opacity: 1;
  animation: fw-comet-run 3.2s linear infinite;
}
@keyframes fw-comet-run {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* ============ 7) HERO SCROLL CUE ============ */
.hero-scrollcue {
  position: absolute; left: 32px; bottom: 20px; z-index: 3;
  font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bone-mute);
  display: flex; align-items: center; gap: 12px;
  pointer-events: none;
}
.hero-scrollcue::before {
  content: ""; width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, var(--ember), transparent);
  background-size: 100% 200%;
  animation: cue-pulse 2.4s ease-in-out infinite;
}
@keyframes cue-pulse {
  0%   { background-position: 0% 200%; opacity: 0.3; }
  50%  { opacity: 1; }
  100% { background-position: 0% -100%; opacity: 0.3; }
}
@media (max-width: 720px) { .hero-scrollcue { display: none; } }

/* ============ 8) OPS COUNTER FLICKER (continuous life) ============ */
.ops-cell .big {
  position: relative;
}
.ops-cell .big::after {
  content: ""; position: absolute; left: 0; right: 30%; bottom: -6px;
  height: 1px; background: var(--ember); opacity: 0;
  transform-origin: left;
  animation: ops-tick 6s ease-in-out infinite;
}
.ops-cell:nth-child(2) .big::after { animation-delay: 1.2s; }
.ops-cell:nth-child(3) .big::after { animation-delay: 2.6s; }
.ops-cell:nth-child(4) .big::after { animation-delay: 4.1s; }
@keyframes ops-tick {
  0%, 92%, 100% { opacity: 0; transform: scaleX(0); }
  93%           { opacity: 1; transform: scaleX(0); }
  98%           { opacity: 1; transform: scaleX(1); }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .hero-ambient::before,
  .hero-ambient::after { animation: none; }
  .mp-marquee-track { animation: none; }
  .fw-card:hover::before { animation: none; }
  .fw-card .fw-comet { display: none; }
  .hero-scrollcue::before { animation: none; }
  .ops-cell .big::after { display: none; }
  section::after { transition: none; transform: scaleX(1); }
}