/* =====================================================================
   RIA — LANDING 3D ENHANCEMENT LAYER
   Loaded LAST among landing styles. Adds depth, light, and physical feel
   on top of the existing scrollytelling scenes without re-doing the
   structural layout in each scene.

   The improvements arrive in five waves:
     1. Mouse-parallax CSS vars (set by landing-3d-enhancements.js):
          --mouse-x / --mouse-y — 0..1, scoped per scene
          --mouse-tilt-x / --mouse-tilt-y — derived rotation
        Used by *every* 3D scene's root element to add a gentle "follow
        the cursor" tilt. Disabled on touch via the JS side.
     2. Scroll-velocity CSS var (--scroll-velocity, 0..1) that drives a
        glow intensity multiplier so hot scrolling makes the page hum.
     3. Hologram scan-line overlay on key surfaces (paper, orb, cards).
     4. Depth-of-field blur for non-focused parallax layers.
     5. Particle burst classes that JS toggles on stage transitions.

   All effects collapse under prefers-reduced-motion.
   ===================================================================== */

:root {
  /* Default values so CSS works without the JS layer. */
  --mouse-x: 0.5;
  --mouse-y: 0.5;
  --mouse-tilt-x: 0;    /* in deg, set by JS */
  --mouse-tilt-y: 0;
  --scroll-velocity: 0;  /* 0..1, set by JS */

  /* Easings tuned for physical feel. */
  --ease-spring-soft:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-spring-firm:  cubic-bezier(0.5,  1.8, 0.65, 1);
  --ease-out-strong:   cubic-bezier(0.16, 1, 0.2, 1);
}


/* ──────────────────────────────────────────────────────────────────────
   1. Mouse parallax: every 3D root listens to --mouse-tilt-{x,y}.
   We compose this with whatever transform the scene already applies.
   Implementation: each scene's root container ALREADY has its own
   transform; we add the mouse tilt via an inner pseudo-wrapper.
   ────────────────────────────────────────────────────────────────────── */

@media (hover: hover) and (pointer: fine) {
  .paper-3d,
  .pipeline-shapes,
  .commit-orbit,
  .support-stack,
  .living-db-core,
  .card-hero,
  .card-elevated {
    will-change: transform;
    transition: transform 0.6s var(--ease-spring-soft);
  }

  /* Add the parallax tilt as an additional transform applied via an
     enhancement class — JS sets `data-parallax="on"` on the page body. */
  body[data-parallax="on"] .paper-3d {
    transform:
      translateZ(calc(var(--progress, 0) * 60px))
      translateY(calc((var(--progress, 0) - 0.5) * -40px))
      rotateX(calc(var(--progress, 0) * 14deg + 4deg + var(--mouse-tilt-y) * 1deg))
      rotateY(calc(-12deg + var(--progress, 0) * 32deg + var(--mouse-tilt-x) * 1deg))
      rotateZ(calc((var(--progress, 0) - 0.5) * -3deg));
  }

  body[data-parallax="on"] .pipeline-shapes {
    transform:
      rotateX(calc(var(--mouse-tilt-y) * 0.6deg))
      rotateY(calc(var(--mouse-tilt-x) * 1deg));
  }

  body[data-parallax="on"] .commit-orbit {
    /* Combine the existing scroll-driven rotation with mouse tilt. */
    transform:
      rotateX(calc(8deg + var(--mouse-tilt-y) * 0.5deg))
      rotateY(calc(var(--c-progress, 0) * -120deg + var(--mouse-tilt-x) * 1.5deg));
  }

  body[data-parallax="on"] .support-stack {
    transform:
      rotateX(calc(8deg + var(--c-progress, 0) * 16deg + var(--mouse-tilt-y) * 0.4deg))
      rotateY(calc(var(--c-progress, 0) * 35deg + var(--mouse-tilt-x) * 1deg));
  }

  body[data-parallax="on"] .living-db-core {
    transform:
      rotateX(calc(var(--c-progress, 0) * 12deg + 6deg + var(--mouse-tilt-y) * 0.6deg))
      rotateY(calc(var(--c-progress, 0) * 60deg + var(--mouse-tilt-x) * 1.2deg))
      scale(calc(0.85 + var(--c-progress, 0) * 0.18));
  }
}


