/* =====================================================================
   RIA — LANDING CINEMATIC LAYER
   Pulls the landing further toward the oryzo.ai / awwwards-grade feel:

     • Bigger cinematic intro (mark zooms, horizon line splits)
     • Character-split reveals on hero/section headlines
     • Background tint that shifts subtly per section
     • Second 3D scroll scene: PDF → AI → Report pipeline

   Pure CSS where possible; JS pairing in landing-cinematic.js.
   ===================================================================== */

:root {
  --cinematic-ease: cubic-bezier(0.65, 0, 0.05, 1);
  --cinematic-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Replace the simple splash with a cinematic intro ────────────────── */
.editorial-splash {
  background: #050507 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  z-index: 99999 !important;
}

/* Horizon line that splits open */
.editorial-splash::before,
.editorial-splash::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(139, 92, 246, 0.5) 30%,
    rgba(34, 211, 238, 0.6) 50%,
    rgba(139, 92, 246, 0.5) 70%,
    transparent 100%);
  top: 50%;
  opacity: 0;
  animation: horizonAppear 0.5s var(--cinematic-ease) 0.1s forwards,
             horizonSplit 0.7s var(--cinematic-ease) 1.0s forwards;
  pointer-events: none;
}
.editorial-splash::after {
  animation: horizonAppear 0.5s var(--cinematic-ease) 0.1s forwards,
             horizonSplitDown 0.7s var(--cinematic-ease) 1.0s forwards;
}
@keyframes horizonAppear {
  to { opacity: 1; }
}
@keyframes horizonSplit {
  to { top: 0%; opacity: 0; }
}
@keyframes horizonSplitDown {
  to { top: 100%; opacity: 0; }
}

.editorial-splash-mark {
  /* Override the simpler animation from landing-editorial.css */
  animation: splashZoom 1.6s var(--cinematic-ease) 0.05s forwards !important;
  transform-origin: center;
}
@keyframes splashZoom {
  0%   { opacity: 0; transform: scale(0.6); filter: blur(8px); }
  35%  { opacity: 1; transform: scale(1); filter: blur(0); }
  70%  { opacity: 1; transform: scale(1.05); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.45); filter: blur(2px); }
}

.editorial-splash-mark .word {
  font-size: 1.6rem !important;
  letter-spacing: -0.04em !important;
}
.editorial-splash-mark .dot {
  width: 18px !important;
  height: 18px !important;
}

.editorial-splash-tagline {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  animation: taglineIn 0.5s var(--cinematic-ease) 0.6s forwards,
             taglineOut 0.4s var(--cinematic-ease) 1.4s forwards;
  white-space: nowrap;
}
@keyframes taglineIn {
  from { opacity: 0; letter-spacing: 0.6em; }
  to   { opacity: 1; letter-spacing: 0.4em; }
}
@keyframes taglineOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── Character-split reveal: each .char rises from below ─────────────── */
/* Default = visible. Only hide while a `.is-splitting` flag is on the
   parent — that flag is added by JS only AFTER it confirms it can
   animate (no early returns), and removed when reveal is triggered.
   Failure mode (JS error, no IO support, broken script): chars stay
   visible. Title can never disappear permanently. */
