/* =============================================================================
   MockFlow-AI · animations.css
   A reusable, plug-in animation kit derived from the brand's signature motif:
   the "living green orb" — concentric breathing circles ringed by sun-ray bars
   that pulse like a voice, with eyes that look around and blink.

   PRINCIPLES
   - Pure CSS. Every component self-animates; no JavaScript is required.
   - Theme-aware. Colors come exclusively from tokens in styles.css (:root +
     html[data-theme="dark"]). Nothing here is hard-coded.
   - Reduced-motion safe. Every animation is gated; one global block at the very
     bottom calms the entire kit under (prefers-reduced-motion: reduce).
   - Performant. Only transform / opacity / filter animate — never layout.

   GEOMETRY NOTE (must match the real visualizer in interview.html):
   each ray is  position:absolute; left:50%; top:50%; transform-origin:center top;
   transform: rotate(<angle>) translateY(-<radius>);  and it GROWS in height
   outward. Angle is keyed off an --i index you pass per ray. This kit reproduces
   that exact outward growth, only the audio is replaced by a travelling CSS wave.

   Local knobs (override per instance via inline style or a wrapping class):
     --mf-orb-size      overall diameter of .mf-orb            (default 220px)
     --mf-ray-count     number of rays you dropped in          (default 48)
     --mf-speed         master tempo multiplier                (default 1)
     --mf-ink           primary motif color  (defaults to --accent-green-deep)
     --mf-ink-soft      lighter ring color   (defaults to --accent-green)
     --mf-glow          ray glow color       (defaults to --soul-glow)
   ============================================================================= */

/* Kit-wide defaults. Scoped to the components so they never leak globally, but
   declared on :root too so a single override retunes the whole kit. */
:root {
    --mf-ink: var(--accent-green-deep);
    --mf-ink-soft: var(--accent-green);
    --mf-ink-core: var(--success);
    --mf-glow: var(--soul-glow);
    --mf-speed: 1;
    --mf-eye: var(--text-primary);
}


/* =============================================================================
   1. .mf-orb — THE HERO CENTERPIECE
   The living orb: concentric breathing circles + a full ring of sun-ray bars
   that animate in a travelling wave (each ray staggered by its --i index, so it
   reads as "speaking"). Optional eyes via .mf-orb__eyes.

   Plug-in (idle, ~48 rays — generate the spans however you like):
     <div class="mf-orb" style="--mf-orb-size:220px">
       <div class="mf-orb__core"></div>
       <div class="mf-orb__rays">
         <span style="--i:0"></span> ... <span style="--i:47"></span>
       </div>
       <div class="mf-orb__eyes"><i></i><i></i></div>   <!-- optional -->
     </div>
   Add class "mf-orb--speaking" for the energetic, brighter state.
   ============================================================================= */

.mf-orb {
    --mf-orb-size: 220px;
    --mf-ray-count: 48;
    /* radius from centre to each ray's origin ≈ 34% of the orb, matching the
       real visualizer's 75px on a 220px orb */
    --mf-ray-radius: calc(var(--mf-orb-size) * 0.34);
    --mf-ray-rest: calc(var(--mf-orb-size) * 0.018);   /* ~4px on 220 */
    --mf-ray-peak: calc(var(--mf-orb-size) * 0.165);   /* ~36px on 220 */
    --mf-ray-w: calc(var(--mf-orb-size) * 0.018);

    position: relative;
    width: var(--mf-orb-size);
    height: var(--mf-orb-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    isolation: isolate;
}

/* Soft halo that breathes behind everything */
.mf-orb::before {
    content: '';
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--mf-ink) 26%, transparent) 0%,
            transparent 64%);
    z-index: -1;
    animation: mf-halo calc(5.5s / var(--mf-speed)) ease-in-out infinite;
}

/* The core is just a soft outline ring (matching the real interview visualizer's
   voice-circle) — NO filled green blob. The eyes float inside it; the rays do the
   talking. A whisper of fill keeps it from looking hollow. */
