/* ─────────────────────────────────────────────────────────────
   LOCKED_MOTION_TOKENS.css
   NURiQ Liquid Glass · Phase 1 · Locked 2026-06-23

   Approved by founder Tim Pauldon via storyboard/motion.html PAUSE 2.

   This file is consumed by globals.css after LOCKED_STATIC_TOKENS.css.
   Together they form the authoritative design-token surface for
   Phase 2 build. Do not edit by hand. To change the locked motion,
   rerun the storyboard sprint.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ───────────────────────────────────────────────
     Cinematic · post-login welcome
     ─────────────────────────────────────────────── */
  --cinematic-duration: 3000ms;
  --cinematic-easing:   cubic-bezier(0.32, 0.72, 0, 1);   /* Apple */

  /* ───────────────────────────────────────────────
     NURi orb · idle and report-ready pulse
     ─────────────────────────────────────────────── */
  --orb-idle-pulse-duration:   3000ms;
  --orb-report-pulse-duration: 1500ms;

  /* ───────────────────────────────────────────────
     Report-ready toast · slide-in and dismiss
     ─────────────────────────────────────────────── */
  --toast-slide-direction: top-right;
  --toast-slide-duration:  320ms;
  --toast-dismiss-ms:      6000;
  --toast-fadeout-duration: 300ms;

  /* ───────────────────────────────────────────────
     Hover and modal entrance
     ─────────────────────────────────────────────── */
  --hover-transition: 200ms;
  --modal-entrance:   apple-scale;
  --modal-duration:   250ms;
  --modal-easing:     cubic-bezier(0.32, 0.72, 0, 1);

  /* ───────────────────────────────────────────────
     Cinematic Lottie picks (custom SVG components, not external Lottie)
     See LOTTIE_ATTRIBUTIONS.md for the rationale.
     ─────────────────────────────────────────────── */
  --cinematic-aesthetic-post-login:  nuriq-mark-reveal;
  --cinematic-aesthetic-report-ready: document-chevron;
}

/* ─────────────────────────────────────────────────────────────
   NURiQ Mark Reveal · post-login cinematic
   Consumed by <NuriqMarkReveal /> component in Phase 2.
   ───────────────────────────────────────────────────────────── */
@keyframes nuriq-mark-entrance {
  0%   { transform: scale(0.42) rotate(-8deg); opacity: 0;
         filter: drop-shadow(0 0 0 rgba(246, 213, 92, 0)); }
  45%  { transform: scale(1.06) rotate(0deg); opacity: 1;
         filter: drop-shadow(0 0 18px rgba(246, 213, 92, 0.8)); }
  60%  { transform: scale(1)    rotate(0deg);
         filter: drop-shadow(0 0 14px rgba(246, 213, 92, 0.6)); }
  80%  { transform: scale(1.02) rotate(0deg);
         filter: drop-shadow(0 0 22px rgba(246, 213, 92, 0.5)); }
  100% { transform: scale(1)    rotate(0deg); opacity: 1;
         filter: drop-shadow(0 0 12px rgba(246, 213, 92, 0.45)); }
}

/* ─────────────────────────────────────────────────────────────
   Post-login welcome sequence · staggered wordmark, tagline, greeting
   The wordmark fades in after the mark settles. Tagline follows.
   ───────────────────────────────────────────────────────────── */
@keyframes cine-wordmark-in {
  0%, 35%  { opacity: 0; transform: scale(0.94) translateY(8px); }
  55%, 100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cine-tagline-in {
  0%, 55%  { opacity: 0; transform: translateY(6px); }
  72%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes cine-greeting-in {
  0%, 72%  { opacity: 0; transform: translateY(4px); }
  86%, 100% { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   NURi orb pulse · idle and report-ready
   ───────────────────────────────────────────────────────────── */
@keyframes nuri-orb-idle-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(76, 130, 224, 0.25); transform: scale(1); }
  50%      { box-shadow: 0 0 28px rgba(76, 130, 224, 0.40); transform: scale(1.04); }
}
@keyframes nuri-orb-report-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(246, 213, 92, 0.30); transform: scale(1); }
  50%      { box-shadow: 0 0 36px rgba(246, 213, 92, 0.65); transform: scale(1.08); }
}

/* ─────────────────────────────────────────────────────────────
   Report-ready toast · directional slide-in
   ───────────────────────────────────────────────────────────── */
@keyframes toast-slide-in-top-right    { from { opacity: 0; transform: translateX(40px); }              to { opacity: 1; transform: translateX(0); } }
@keyframes toast-slide-in-top-center   { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-slide-in-bottom-right { from { opacity: 0; transform: translateY(40px); }              to { opacity: 1; transform: translateY(0); } }
@keyframes toast-fade-out              { to { opacity: 0; } }

/* ─────────────────────────────────────────────────────────────
   Document Chevron · report-ready icon entrance
   Consumed by <ReportReadyIcon /> component in Phase 2.
   ───────────────────────────────────────────────────────────── */
@keyframes report-doc-in {
  0%   { opacity: 0; transform: scale(0.7); }
  45%  { opacity: 1; transform: scale(1.04); }
  60%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes report-chev-in {
  0%, 55%   { opacity: 0; transform: translateY(-6px); }
  78%       { opacity: 1; transform: translateY(2px); }
  90%, 100% { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────
   Modal entrance · Apple scale-from-center
   ───────────────────────────────────────────────────────────── */
@keyframes modal-apple-scale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────────────────────
   Hover transition utility
   ───────────────────────────────────────────────────────────── */
.hover-transition,
.hover-transition * {
  transition-duration: var(--hover-transition);
  transition-timing-function: ease-out;
}