/* =====================================================================
   RIA — LANDING ANIMATION EXTRAS
   Final polish layer loaded after every other landing stylesheet.
   Adds ten visible "alive" effects across the page:

     1.  Top scroll-progress bar (gradient fills as you scroll)
     2.  Background data-grid (very low opacity dots, ambient)
     3.  Animated gradient borders on hero / elevated cards
     4.  Pulse pings on the active progress-dot of every scene
     5.  Ambient breathing on eyebrow chips
     6.  Marquee edge-fade + hover pause
     7.  Magnetic hover lift on bento-grid feature cards
     8.  Stage-change shimmer on .scene-headline (paired with JS scramble)
     9.  Subtle scanline on .scene-3d-track edges
     10. Pulse on the active method-step node
   ===================================================================== */


/* ── 1. Top scroll-progress bar ──────────────────────────────────────── */
.ria-scrollbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}
.ria-scrollbar > span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,
    var(--primary-color, #8b5cf6) 0%,
    var(--accent-color, #22d3ee) 50%,
    #f472b6 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.06s linear;
  box-shadow:
    0 0 6px rgba(139, 92, 246, 0.6),
    0 0 14px rgba(34, 211, 238, 0.3);
}


/* ── 2. Ambient dot grid (full-page, sub-perceptual) ─────────────────── */
.ria-grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 85%);
  animation: ria-grid-drift 60s linear infinite;
}
@keyframes ria-grid-drift {
  to { background-position: 32px 32px; }
}


/* ── 3. Animated gradient borders on hero / elevated cards ──────────── */
.card-hero,
.card-elevated {
  position: relative;
}
.card-hero::before,
.card-elevated::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(139, 92, 246, 0.55) 0%,
    rgba(34, 211, 238, 0.4) 35%,
    rgba(244, 114, 182, 0.3) 65%,
    rgba(139, 92, 246, 0.55) 100%);
  background-size: 300% 100%;
  z-index: -1;
  opacity: 0;
  animation: ria-border-pan 8s linear infinite paused;
  transition: opacity 0.4s ease;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}
.card-hero:hover::before,
.card-elevated:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes ria-border-pan {
  to { background-position: 300% 0; }
}


/* ── 4. Pulse pings on the active progress dot ──────────────────────── */
.scroll-scene-progress .dot,
.scene-progress-dots .dot {
  position: relative;
}
.scroll-scene[style*="--stage:"] .scroll-scene-progress .dot[data-stage-active]::after,
.scene-3d[style*="--c-stage:"] .scene-progress-dots .dot[data-stage-active]::after {
  /* JS sets data-stage-active on the active dot. */
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid var(--accent-color, #22d3ee);
  opacity: 0;
  animation: ria-dot-ping 1.6s ease-out infinite;
}
@keyframes ria-dot-ping {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(2.4); }
}


/* ── 5. Ambient breathing on eyebrow chips ──────────────────────────── */
.editorial-eyebrow,
.scene-eyebrow,
.ready-eyebrow,
.pipeline-eyebrow,
.scroll-eyebrow {
  animation: ria-eyebrow-breathe 5.2s ease-in-out infinite;
}
@keyframes ria-eyebrow-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(139, 92, 246, 0),
      inset 0 0 0 0 rgba(34, 211, 238, 0);
  }
  50% {
    box-shadow:
      0 0 22px -8px rgba(139, 92, 246, 0.35),
      inset 0 0 18px -8px rgba(34, 211, 238, 0.15);
  }
}


/* ── 6. Marquee polish: edge fade + hover pause ──────────────────────── */
.editorial-marquee {
  mask-image: linear-gradient(90deg,
    transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, black 8%, black 92%, transparent 100%);
}
.editorial-marquee:hover .editorial-marquee-track {
  animation-play-state: paused;
}
.editorial-marquee-track span {
  transition: color 0.3s ease, transform 0.3s ease;
}
.editorial-marquee-track span:hover {
  color: var(--text-primary) !important;
  transform: translateY(-1px);
}