.mf-orb__core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 58%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--mf-ink) 24%, transparent);
    background: radial-gradient(circle at 50% 50%,
            color-mix(in srgb, var(--mf-ink) 7%, transparent) 0%,
            transparent 72%);
    animation: mf-breathe calc(4.5s / var(--mf-speed)) ease-in-out infinite;
}

/* Ray ring container — fills the orb; each child <span> is one ray */
.mf-orb__rays {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mf-orb__rays > span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mf-ray-w);
    height: var(--mf-ray-rest);
    margin-left: calc(var(--mf-ray-w) / -2);
    background: var(--mf-ink);
    border-radius: var(--mf-ray-w);
    transform-origin: center top;
    /* EXACT motif geometry: point the ray outward, then push it to the rim.
       angle = i / count * 360 - 90  (so --i:0 points straight up) */
    transform:
        rotate(calc((var(--i) / var(--mf-ray-count)) * 360deg - 90deg))
        translateY(calc(var(--mf-ray-radius) * -1));
    box-shadow: 0 0 6px var(--mf-glow);
    /* travelling wave: stagger the SAME pulse by each ray's index so the crest
       sweeps around the ring like a voice moving through it */
    animation: mf-ray calc(2.6s / var(--mf-speed)) ease-in-out infinite;
    animation-delay: calc((var(--i) / var(--mf-ray-count)) * -2.6s / var(--mf-speed));
    will-change: height;
}

/* Speaking state — taller crests, faster sweep, hotter glow (mirrors the real
   .agent-visualizer.speaking .agent-bar treatment) */
.mf-orb--speaking {
    --mf-ray-peak: calc(var(--mf-orb-size) * 0.225);
}

.mf-orb--speaking .mf-orb__rays > span {
    animation-duration: calc(1.5s / var(--mf-speed));
    animation-delay: calc((var(--i) / var(--mf-ray-count)) * -1.5s / var(--mf-speed));
    box-shadow: 0 0 10px var(--mf-ink), 0 0 20px var(--mf-glow);
}

.mf-orb--speaking .mf-orb__core {
    animation-duration: calc(2.2s / var(--mf-speed));
}

/* Eyes nested in the orb (reuse the standalone .mf-eyes mechanics, scaled) */
.mf-orb__eyes {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: calc(var(--mf-orb-size) * 0.11);
    z-index: 2;
}

.mf-orb__eyes > i {
    position: relative;
    width: calc(var(--mf-orb-size) * 0.055);
    height: calc(var(--mf-orb-size) * 0.055);
    background: var(--mf-eye);
    border-radius: 50%;
    animation:
        mf-look calc(7s / var(--mf-speed)) ease-in-out infinite,
        mf-blink calc(5.4s / var(--mf-speed)) steps(1, end) infinite;
}

.mf-orb__eyes > i::after {
    content: '';
    position: absolute;
    top: 16%;
    left: 16%;
    width: 34%;
    height: 34%;
    background: #fff;
    border-radius: 50%;
    opacity: 0.65;
}


/* =============================================================================
   2. .mf-eyes — standalone look-around + blink eyes (no JS)

   Plug-in:
     <div class="mf-eyes" style="--mf-eye-size:14px"><i></i><i></i></div>
   ============================================================================= */

.mf-eyes {
    --mf-eye-size: 14px;
    --mf-eye-gap: calc(var(--mf-eye-size) * 1.9);
    display: inline-flex;
    gap: var(--mf-eye-gap);
    align-items: center;
}

.mf-eyes > i {
    position: relative;
    width: var(--mf-eye-size);
    height: var(--mf-eye-size);
    background: var(--mf-eye);
    border-radius: 50%;
    animation:
        mf-look calc(7s / var(--mf-speed)) ease-in-out infinite,
        mf-blink calc(5s / var(--mf-speed)) steps(1, end) infinite;
}

.mf-eyes > i::after {
    content: '';
    position: absolute;
    top: 16%;
    left: 16%;
    width: 34%;
    height: 34%;
    background: #fff;
    border-radius: 50%;
    opacity: 0.65;
}


