/* ============================================================================
   REEL/REAL — MOTION LAYER
   ----------------------------------------------------------------------------
   Purely additive: no colours, layout or fonts are touched here — everything
   still comes from tokens.css / site.css. This file only adds entrance and
   micro-interaction animation to headings and a few hero elements, and is
   safe to delete without breaking anything.
   ========================================================================== */

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

  /* ---------- Keyframes ---------- */
  @keyframes rrFadeUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes rrFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes rrPop {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-8deg); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  }
  @keyframes rrPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(239, 99, 55, 0.3); }
    50%      { box-shadow: 0 6px 26px rgba(239, 99, 55, 0.55); }
  }
  @keyframes rrUnderline {
    from { width: 0; }
    to   { width: 100%; }
  }
  @keyframes rrShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  /* ---------- Hero: plays automatically on load ---------- */
  .hero-tag { opacity: 0; animation: rrFadeUp .7s ease forwards; }

  .title { opacity: 0; animation: rrFadeUp .8s ease .1s forwards; }
  .title span {
    background: linear-gradient(100deg, var(--accent-orange) 0%, var(--forest-green) 45%, var(--accent-orange) 90%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rrShimmer 7s linear infinite;
  }

  .sub { opacity: 0; animation: rrFadeUp .8s ease .28s forwards; }

  .pair-wrapper { opacity: 0; animation: rrFadeUp .9s ease .38s forwards; }

  .vs-badge { animation: rrPop .6s cubic-bezier(.2,.9,.3,1.3) .55s both, rrPulse 2.6s ease-in-out 1.2s infinite; }

  /* ---------- Section headings: fade + underline draw when scrolled into view ---------- */
  .sec-head h2, .drop h3 {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
  }
  /* reveal.js puts .rr-in on the .sec-head wrapper, not on the h2 inside it,
     so the reveal has to be selected as a descendant or the heading never
     fades back in. */
  .sec-head.rr-in h2, .drop h3.rr-in { opacity: 1; transform: translateY(0); }

  .sec-head { position: relative; overflow: hidden; }
  .sec-head::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
    width: 0; background: var(--accent-orange);
  }
  .sec-head.rr-in::after { animation: rrUnderline .8s ease .15s forwards; }

  /* ---------- Cards: staggered rise-in ---------- */
  .method-grid .cell, .flow-step, .stat, .ev {
    opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
  }
  .method-grid .cell.rr-in, .flow-step.rr-in, .stat.rr-in, .ev.rr-in { opacity: 1; transform: translateY(0); }

  /* ---------- Small hover flourish on the wordmark ---------- */
  .mark {
    transition: letter-spacing .3s ease;
  }
  .mark:hover { letter-spacing: 0.07em; }

  /* Verdict + report headline pulses gently in once the report appears */
  .report.on .verdict .file h3 { animation: rrFadeUp .6s ease both; }
  .report.on .badge { animation: rrFadeUp .6s ease .1s both; }
}