/* ──────────────────────────────────────────────────────────────────────
   2. Scroll-velocity glow — when --scroll-velocity is high, brand
   surfaces hum brighter. CSS calc() blends with existing shadows.
   ────────────────────────────────────────────────────────────────────── */

.paper-3d,
.living-db-core,
.commit-card,
.pipeline-shape::before {
  --velocity-glow:
    0 0 calc(8px + var(--scroll-velocity, 0) * 24px)
    rgba(139, 92, 246, calc(0.18 + var(--scroll-velocity, 0) * 0.45));
}

/* Stack the velocity glow with whatever box-shadow the element already
   has. We use a separate `filter: drop-shadow` so it composes cleanly. */
.living-db-core {
  filter: drop-shadow(var(--velocity-glow));
}
.paper-3d {
  filter: drop-shadow(var(--velocity-glow));
}


/* ──────────────────────────────────────────────────────────────────────
   3. Hologram scan lines + sheen.
   A thin animated overlay that runs over key surfaces — gives the 3D a
   "data-projected" feel. Subtle; not a meme.
   ────────────────────────────────────────────────────────────────────── */

.hologram {
  position: relative;
}
.hologram::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(34, 211, 238, 0.0) 0px,
      rgba(34, 211, 238, 0.0) 3px,
      rgba(34, 211, 238, 0.045) 3px,
      rgba(34, 211, 238, 0.045) 4px
    );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
  mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 92%, transparent 100%);
  animation: hologram-scan 6s linear infinite;
}
.hologram::after {
  /* Bright sheen sweep — once every ~8s — slides diagonally. */
  content: "";
  position: absolute;
  inset: -4%;
  background: linear-gradient(115deg,
    transparent 38%,
    rgba(167, 139, 250, 0.18) 48%,
    rgba(34, 211, 238, 0.22) 50%,
    rgba(244, 114, 182, 0.18) 52%,
    transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  transform: translateX(-120%);
  animation: hologram-sheen 8s ease-in-out 1.2s infinite;
}
@keyframes hologram-scan {
  to { background-position: 0 32px; }
}
@keyframes hologram-sheen {
  0%   { transform: translateX(-120%); }
  35%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Apply hologram to the paper, orb, and commitment cards by default. */
.paper-page, .living-db-core, .commit-card { /* avoid double-pseudo by class match */ }
.paper-3d .paper-page,
.living-db-core,
.commit-card,
.card-hero {
  position: relative;
  overflow: hidden;
}
.paper-3d .paper-page::after,
.living-db-core::after,
.commit-card::after {
  /* opt-in: we override existing ::after where applicable in scene files;
     here we add the sheen as an extra layer only when no other ::after
     conflict exists. */
}

/* Use a separate inner div that scenes mark with `.is-hologram` so we
   don't fight existing ::after rules — JS adds the class. */
.is-hologram::before,
.is-hologram > .hologram-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(34, 211, 238, 0.0) 0px,
      rgba(34, 211, 238, 0.0) 3px,
      rgba(34, 211, 238, 0.05) 3px,
      rgba(34, 211, 238, 0.05) 4px
    );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10;
  border-radius: inherit;
  animation: hologram-scan 6s linear infinite;
}


/* ──────────────────────────────────────────────────────────────────────
   4. Depth-of-field — backgrounded scenes blur slightly so the
   currently-active scene feels in-focus.
   JS toggles `data-focus="on"` on the scene closest to viewport centre;
   off-focus sections get a tiny scale-down + opacity drop.
   ────────────────────────────────────────────────────────────────────── */