/* =============================================================================
   3. .mf-rays — a standalone radiating ray ring you can wrap around anything.
   Same geometry as the orb's rays, but as an overlay: position it over a target
   (it's absolutely centered) and drop in span children.

   Plug-in (parent should be position:relative):
     <div class="mf-rays" style="--mf-ray-count:36; --mf-rays-size:160px">
       <span style="--i:0"></span> ... <span style="--i:35"></span>
     </div>
   ============================================================================= */

.mf-rays {
    --mf-rays-size: 160px;
    --mf-ray-count: 36;
    --mf-ray-radius: calc(var(--mf-rays-size) * 0.42);
    --mf-ray-rest: calc(var(--mf-rays-size) * 0.025);
    --mf-ray-peak: calc(var(--mf-rays-size) * 0.16);
    --mf-ray-w: calc(var(--mf-rays-size) * 0.022);

    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mf-rays-size);
    height: var(--mf-rays-size);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.mf-rays > span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--mf-ray-w);
    height: var(--mf-ray-rest);
    margin-left: calc(var(--mf-ray-w) / -2);
    background: var(--mf-ink);
    border-radius: var(--mf-ray-w);
    transform-origin: center top;
    transform:
        rotate(calc((var(--i) / var(--mf-ray-count)) * 360deg - 90deg))
        translateY(calc(var(--mf-ray-radius) * -1));
    box-shadow: 0 0 5px var(--mf-glow);
    animation: mf-ray calc(2.8s / var(--mf-speed)) ease-in-out infinite;
    animation-delay: calc((var(--i) / var(--mf-ray-count)) * -2.8s / var(--mf-speed));
    will-change: height;
}


/* =============================================================================
   4. .mf-bloom — concentric rings that ripple outward and fade (the logo motif
   expressed as a repeating pulse). Drop as many ring children as you want.

   Plug-in (parent position:relative; bloom centers on it):
     <div class="mf-bloom" style="--mf-bloom-size:480px">
       <span></span><span></span><span></span>
     </div>
   ============================================================================= */

.mf-bloom {
    --mf-bloom-size: 480px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--mf-bloom-size);
    height: var(--mf-bloom-size);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

.mf-bloom > span {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14%;
    height: 14%;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--mf-ink) 60%, transparent);
    opacity: 0;
    animation: mf-bloom-out calc(4.5s / var(--mf-speed)) cubic-bezier(0.16, 0.8, 0.3, 1) infinite;
}

.mf-bloom > span:nth-child(2) { animation-delay: calc(-1.5s / var(--mf-speed)); }
.mf-bloom > span:nth-child(3) { animation-delay: calc(-3s / var(--mf-speed)); }
.mf-bloom > span:nth-child(4) { animation-delay: calc(-0.75s / var(--mf-speed)); }


/* =============================================================================
   5. .mf-aura — ambient full-bleed background atmosphere. Soft concentric
   green/cream gradient rings + a whisper of grain, drifting very slowly. Sits
   behind content; never competes. Designed for a fixed or absolute full-bleed.

   Plug-in (place as first child of a position:relative container):
     <div class="mf-aura" aria-hidden="true"></div>
   ============================================================================= */

.mf-aura {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.mf-aura::before {
    content: '';
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(closest-side circle at 22% 28%,
            color-mix(in srgb, var(--mf-ink-soft) 40%, transparent) 0%, transparent 70%),
        radial-gradient(closest-side circle at 80% 18%,
            color-mix(in srgb, var(--accent-cyan) 16%, transparent) 0%, transparent 65%),
        radial-gradient(closest-side circle at 72% 86%,
            color-mix(in srgb, var(--accent-purple) 26%, transparent) 0%, transparent 70%),
        radial-gradient(closest-side circle at 12% 84%,
            color-mix(in srgb, var(--mf-ink) 18%, transparent) 0%, transparent 70%);
    filter: blur(20px);
    opacity: 0.6;
    animation: mf-aura-drift calc(26s / var(--mf-speed)) ease-in-out infinite alternate;
}

/* Faint concentric ripple rings — the logo geometry, dissolved into atmosphere */
.mf-aura::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 50% 42%,
            transparent 0,
            transparent 58px,
            color-mix(in srgb, var(--mf-ink) 6%, transparent) 59px,
            transparent 60px);
    opacity: 0.5;
    animation: mf-aura-pulse calc(12s / var(--mf-speed)) ease-in-out infinite;
}


