/* ============================================================================
   Loryn redesign — MOTION layer. Scroll-reveal, orb life, dashboard boot,
   count-ups, FAQ +/×, hover micro-moves.
   Safety: gated on html.js (no-JS shows everything, never hidden) AND on
   prefers-reduced-motion (sensitive viewers get the final state, no motion).
   ========================================================================== */

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

  /* -- scroll reveal (staggered rise + fade) -------------------------------- */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms);
    will-change: opacity, transform;
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  /* already on screen at load → visible instantly, no animation, no flash */
  html.js [data-reveal].rdx-shown,
  html.js .realProduct.rdx-shown { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* -- dashboard "powers on": rise + a single light-sweep across the screen -- */
  html.js .realProduct {
    opacity: 0;
    transform: translateY(30px) scale(.985);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
  }
  html.js .realProduct.booted { opacity: 1; transform: none; }
  .realProduct .productImageLink { position: relative; overflow: hidden; display: block; }
  .realProduct .productImageLink::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgba(122,184,245,.16) 50%, transparent 66%);
    transform: translateX(-130%);
  }
  .realProduct.booted .productImageLink::after { animation: rdxSweep 1.15s var(--ease) .2s 1; }
  @keyframes rdxSweep { to { transform: translateX(130%); } }

  /* -- the orb, alive: rings orbit, glow breathes, wakes near its section --- */
  .lorynOrb .orb-ring-main,
  .lorynOrb .orb-ring-sub,
  .lorynOrb .orb-halo,
  .lorynOrb .orb-mist-glow { transform-box: fill-box; transform-origin: center; }
  .lorynOrb .orb-ring-main { animation: rdxSpin 28s linear infinite; }
  .lorynOrb .orb-ring-sub  { animation: rdxSpinRev 40s linear infinite; }
  .lorynOrb .orb-mist-glow,
  .lorynOrb .orb-halo {
    animation: rdxBreathe 6.5s ease-in-out infinite;
    transition: opacity .6s var(--ease), filter .6s var(--ease);
  }
  @keyframes rdxSpin    { to { transform: rotate(360deg); } }
  @keyframes rdxSpinRev { to { transform: rotate(-360deg); } }
  @keyframes rdxBreathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
  /* wake: when the orb's section is in view, glow lifts; scroll energy brightens it */
  .productHero.awake .lorynOrb .orb-mist-glow,
  .command.awake   .lorynOrb .orb-mist-glow,
  .closing.awake   .lorynOrb .orb-mist-glow {
    filter: drop-shadow(0 0 calc(6px + var(--scroll-energy, 0) * 26px) rgba(122,184,245,.55));
  }
  .command.awake .lorynOrb .orb-halo,
  .closing.awake .lorynOrb .orb-halo { opacity: 1; }

  /* -- micro: the CTA arrow nudges on hover --------------------------------- */
  .cta span { transition: transform .3s var(--ease); }
  .cta:hover span { transform: translateX(4px); }

  /* -- answer eases open under the FAQ questions ---------------------------- */
  .miniFaq details[open] > p,
  .faqGroup details[open] > p { animation: rdxAnswer .42s var(--ease) 1; }
  @keyframes rdxAnswer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* -- FAQ +/× (rotation is subtle; runs even under reduced-motion) ----------- */
.miniFaq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.miniFaq summary span { color: var(--blue); font-size: 20px; line-height: 1; flex: 0 0 auto; transition: transform .3s var(--ease); }
.miniFaq details[open] summary span { transform: rotate(45deg); }