.scene-3d,
.scroll-scene,
.pipeline-scene,
.verification-scene {
  transition:
    filter 0.6s var(--ease-out-strong),
    opacity 0.6s var(--ease-out-strong);
}

.scene-3d:not([data-focus="on"]),
.scroll-scene:not([data-focus="on"]),
.pipeline-scene:not([data-focus="on"]),
.verification-scene:not([data-focus="on"]) {
  /* defaults match focused — change only when explicitly off-focus */
}
.scene-3d[data-focus="off"],
.scroll-scene[data-focus="off"],
.pipeline-scene[data-focus="off"],
.verification-scene[data-focus="off"] {
  filter: blur(0.5px) brightness(0.85);
  opacity: 0.85;
}

/* ──────────────────────────────────────────────────────────────────────
   5. Story rail — compact chapter orientation for desktop scrollytelling.
   ────────────────────────────────────────────────────────────────────── */

.story-rail {
  position: fixed;
  left: clamp(1rem, 2.3vw, 2rem);
  top: 50%;
  transform: translateY(-50%) translateX(-12px);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.45rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  background: rgba(8, 9, 13, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px -30px rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-strong),
              transform 0.35s var(--ease-out-strong);
}
.story-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
.story-rail button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 1.1rem;
  min-height: 1.1rem;
  padding: 0.2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.28s var(--ease-out-strong), color 0.2s ease;
}
.story-rail:hover button,
.story-rail button:focus-visible {
  width: 7.3rem;
}
.story-rail button:focus-visible {
  outline: 1px solid rgba(34,211,238,0.5);
  outline-offset: 3px;
}
.story-rail-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
  transition: background 0.2s ease, transform 0.25s var(--ease-spring-soft), box-shadow 0.2s ease;
}
.story-rail-label {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out-strong);
}
.story-rail:hover .story-rail-label,
.story-rail button:focus-visible .story-rail-label {
  opacity: 1;
  transform: translateX(0);
}
.story-rail button.is-active {
  color: var(--text-primary);
}
.story-rail button.is-active .story-rail-dot {
  transform: scale(1.35);
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  box-shadow: 0 0 18px rgba(34,211,238,0.45);
}


/* ──────────────────────────────────────────────────────────────────────
   6. Particle burst — class added by JS on stage transitions.
   The burst is a ring of 12 tiny dots that scale-out + fade.
   We re-trigger by removing then re-adding the class.
   ────────────────────────────────────────────────────────────────────── */

.particle-burst {
  position: absolute;
  inset: 50% 0 0 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 8;
}
.particle-burst .p {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #22d3ee);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
  opacity: 0;
  --angle: 0deg;
  animation: particle-shoot 0.95s var(--ease-spring-firm) forwards;
}
.particle-burst .p:nth-child(1)  { --angle:   0deg; }
.particle-burst .p:nth-child(2)  { --angle:  30deg; }
.particle-burst .p:nth-child(3)  { --angle:  60deg; }
.particle-burst .p:nth-child(4)  { --angle:  90deg; }
.particle-burst .p:nth-child(5)  { --angle: 120deg; }
.particle-burst .p:nth-child(6)  { --angle: 150deg; }
.particle-burst .p:nth-child(7)  { --angle: 180deg; }
.particle-burst .p:nth-child(8)  { --angle: 210deg; }
.particle-burst .p:nth-child(9)  { --angle: 240deg; }
.particle-burst .p:nth-child(10) { --angle: 270deg; }
.particle-burst .p:nth-child(11) { --angle: 300deg; }
.particle-burst .p:nth-child(12) { --angle: 330deg; }