/* =============================================================================
   6. ACCENT ANIMATIONS
   ============================================================================= */

/* 6a. .mf-orbit — dots orbiting a point. Wrap N dots; they ride a shared ring.
   Plug-in (parent position:relative):
     <div class="mf-orbit" style="--mf-orbit-size:120px">
       <span style="--i:0"></span><span style="--i:1"></span><span style="--i:2"></span>
     </div>  (set --mf-orbit-count to the number of dots)                        */
.mf-orbit {
    --mf-orbit-size: 120px;
    --mf-orbit-ring: color-mix(in srgb, var(--mf-ink) 20%, transparent);
    position: relative;
    width: var(--mf-orbit-size);
    height: var(--mf-orbit-size);
    border-radius: 50%;
    /* three faint orbit tracks at 30% / 41% / 50% radius */
    background:
        radial-gradient(circle at 50% 50%, transparent calc(30% - 1px), var(--mf-orbit-ring) 30%, transparent calc(30% + 1px)),
        radial-gradient(circle at 50% 50%, transparent calc(41% - 1px), var(--mf-orbit-ring) 41%, transparent calc(41% + 1px)),
        radial-gradient(circle at 50% 50%, transparent calc(50% - 1px), var(--mf-orbit-ring) 50%, transparent calc(50% + 1px));
}

/* central "sun" */
.mf-orbit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15%;
    height: 15%;
    margin: -7.5% 0 0 -7.5%;
    border-radius: 50%;
    background: var(--mf-ink-core);
    box-shadow: 0 0 10px var(--mf-glow);
}

/* three bodies, each on its own track + period — a neat little system */
.mf-orbit > span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--mf-orbit-size) * 0.085);
    height: calc(var(--mf-orbit-size) * 0.085);
    margin: calc(var(--mf-orbit-size) * -0.0425) 0 0 calc(var(--mf-orbit-size) * -0.0425);
    border-radius: 50%;
    background: var(--mf-ink);
    box-shadow: 0 0 8px var(--mf-glow);
    animation: mf-orbit-spin calc(var(--mf-orbit-dur, 6s) / var(--mf-speed)) linear infinite;
}

.mf-orbit > span:nth-child(1) { --mf-orbit-r: 0.30; --mf-orbit-dur: 3.6s; }
.mf-orbit > span:nth-child(2) { --mf-orbit-r: 0.41; --mf-orbit-dur: 5.4s; }
.mf-orbit > span:nth-child(3) { --mf-orbit-r: 0.50; --mf-orbit-dur: 8s; }

/* 6b. .mf-pulse-dot — a "live" status dot with an expanding ring halo.
   Plug-in:  <span class="mf-pulse-dot"></span>                                  */
.mf-pulse-dot {
    position: relative;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mf-ink-core);
    flex-shrink: 0;
}

.mf-pulse-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--mf-ink-core) 60%, transparent);
    animation: mf-pulse-ring calc(2.4s / var(--mf-speed)) ease-out infinite;
}

/* 6c. .mf-shimmer-text — a green wave sweeps the headline right-to-left, then
   "sticks" inside the trailing letters you wrap in .mf-shimmer-text__lock (e.g.
   the ".ai"), holding them green until the next wave arrives and carries it off.
   Plug-in:
     <h2 class="mf-shimmer-text">MockFlow<span class="mf-shimmer-text__lock">.ai</span></h2> */
