/* ============================================================================
   REEL/REAL — ENHANCEMENT LAYER
   ----------------------------------------------------------------------------
   Purely additive, same as animate.css: no colours, layout, fonts, or markup
   are changed here — every value below is pulled from tokens.css. This file
   adds an ambient forensic-lab atmosphere (drifting light, scan grain, cursor
   glow), richer text choreography, and physical hover feedback on cards,
   buttons, and media. All fixed/decorative nodes are injected at runtime by
   js/enhance.js and are pointer-events:none, so nothing here can shift layout
   or intercept clicks. Safe to delete alongside enhance.js.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ============================================================
     AMBIENT BACKGROUND — fixed, behind everything, never scrolls
     ============================================================ */
  #rr-atmosphere {
    position: fixed; inset: 0; z-index: -2;
    overflow: hidden; pointer-events: none;
  }
  .rr-blob {
    position: absolute; border-radius: 50%;
    filter: blur(60px);
    opacity: .38;
    will-change: transform;
  }
  .rr-blob.b1 {
    width: 46vw; height: 46vw; top: -14vw; left: -10vw;
    background: radial-gradient(circle at 35% 35%, var(--accent-orange), transparent 70%);
    animation: rrDrift1 26s ease-in-out infinite;
  }
  .rr-blob.b2 {
    width: 40vw; height: 40vw; top: 10vh; right: -14vw;
    background: radial-gradient(circle at 60% 40%, var(--accent-blue), transparent 70%);
    animation: rrDrift2 32s ease-in-out infinite;
  }
  .rr-blob.b3 {
    width: 50vw; height: 50vw; bottom: -22vw; left: 18vw;
    background: radial-gradient(circle at 50% 50%, var(--forest-green), transparent 72%);
    opacity: .16;
    animation: rrDrift3 38s ease-in-out infinite;
  }
  .rr-blob.b4 {
    width: 30vw; height: 30vw; bottom: 4vh; right: 6vw;
    background: radial-gradient(circle at 50% 50%, var(--bg-pink), transparent 70%);
    opacity: .5;
    animation: rrDrift2 30s ease-in-out infinite reverse;
  }

  @keyframes rrDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(6vw, 4vh) scale(1.08); }
    66%      { transform: translate(-3vw, 7vh) scale(.95); }
  }
  @keyframes rrDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-7vw, 6vh) scale(1.12); }
  }
  @keyframes rrDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(4vw, -5vh) scale(1.06); }
  }

  /* Fine grain overlay — a whisper of analog texture over the flat cream. */
  #rr-grain {
    position: fixed; inset: -100px; z-index: -1;
    pointer-events: none; opacity: .05; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    animation: rrGrainShift 1.1s steps(4) infinite;
  }
  @keyframes rrGrainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-40px, 20px); }
    50%  { transform: translate(30px, -30px); }
    75%  { transform: translate(-20px, -20px); }
    100% { transform: translate(0, 0); }
  }

  /* Cursor-follow glow — desktop only, extremely subtle. Position is set via
     custom properties written by enhance.js on pointermove. */
  #rr-cursor-glow {
    position: fixed; z-index: -1; pointer-events: none;
    width: 480px; height: 480px; left: 0; top: 0;
    transform: translate(calc(var(--rr-x, 50vw) - 50%), calc(var(--rr-y, 50vh) - 50%));
    background: radial-gradient(circle, rgba(20, 77, 55, 0.10), transparent 68%);
    opacity: 0; transition: opacity .4s ease;
  }
  #rr-cursor-glow.on { opacity: 1; }
  .dark-theme-section ~ #rr-cursor-glow,
  body.rr-on-dark #rr-cursor-glow {
    background: radial-gradient(circle, rgba(245, 243, 238, 0.10), transparent 68%);
  }

  /* Faint drifting blueprint grid — a quiet nod to "schematic analysis",
     confined to the hero section only (not fixed to the viewport, so it
     never shows up behind the upload/report sections below, and no longer
     touches the fixed masthead at all). */
  /* No padding override here: site.css already reserves 120px at the top of
     the hero for the fixed masthead. */
  .hero { overflow: hidden; z-index: 0; }
  #rr-grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    opacity: .16;
    background-image:
      linear-gradient(var(--forest-green) 1px, transparent 1px),
      linear-gradient(90deg, var(--forest-green) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 40%, transparent 88%);
            mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 40%, transparent 88%);
    animation: rrGridDrift 60s linear infinite;
  }
  @keyframes rrGridDrift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 560px 280px, 560px 280px; }
  }

  /* ============================================================
     HERO TITLE — word-by-word rise, letter-tight kinetic entrance
     ============================================================ */
  .title .rr-word {
    display: inline-block;
    opacity: 0; transform: translateY(.5em) rotate(2deg);
    animation: rrWordIn .7s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  @keyframes rrWordIn {
    to { opacity: 1; transform: translateY(0) rotate(0); }
  }

  /* Give the italic tagline a slightly heavier glow pulse than stock animate.css */
  .title span { text-shadow: 0 0 26px rgba(239, 99, 55, 0.18); }

  /* Statement line: gentle word-wipe once scrolled into view */
  .statement p { position: relative; }

  /* ============================================================
     HEADINGS — a quick forensic "glitch" flicker on hover, on
     brand for a deepfake-detection tool
     ============================================================ */
  .sec-head h2, .drop h3 {
    position: relative; cursor: default;
  }
  .sec-head h2:hover, .drop h3:hover { animation: rrGlitch .38s steps(2, jump-none); }
  @keyframes rrGlitch {
    0%   { text-shadow: 0 0 0 transparent; transform: translate(0, 0); }
    20%  { text-shadow: -2px 0 var(--accent-orange), 2px 0 var(--accent-blue); transform: translate(-1px, 0); }
    40%  { text-shadow: 2px 0 var(--accent-orange), -2px 0 var(--accent-blue); transform: translate(1px, 0); }
    60%  { text-shadow: -1px 0 var(--accent-orange), 1px 0 var(--accent-blue); transform: translate(-1px, 0); }
    80%  { text-shadow: 1px 0 var(--accent-orange), -1px 0 var(--accent-blue); transform: translate(1px, 0); }
    100% { text-shadow: 0 0 0 transparent; transform: translate(0, 0); }
  }

  /* ============================================================
     CARD SHEEN — pointer-reactive glow only (tilt removed per
     request; JS still sets --mx/--my for the sheen position)
     ============================================================ */
  .glass-panel, .cell {
    transition: box-shadow .35s ease;
    position: relative;
  }
  .cell::before, .glass-panel::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 55%);
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
  }
  .cell:hover::before, .glass-panel:hover::before { opacity: 1; }
  .dark-theme-section .cell::before {
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.10), transparent 55%);
  }
  .method-grid .cell:hover, .glass-panel:hover {
    box-shadow: 0 20px 46px rgba(20, 77, 55, 0.14);
  }

  /* ============================================================
     BUTTONS — light sweep across on hover, magnetic nudge via JS
     ============================================================ */
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-18deg); transition: left .55s ease;
    pointer-events: none;
  }
  .btn:hover::after { left: 120%; }
  .btn.ghost::after { background: linear-gradient(115deg, transparent, rgba(20,77,55,.10), transparent); }


  /* ============================================================
     HERO SLOTS — subtle scan-line sweep + chromatic edge on hover,
     nodding to the "synthetic vs authentic" forensic theme
     ============================================================ */
  .slot { isolation: isolate; }
  .slot::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
    transform: translateY(-120%);
    transition: none;
  }
  .slot:hover::after { animation: rrSlotScan 1.1s ease; }
  @keyframes rrSlotScan {
    from { transform: translateY(-120%); }
    to   { transform: translateY(120%); }
  }
  .slot:hover { box-shadow: 0 20px 46px rgba(20, 77, 55, 0.22); }

  .vs-badge { background-image: conic-gradient(from 0deg, var(--accent-orange), #ffb37a, var(--accent-orange)); }

  /* ============================================================
     TIMELINE BARS — grow from the baseline instead of popping in
     (heights are still set inline by app.js; JS just re-triggers
     the transition on insert)
     ============================================================ */
  .bars button { transition: height .55s cubic-bezier(.2,.8,.2,1), transform .15s ease, opacity .3s ease; }

  /* ============================================================
     STAT NUMBERS — soft pop when a fresh value lands
     ============================================================ */
  .stat strong.rr-pop, #rScore.rr-pop, #rBand.rr-pop, #rDur.rr-pop {
    animation: rrNumberPop .4s cubic-bezier(.2,.9,.3,1.2);
  }
  @keyframes rrNumberPop {
    0%   { opacity: .3; transform: translateY(4px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Badge gets a gentle glow that matches its verdict colour */
  .badge { animation: rrBadgeGlow 2.4s ease-in-out infinite; }
  @keyframes rrBadgeGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(239, 99, 55, 0); }
    50%      { box-shadow: 0 0 16px rgba(239, 99, 55, 0.35); }
  }
  .badge.clean { animation-name: rrBadgeGlowClean; }
  @keyframes rrBadgeGlowClean {
    0%, 100% { box-shadow: 0 0 0 rgba(20, 77, 55, 0); }
    50%      { box-shadow: 0 0 16px rgba(20, 77, 55, 0.3); }
  }

  /* Wordmark gets a faint animated underglow to feel "alive" */
  .mark { position: relative; }

  /* Respect small screens: keep blobs from forcing horizontal scroll */
  @media (max-width: 700px) {
    .rr-blob { filter: blur(40px); }
  }
}

/* Pointer-fine only: no tilt/glow rigging on touch devices */
@media (pointer: coarse) {
  #rr-cursor-glow { display: none; }
}