@keyframes particle-shoot {
  0%   { opacity: 1; transform: rotate(var(--angle)) translateX(0) scale(1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(140px) scale(0.4); }
}

/* ──────────────────────────────────────────────────────────────────────
   7. Animated connecting beams using SVG dasharray progress.
   The Living Database scene has beams from source nodes into the orb;
   we make them visually fill with scroll progress instead of just being
   solid lines.
   ────────────────────────────────────────────────────────────────────── */

.db-source::after {
  /* Re-skin the existing beam to use a dasharray "filling" effect. */
  background: linear-gradient(90deg,
    rgba(139, 92, 246, 0.7) 0%,
    rgba(34, 211, 238, 0.45) 50%,
    rgba(139, 92, 246, 0.0) 100%);
  background-size: 200% 100%;
  animation: beam-flow 3s linear infinite;
}
.db-source.s-2::after {
  background: linear-gradient(270deg,
    rgba(139, 92, 246, 0.7) 0%,
    rgba(34, 211, 238, 0.45) 50%,
    rgba(139, 92, 246, 0.0) 100%);
  background-size: 200% 100%;
}
@keyframes beam-flow {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ──────────────────────────────────────────────────────────────────────
   8. Better easing applied where current transitions are linear-ish.
   ────────────────────────────────────────────────────────────────────── */

.scroll-panel,
.scene-text-panel,
.commit-card,
.support-coin,
.method-step .node,
.pipeline-shape {
  transition-timing-function: var(--ease-spring-soft) !important;
}


/* ──────────────────────────────────────────────────────────────────────
   8. Cursor follow spotlight — already wired by ria-motion.js setting
   --spotlight-x / --spotlight-y on .card-hero / .card-elevated. We add
   the visible spotlight overlay here so it actually paints.
   ────────────────────────────────────────────────────────────────────── */

.card-hero,
.card-elevated,
.kpi-card {
  --spotlight-x: 50%;
  --spotlight-y: 50%;
  position: relative;
  overflow: hidden;
}
.card-hero::after,
.card-elevated::after,
.kpi-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--spotlight-x) var(--spotlight-y),
    rgba(139, 92, 246, 0.10) 0%,
    rgba(34, 211, 238, 0.05) 30%,
    transparent 60%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-strong);
  pointer-events: none;
  z-index: 1;
}
.card-hero:hover::after,
.card-elevated:hover::after,
.kpi-card:hover::after {
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────────
   9. Reduced motion + mobile collapse
   ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  /* No mouse parallax */
  body[data-parallax="on"] .paper-3d,
  body[data-parallax="on"] .pipeline-shapes,
  body[data-parallax="on"] .commit-orbit,
  body[data-parallax="on"] .support-stack,
  body[data-parallax="on"] .living-db-core {
    transform: unset;
  }
  /* No velocity glow */
  :root { --scroll-velocity: 0 !important; }
  .paper-3d, .living-db-core { filter: none !important; }
  /* No hologram scan/sheen */
  .is-hologram::before,
  .is-hologram > .hologram-overlay,
  .hologram::before,
  .hologram::after { animation: none !important; opacity: 0 !important; }
  /* No focus blur */
  .scene-3d[data-focus="off"],
  .scroll-scene[data-focus="off"],
  .pipeline-scene[data-focus="off"],
  .verification-scene[data-focus="off"] { filter: none !important; opacity: 1 !important; }
  .story-rail { display: none !important; }
  /* No particle burst */
  .particle-burst .p { animation: none !important; opacity: 0 !important; }
  /* Spotlight off */
  .card-hero::after, .card-elevated::after, .kpi-card::after { display: none; }
}

@media (max-width: 700px) {
  /* Hologram disabled on phones — too much paint */
  .is-hologram::before,
  .is-hologram > .hologram-overlay { display: none !important; }
  /* Particle burst smaller */
  @keyframes particle-shoot {
    0%   { opacity: 1; transform: rotate(var(--angle)) translateX(0) scale(0.7); }
    100% { opacity: 0; transform: rotate(var(--angle)) translateX(80px) scale(0.3); }
  }
}

@media (max-width: 1024px) {
  .story-rail { display: none !important; }
}