.mf-shimmer-text {
    --mf-shimmer-dur: 5s;
    background: linear-gradient(90deg,
            var(--text-primary) 0%, var(--text-primary) 42%,
            color-mix(in srgb, var(--mf-ink) 65%, white) 48%,
            var(--mf-ink) 50%,
            color-mix(in srgb, var(--mf-ink) 65%, white) 52%,
            var(--text-primary) 58%, var(--text-primary) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: mf-shimmer calc(var(--mf-shimmer-dur) / var(--mf-speed)) ease-in-out infinite;
}

/* The letters the wave locks onto. While transparent they show the passing wave;
   once the wave clears they hold solid green, then release at the next pass. */
.mf-shimmer-text__lock {
    animation: mf-lock-green calc(var(--mf-shimmer-dur) / var(--mf-speed)) ease infinite;
}

/* 6d. .mf-float — gentle hovering lift for any element.
   Plug-in:  <div class="mf-float">...</div>                                     */
.mf-float {
    animation: mf-float calc(6s / var(--mf-speed)) ease-in-out infinite;
}

/* 6e. .mf-greet — a concentric-circle mark that, on .is-greeting, expands,
   snap-collapses, pops the agent's eyes out (with a blink), then settles home
   (~3.4s). Toggle .is-greeting via JS on click and remove it after ~3450ms.
   Plug-in:
     <div class="mf-greet" role="button" tabindex="0">
       <svg viewBox="0 0 48 48" width="72" height="72">
         <circle cx="24" cy="24" r="20" fill="#C8E6C9"/>
         <circle cx="24" cy="24" r="12" fill="#81C784"/>
         <circle cx="24" cy="24" r="6"  fill="#4CAF50"/>
       </svg>
       <span class="mf-greet__eyes"><i></i><i></i></span>
     </div>                                                                      */
.mf-greet {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mf-greet svg { transform-origin: center center; display: block; }
.mf-greet__eyes {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}
.mf-greet__eyes > i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mf-eye);
    transform: scale(0);
}
.mf-greet.is-greeting svg                { animation: mf-greet-circles 3.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
.mf-greet.is-greeting .mf-greet__eyes    { animation: mf-greet-eyewrap 3.4s ease both; }
.mf-greet.is-greeting .mf-greet__eyes > i { animation: mf-greet-eye 3.4s ease both; }
.mf-greet.is-greeting .mf-greet__eyes > i:nth-child(2) { animation-delay: 0.05s; }

@keyframes mf-greet-circles {
    0%   { transform: scale(1); }
    16%  { transform: scale(1.55); }   /* expand */
    30%  { transform: scale(0.5); }    /* quick collapse */
    42%  { transform: scale(0.72); }
    80%  { transform: scale(0.72); }   /* hold small while the eyes are out */
    100% { transform: scale(1); }      /* return home */
}
@keyframes mf-greet-eyewrap {
    0%, 32%   { opacity: 0; }
    40%, 76%  { opacity: 1; }
    90%, 100% { opacity: 0; }
}
@keyframes mf-greet-eye {
    0%, 32%   { transform: scale(0); }
    42%       { transform: scale(1.4); }            /* pop */
    50%       { transform: scale(1); }
    62%       { transform: scale(1) scaleY(1); }
    66%       { transform: scale(1) scaleY(0.14); } /* blink */
    70%       { transform: scale(1) scaleY(1); }
    80%       { transform: scale(1); }
    90%, 100% { transform: scale(0); }
}


/* =============================================================================
   KEYFRAMES
   ============================================================================= */

/* Symmetric crest — staggered around the ring it reads as one smooth travelling
   wave that loops seamlessly (rest at both 0% and 100%, no hitch at the wrap). */
@keyframes mf-ray {
    0%, 100% { height: var(--mf-ray-rest); }
    50%      { height: var(--mf-ray-peak); }
}

@keyframes mf-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes mf-halo {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.9;  transform: scale(1.08); }
}

@keyframes mf-sheen {
    0%, 100% { opacity: 0.4; transform: translate(0, 0); }
    50%      { opacity: 0.85; transform: translate(6%, 4%); }
}

/* Eyes glance around — small offsets, holds, returns to centre */
@keyframes mf-look {
    0%, 18%   { transform: translate(0, 0); }
    26%, 40%  { transform: translate(28%, 0); }
    48%, 60%  { transform: translate(-26%, 8%); }
    68%, 80%  { transform: translate(10%, -14%); }
    88%, 100% { transform: translate(0, 0); }
}