[data-split-text] .char {
  display: inline-block;
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--cinematic-ease),
              transform 0.7s var(--cinematic-ease);
  will-change: transform, opacity;
  /* CRITICAL: the parent uses background-clip:text + transparent
     text-fill-color to render gradient ink. After splitting into char
     spans, the parent has zero direct text — so its painted gradient
     covers nothing and the chars inherit the transparent fill, going
     invisible. We re-apply the same gradient at .char level so every
     char carries the gradient ink directly.
     Override the H1 hero's white→grey gradient and the accent-word's
     violet→cyan→pink gradient via more specific selectors below. */
  background: linear-gradient(180deg, #ffffff 0%, #ededef 40%, rgba(237, 237, 239, 0.65) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Accent-word inherits its own pan-animated gradient at char level. */
[data-split-text] .accent-word .char {
  background: linear-gradient(135deg,
    var(--primary-color, #8b5cf6) 0%,
    var(--accent-color, #22d3ee) 50%,
    #f472b6 100%);
  background-size: 220% 220%;
  -webkit-background-clip: text;
          background-clip: text;
  animation: accentPan 9s ease-in-out infinite;
}
[data-split-text].is-splitting .char {
  opacity: 0;
  transform: translateY(110%) rotateZ(6deg);
}
[data-split-text].is-revealed .char {
  opacity: 1;
  transform: translateY(0) rotateZ(0);
}
[data-split-text] .word {
  display: inline-block;
  white-space: nowrap;
  /* Reserve descender room so rotated chars don't get clipped. */
  padding-bottom: 0.06em;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.05;
}

/* ── Section tint shifts (set via [data-tint] on body) ───────────────── */
body {
  transition: background-color 1.2s var(--cinematic-ease);
  overflow-x: hidden;
}
body[data-tint="violet"] {
  background-color: #0a0810 !important;
}
body[data-tint="cyan"] {
  background-color: #06090d !important;
}
body[data-tint="amber"] {
  background-color: #0c0805 !important;
}
body[data-tint="green"] {
  background-color: #050d0a !important;
}
body[data-tint="ink"] {
  background-color: #08080a !important;
}

/* ── Pipeline scene (PDF → AI → Report) ─────────────────────────────── */
.pipeline-scene {
  --p-progress: 0;
  --p-stage: 0;
  position: relative;
  height: 400vh;
  margin: 4rem 0;
}
.pipeline-track {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  perspective: 1200px;
  overflow: hidden;
}

.pipeline-eyebrow {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.1rem;
}
.pipeline-eyebrow .num { color: var(--accent-color); }
.pipeline-title {
  font-size: clamp(2rem, 1.8vw + 1.4rem, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 4rem;
  background: linear-gradient(180deg, #fff 0%, rgba(237,237,239,0.65) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 18ch;
}

/* Three shapes that morph as you scroll */
.pipeline-shapes {
  display: flex;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  transform-style: preserve-3d;
}
.pipeline-shape {
  width: clamp(96px, 12vw, 160px);
  height: clamp(96px, 12vw, 160px);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.45s var(--cinematic-ease),
              opacity 0.4s ease;
}

/* Each shape gets a glassy face */
.pipeline-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pipeline-shape .icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  z-index: 1;
}
.pipeline-shape .label {
  position: absolute;
  bottom: -2.2rem;
  left: 0; right: 0;
  text-align: center;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Stage 0: shapes flat at rest, pdf colored */
.pipeline-shape.shape-pdf::before {
  background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(167,139,250,0.12));
  border-color: rgba(248,113,113,0.3);
}
.pipeline-shape.shape-ai::before {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(34,211,238,0.18));
  border-color: rgba(167,139,250,0.3);
}
.pipeline-shape.shape-report::before {
  background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(52,211,153,0.18));
  border-color: rgba(34,211,238,0.3);
}

/* Connecting beam between shapes — pulses with progress */
.pipeline-beam {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(248,113,113,0.5) 0%,
    rgba(167,139,250,0.7) 33%,
    rgba(34,211,238,0.7) 66%,
    rgba(52,211,153,0.7) 100%);
  top: 50%;
  left: 0; right: 0;
  transform-origin: left;
  transform: scaleX(var(--p-progress));
  z-index: -1;
  filter: blur(0.5px);
  box-shadow: 0 0 12px rgba(167,139,250,0.5);
}

/* Each stage rotates / scales the shapes */
.pipeline-scene[style*="--p-stage: 0"] .pipeline-shape,
.pipeline-scene[style*="--p-stage:0"]  .pipeline-shape {
  transform: rotateY(0deg) scale(1);
}
.pipeline-scene[style*="--p-stage: 1"] .pipeline-shape.shape-pdf,
.pipeline-scene[style*="--p-stage:1"]  .pipeline-shape.shape-pdf {
  transform: rotateY(180deg) scale(0.9);
  opacity: 0.45;
}
.pipeline-scene[style*="--p-stage: 1"] .pipeline-shape.shape-ai,
.pipeline-scene[style*="--p-stage:1"]  .pipeline-shape.shape-ai {
  transform: rotateY(360deg) scale(1.18);
}
.pipeline-scene[style*="--p-stage: 2"] .pipeline-shape.shape-pdf,
.pipeline-scene[style*="--p-stage:2"]  .pipeline-shape.shape-pdf {
  transform: rotateY(180deg) scale(0.85);
  opacity: 0.3;
}
.pipeline-scene[style*="--p-stage: 2"] .pipeline-shape.shape-ai,
.pipeline-scene[style*="--p-stage:2"]  .pipeline-shape.shape-ai {
  transform: rotateY(360deg) scale(1);
  opacity: 0.6;
}
.pipeline-scene[style*="--p-stage: 2"] .pipeline-shape.shape-report,
.pipeline-scene[style*="--p-stage:2"]  .pipeline-shape.shape-report {
  transform: rotateY(360deg) scale(1.25);
}
.pipeline-scene[style*="--p-stage: 3"] .pipeline-shape,
.pipeline-scene[style*="--p-stage:3"]  .pipeline-shape {
  transform: rotateY(360deg) scale(0.8);
  opacity: 0.4;
}
.pipeline-scene[style*="--p-stage: 3"] .pipeline-shape.shape-report,
.pipeline-scene[style*="--p-stage:3"]  .pipeline-shape.shape-report {
  transform: rotateY(720deg) scale(2.4);
  opacity: 1;
}

/* Final stage caption */
.pipeline-final {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  transition: opacity 0.5s var(--cinematic-ease),
              transform 0.5s var(--cinematic-ease);
  text-align: center;
}
.pipeline-final .num {
  font-size: clamp(3.5rem, 6vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  background: linear-gradient(180deg, #fff 0%, rgba(34,211,238,0.7) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pipeline-final .label {
  display: block;
  margin-top: 0.3rem;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.pipeline-scene[style*="--p-stage: 3"] .pipeline-final,
.pipeline-scene[style*="--p-stage:3"]  .pipeline-final {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Verification scrollytelling: visible evidence chain ────────────── */
.verification-scene {
  --v-progress: 0;
  --v-stage: 0;
  position: relative;
  height: 500vh;
  margin: 4rem 0 2rem;
  isolation: isolate;
  overflow-x: clip;
}
.verification-track {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: 0 clamp(1rem, 4vw, 4rem);
  overflow: hidden;
}
.verification-copy .pipeline-title {
  text-align: left;
  margin-bottom: 1rem;
  max-width: 12ch;
}
.verification-copy p {
  max-width: 42ch;
  color: var(--text-secondary);
  font-size: 1.04rem;
  line-height: 1.6;
}
.verification-board {
  position: relative;
  min-height: min(620px, 76vh);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    radial-gradient(circle at 68% 18%, rgba(52,211,153,0.16), transparent 42%),
    rgba(8, 9, 13, 0.78);
  box-shadow: 0 28px 90px -52px rgba(0,0,0,0.88);
  overflow: hidden;
}
.verification-board::before {
  content: "";
  position: absolute;
  left: 16%;
  top: 10%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, rgba(139,92,246,0), rgba(139,92,246,0.75), rgba(34,211,238,0.75), rgba(52,211,153,0));
  transform: scaleY(var(--v-progress));
  transform-origin: top;
  box-shadow: 0 0 22px rgba(34,211,238,0.28);
}
.trail-card {
  position: absolute;
  left: 23%;
  width: min(480px, 64%);
  min-height: 86px;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(26px) scale(0.96);
  opacity: 0.22;
  transition: transform 0.55s var(--cinematic-ease), opacity 0.45s ease, border-color 0.45s ease;
}
.trail-card::before {
  content: "";
  position: absolute;
  left: calc(-7% - 21px);
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 20px currentColor;
  transform: translateY(-50%);
}
.trail-card span {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.trail-card strong {
  color: var(--text-primary);
  font-size: clamp(0.96rem, 0.35vw + 0.9rem, 1.12rem);
  line-height: 1.35;
}
.trail-source { top: 12%; color: #f87171; }
.trail-rule { top: 30%; color: #fbbf24; }
.trail-web { top: 48%; color: #22d3ee; }
.trail-review { top: 66%; color: #34d399; }
.trail-report {
  position: absolute;
  right: 7%;
  bottom: 7%;
  width: min(220px, 36%);
  padding: 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(52,211,153,0.22);
  background: rgba(52,211,153,0.08);
  transform: translateY(28px) scale(0.92);
  opacity: 0;
  transition: transform 0.55s var(--cinematic-spring), opacity 0.45s ease;
}
.trail-score {
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: #fff;
}
.trail-score span {
  font-size: 0.28em;
  color: var(--text-muted);
  letter-spacing: 0;
}
.trail-report p {
  margin: 0.55rem 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.4;
}
.verification-scene[style*="--v-stage: 0"] .trail-source,
.verification-scene[style*="--v-stage:0"]  .trail-source,
.verification-scene[style*="--v-stage: 1"] .trail-source,
.verification-scene[style*="--v-stage:1"]  .trail-source,
.verification-scene[style*="--v-stage: 1"] .trail-rule,
.verification-scene[style*="--v-stage:1"]  .trail-rule,
.verification-scene[style*="--v-stage: 2"] .trail-card,
.verification-scene[style*="--v-stage:2"]  .trail-card,
.verification-scene[style*="--v-stage: 3"] .trail-card,
.verification-scene[style*="--v-stage:3"]  .trail-card,
.verification-scene[style*="--v-stage: 4"] .trail-card,
.verification-scene[style*="--v-stage:4"]  .trail-card {
  opacity: 1;
  transform: translateX(0) scale(1);
  border-color: color-mix(in srgb, currentColor 34%, rgba(255,255,255,0.08));
}
.verification-scene[style*="--v-stage: 3"] .trail-report,
.verification-scene[style*="--v-stage:3"]  .trail-report,
.verification-scene[style*="--v-stage: 4"] .trail-report,
.verification-scene[style*="--v-stage:4"]  .trail-report {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .editorial-splash-mark,
  .editorial-splash-tagline,
  .editorial-splash::before,
  .editorial-splash::after,
  [data-split-text] .char,
  body,
  .pipeline-scene,
  .pipeline-track,
  .pipeline-shape,
  .pipeline-final,
  .verification-scene,
  .verification-track,
  .trail-card,
  .trail-report {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .pipeline-scene { height: auto; }
  .pipeline-track { position: static; height: auto; padding: 4rem 2rem; }
  .verification-scene { height: auto; }
  .verification-track { position: static; min-height: auto; padding: 4rem 2rem; }
  .editorial-splash { display: none !important; }
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .pipeline-shapes { gap: 1.2rem; }
  .pipeline-shape { width: 72px; height: 72px; }
  .pipeline-shape .label { font-size: 0.55rem; bottom: -1.6rem; }
  .verification-scene { height: auto; }
  .verification-track {
    position: static;
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 4rem 0.5rem;
  }
  .verification-board { min-height: 680px; }
  .trail-card {
    left: 22%;
    width: 68%;
  }
  .trail-report {
    right: 5%;
    width: 46%;
  }
}