/* ── 7. Magnetic hover lift on bento-grid feature cards ─────────────── */
.bento-grid .feature-card {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease;
}
.bento-grid .feature-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    0 24px 48px -24px rgba(139, 92, 246, 0.5),
    0 0 0 1px rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.28);
}
.bento-grid .feature-card .icon-box {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bento-grid .feature-card:hover .icon-box {
  transform: scale(1.08) rotate(-3deg);
}


/* ── 8. Stage-change shimmer on .scene-headline ──────────────────────── */
.scene-headline {
  position: relative;
}
.scene-text-panel[data-stage] {
  /* When a new panel becomes active (.is-active class toggled by JS),
     the headline gets a brief shimmer pass. */
}
.scene-text-panel.is-active .scene-headline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: ria-shimmer 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-mask-image: linear-gradient(black, black);
}
@keyframes ria-shimmer {
  0%   { transform: translateX(-120%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}


/* ── 9. Active method-step node pulse ────────────────────────────────── */
.scene-methodology[style*="--c-stage: 1"] .method-step:nth-child(1 of .method-step) .node,
.scene-methodology[style*="--c-stage:1"]  .method-step:nth-child(1 of .method-step) .node,
.scene-methodology[style*="--c-stage: 2"] .method-step:nth-child(2 of .method-step) .node,
.scene-methodology[style*="--c-stage:2"]  .method-step:nth-child(2 of .method-step) .node,
.scene-methodology[style*="--c-stage: 3"] .method-step:nth-child(3 of .method-step) .node,
.scene-methodology[style*="--c-stage:3"]  .method-step:nth-child(3 of .method-step) .node,
.scene-methodology[style*="--c-stage: 4"] .method-step:nth-child(4 of .method-step) .node,
.scene-methodology[style*="--c-stage:4"]  .method-step:nth-child(4 of .method-step) .node,
.scene-methodology[style*="--c-stage: 5"] .method-step:nth-child(5 of .method-step) .node,
.scene-methodology[style*="--c-stage:5"]  .method-step:nth-child(5 of .method-step) .node {
  animation: ria-node-pulse 2s ease-in-out infinite;
}
@keyframes ria-node-pulse {
  0%, 100% {
    box-shadow:
      0 14px 30px -10px rgba(139, 92, 246, 0.6),
      0 0 0 4px rgba(139, 92, 246, 0.18),
      0 0 36px rgba(34, 211, 238, 0.4);
  }
  50% {
    box-shadow:
      0 14px 30px -10px rgba(139, 92, 246, 0.8),
      0 0 0 8px rgba(139, 92, 246, 0.10),
      0 0 56px rgba(34, 211, 238, 0.6);
  }
}


/* ── 10. Cursor trail (set up by JS — hidden on touch) ───────────────── */
.ria-cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(139, 92, 246, 0.55) 0%,
    rgba(34, 211, 238, 0.35) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 9000;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}


/* ── Reduced motion: kill everything kinetic ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ria-grid-bg,
  .card-hero::before,
  .card-elevated::before,
  .scroll-scene-progress .dot[data-stage-active]::after,
  .scene-progress-dots .dot[data-stage-active]::after,
  .editorial-eyebrow,
  .scene-eyebrow,
  .ready-eyebrow,
  .pipeline-eyebrow,
  .scroll-eyebrow,
  .scene-text-panel.is-active .scene-headline::after,
  .scene-methodology .method-step .node {
    animation: none !important;
  }
  .ria-cursor-trail { display: none !important; }
  .ria-scrollbar > span { transition: none !important; }
  .editorial-marquee-track { animation: none !important; }
}


/* ── Mobile: keep most but tone down ─────────────────────────────────── */
@media (max-width: 700px) {
  .ria-grid-bg { background-size: 24px 24px; opacity: 0.25; }
  .ria-cursor-trail { display: none !important; }   /* no cursor on touch */
  .ria-scrollbar { height: 2px; }
}