/* Blink: collapse to a slit for a couple of frames, twice per cycle */
@keyframes mf-blink {
    0%, 46%, 52%, 92%, 100% { transform: scaleY(1); }
    48%, 50%                { transform: scaleY(0.12); }
    94%, 96%                { transform: scaleY(0.12); }
}

@keyframes mf-bloom-out {
    0%   { width: 14%; height: 14%; opacity: 0; }
    12%  { opacity: 0.75; }
    100% { width: 100%; height: 100%; opacity: 0; border-width: 0.5px; }
}

@keyframes mf-aura-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    100% { transform: translate3d(2.5%, -2%, 0) scale(1.08) rotate(4deg); }
}

@keyframes mf-aura-pulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50%      { opacity: 0.6;  transform: scale(1.04); }
}

@keyframes mf-orbit-spin {
    from { transform: rotate(0deg)   translateX(calc(var(--mf-orbit-size) * var(--mf-orbit-r, 0.42))) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(calc(var(--mf-orbit-size) * var(--mf-orbit-r, 0.42))) rotate(-360deg); }
}

@keyframes mf-pulse-ring {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mf-ink-core) 55%, transparent); }
    70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--mf-ink-core) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mf-ink-core) 0%, transparent); }
}

@keyframes mf-shimmer {
    0%   { background-position: 165% 0; }   /* green band waiting off to the right */
    34%  { background-position: -65% 0; }   /* band has swept right -> left, off-screen */
    100% { background-position: -65% 0; }   /* hold base colour until the next pass */
}

@keyframes mf-lock-green {
    /* Sticks green AS the wave crosses it (early), not long after it has gone. */
    0%, 6%   { -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
    12%, 88% { -webkit-text-fill-color: var(--mf-ink); color: var(--mf-ink);
               text-shadow: 0 0 12px var(--mf-glow); }
    100%     { -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
}

@keyframes mf-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}


/* =============================================================================
   REDUCED MOTION — one calm resting state for the entire kit.
   Structure (rings, eyes, glow) stays visible and beautiful; only motion stops.
   Rays settle to a pleasant mid-height so the orb still reads as a sun.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .mf-orb::before,
    .mf-orb__core,
    .mf-orb__core::after,
    .mf-orb__eyes > i,
    .mf-eyes > i,
    .mf-rays > span,
    .mf-bloom > span,
    .mf-aura::before,
    .mf-aura::after,
    .mf-orbit > span,
    .mf-pulse-dot::after,
    .mf-shimmer-text,
    .mf-float,
    .mf-greet.is-greeting svg,
    .mf-greet.is-greeting .mf-greet__eyes,
    .mf-greet.is-greeting .mf-greet__eyes > i {
        animation: none !important;
    }

    /* Freeze the rays at a gentle, even mid-height so the ring still looks like
       a radiant sun rather than collapsing to nubs. */
    .mf-orb__rays > span {
        animation: none !important;
        height: calc((var(--mf-ray-rest) + var(--mf-ray-peak)) * 0.5);
    }

    .mf-rays > span {
        animation: none !important;
        height: calc((var(--mf-ray-rest) + var(--mf-ray-peak)) * 0.5);
    }

    /* Keep eyes open and centered. */
    .mf-orb__eyes > i,
    .mf-eyes > i {
        transform: none !important;
    }

    /* Shimmer headline falls back to a solid, fully legible fill — with the
       locked letters resting in their stuck-green state. */
    .mf-shimmer-text {
        -webkit-text-fill-color: var(--text-primary);
        color: var(--text-primary);
        background: none;
    }
    .mf-shimmer-text__lock {
        animation: none !important;
        -webkit-text-fill-color: var(--mf-ink);
        color: var(--mf-ink);
    }

    /* Show one resting bloom ring instead of a sequence. */
    .mf-bloom > span {
        opacity: 0.25;
        width: 60%;
        height: 60%;
    }
    .mf-bloom > span:nth-child(n+2) { opacity: 0; }
}