/* ============================================================================
   Orbix — background styles (owner, 15 Oct 2026). Namespace orbx-bg-*.
   Picked from "Background style" in the slide-in panel; one layer behind
   everything else on the Orbix page (#orbx-bg, three sub-layers).
   ----------------------------------------------------------------------------
   Research (15 Oct 2026, per the Design & Layout Formulas "research first"):
     · gskinner "FUI FUN: Learning to Make HUDs" — film HUDs lean on lines and
       simple geometric shapes that follow a visual rhythm; so every style
       here is lines, dots, rings or cells, never pictures.
     · Greyscalegorilla, Robyn Haddow on Marvel/DC screen graphics — the
       interface should draw the eye where the story is; so each style
       centres on, or flows towards, the orb, and stays faint behind it.
     · 2026 CSS motion guides (Josh Comeau on scroll-driven animation; Raxxo
       "6 patterns I ship in 2026") — transform and opacity only, registered
       custom properties where an angle must animate, and everything
       stopped under reduced motion.
   Formula rules kept:
     · Colour: the page surface, so lights and lines are Link only
       (--at-color-link), mixed with transparent. Never Primary, never a
       fixed colour. Patterns are drawn through masks, which paint no colour.
     · Soft light: glows are gradients that fade to nothing in four or more
       stops; no backdrop-filter, no blur filter.
     · Strength: at rest the whole layer sits at 0.7 opacity so a field
       stays at or under 0.2; it brightens only while Orbix is listening,
       thinking or speaking.
     · Motion: transform and opacity only; never a
       size or position change that lays the page out again; no timers.
       Reduced motion, or "Calm motion" in My Orbix settings, holds it still.
   This is a full-screen showpiece the owner asked to be animated, so its
   slow loops are the one deliberate difference from the still dashboards.
   ============================================================================ */

.orbx-bg {
    --orbx-bg-c: var(--at-color-link);
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
    opacity: .7;
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1);
}
.orbx[data-state="listening"] .orbx-bg,
.orbx[data-state="thinking"] .orbx-bg,
.orbx[data-state="speaking"] .orbx-bg { opacity: 1; }
.orbx-bg[data-bg="none"] { display: none; }

.orbx-bg-l {
    position: absolute;
    inset: 0;
    display: none;
    will-change: transform, opacity;
}
.orbx-bg-l > i { position: absolute; inset: 0; display: none; }

/* A colour at a strength, from the theme's Link label. */
.orbx-bg { --orbx-bg-a: color-mix(in srgb, var(--orbx-bg-c) 30%, transparent);
           --orbx-bg-b: color-mix(in srgb, var(--orbx-bg-c) 18%, transparent);
           --orbx-bg-d: color-mix(in srgb, var(--orbx-bg-c) 9%, transparent); }

/* ── 1. Starfield drift — stars fly slowly towards you ─────────── */
.orbx-bg[data-bg="starfield"] .orbx-bg-l {
    display: block;
    inset: -40%;
    background-image:
        radial-gradient(circle, var(--orbx-bg-a) 0 1px, transparent 1.6px),
        radial-gradient(circle, var(--orbx-bg-b) 0 1.2px, transparent 2px);
    background-size: 97px 103px, 151px 139px;
    background-position: 13px 41px, 67px 5px;
    animation: orbx-bg-zoom 21s linear infinite;
}
.orbx-bg[data-bg="starfield"] .orbx-bg-2 { background-size: 131px 89px, 211px 197px; background-position: 51px 17px, 3px 88px; animation-delay: -7s; }
.orbx-bg[data-bg="starfield"] .orbx-bg-3 { background-size: 113px 157px, 239px 181px; background-position: 29px 73px, 120px 33px; animation-delay: -14s; }
@keyframes orbx-bg-zoom {
    0%   { transform: scale(.55); opacity: 0; }
    20%  { opacity: .9; }
    75%  { opacity: .9; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ── 2. Radar sweep — a beam circles round the orb ─────────────── */
.orbx-bg[data-bg="radar"] .orbx-bg-1 {
    display: block;
    background: repeating-radial-gradient(circle at 50% 44%, var(--orbx-bg-d) 0 1px, transparent 1.5px 96px);
}
.orbx-bg[data-bg="radar"] .orbx-bg-2 {
    display: block;
    inset: -60%;
    background: conic-gradient(from 0deg at 50% 47%,
        transparent 0deg,
        color-mix(in srgb, var(--orbx-bg-c) 2%, transparent) 10deg,
        color-mix(in srgb, var(--orbx-bg-c) 7%, transparent) 26deg,
        color-mix(in srgb, var(--orbx-bg-c) 16%, transparent) 38deg,
        color-mix(in srgb, var(--orbx-bg-c) 26%, transparent) 42deg,
        transparent 42.5deg 360deg);
    -webkit-mask-image: radial-gradient(circle at 50% 47%, #000 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.08) 60%, transparent 70%);
            mask-image: radial-gradient(circle at 50% 47%, #000 0%, rgba(0,0,0,.7) 25%, rgba(0,0,0,.3) 45%, rgba(0,0,0,.08) 60%, transparent 70%);
    transform-origin: 50% 47%;
    animation: orbx-bg-spin 9s linear infinite;
}
.orbx-bg[data-bg="radar"] .orbx-bg-3 {
    display: block;
    background-image:
        radial-gradient(circle, var(--orbx-bg-a) 0 2px, color-mix(in srgb, var(--orbx-bg-c) 8%, transparent) 4px, transparent 7px);
    background-size: 337px 293px;
    background-position: 61px 47px;
    animation: orbx-bg-blip 9s ease-out infinite;
}
@keyframes orbx-bg-spin { to { transform: rotate(360deg); } }
@keyframes orbx-bg-blip {
    0%, 100% { opacity: 0; }
    12% { opacity: 1; }
    45% { opacity: .15; }
}

/* ── 3. Data rain — thin streaks trickle down ──────────────────── */
.orbx-bg[data-bg="rain"] .orbx-bg-1,
.orbx-bg[data-bg="rain"] .orbx-bg-2 {
    display: block;
    inset: -320px 0 0 0;
    background-image: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--orbx-bg-c) 5%, transparent) 30%,
        color-mix(in srgb, var(--orbx-bg-c) 18%, transparent) 70%,
        var(--orbx-bg-a) 92%,
        transparent 100%);
    background-size: 2px 140px;
    background-repeat: repeat;
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 38px);
            mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 38px);
    animation: orbx-bg-fall 7s linear infinite;
}
.orbx-bg[data-bg="rain"] .orbx-bg-1 { background-size: 38px 320px; background-position: 0 40px; }
.orbx-bg[data-bg="rain"] .orbx-bg-2 {
    background-size: 38px 320px; background-position: 19px 200px;
    -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 19px, #000 19px 21px, transparent 21px 38px);
            mask-image: repeating-linear-gradient(90deg, transparent 0 19px, #000 19px 21px, transparent 21px 38px);
    animation-duration: 11s;
    opacity: .7;
}
@keyframes orbx-bg-fall { from { transform: translateY(0); } to { transform: translateY(320px); } }

/* ── 4. Hex grid pulse — cells ripple out from the orb ─────────── */
.orbx-bg[data-bg="hex"] .orbx-bg-1,
.orbx-bg[data-bg="hex"] .orbx-bg-2 {
    display: block;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
    -webkit-mask-size: 56px 100px; mask-size: 56px 100px;
}
.orbx-bg[data-bg="hex"] .orbx-bg-1 {
    background: radial-gradient(circle at 50% 45%, var(--orbx-bg-b) 0%, var(--orbx-bg-d) 30%, color-mix(in srgb, var(--orbx-bg-c) 4%, transparent) 55%, transparent 80%);
}
.orbx-bg[data-bg="hex"] .orbx-bg-2 > i {
    display: block;
    inset: -30%;
    background: radial-gradient(circle at 50% 46%, transparent 0%, transparent 22%, color-mix(in srgb, var(--orbx-bg-c) 10%, transparent) 26%, var(--orbx-bg-a) 29%, color-mix(in srgb, var(--orbx-bg-c) 10%, transparent) 32%, transparent 36%);
    transform-origin: 50% 46%;
    animation: orbx-bg-ripple 6s cubic-bezier(.2, .8, .2, 1) infinite;
}
.orbx[data-state="speaking"] .orbx-bg[data-bg="hex"] .orbx-bg-2 > i { animation-duration: 2.4s; }
@keyframes orbx-bg-ripple {
    0%   { transform: scale(.2); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── 5. Holo scan lines — a bright band sweeps down ────────────── */
.orbx-bg[data-bg="scan"] .orbx-bg-1 {
    display: block;
    background: repeating-linear-gradient(to bottom, var(--orbx-bg-d) 0 1px, transparent 1px 4px);
    animation: orbx-bg-flicker 5s steps(1, end) infinite;
}
.orbx-bg[data-bg="scan"] .orbx-bg-2 {
    display: block;
    inset: -30% 0 auto 0;
    height: 30%;
    background: linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--orbx-bg-c) 3%, transparent) 30%,
        color-mix(in srgb, var(--orbx-bg-c) 12%, transparent) 70%,
        var(--orbx-bg-b) 92%,
        transparent 100%);
    animation: orbx-bg-sweep 8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes orbx-bg-sweep { from { transform: translateY(0); } to { transform: translateY(440%); } }
@keyframes orbx-bg-flicker { 0%, 100% { opacity: 1; } 48% { opacity: .82; } 50% { opacity: 1; } }

/* ── 6. Circuit traces — pulses race along the lines ───────────── */
.orbx-bg[data-bg="circuit"] .orbx-bg-1,
.orbx-bg[data-bg="circuit"] .orbx-bg-2 {
    display: block;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 40h50l20 20v50h90M80 0v30l10 10h70M20 160v-30l20-20h20M110 160v-20l20-20h30M0 130h10'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='50' cy='40' r='2.5'/%3E%3Ccircle cx='80' cy='30' r='2.5'/%3E%3Ccircle cx='60' cy='110' r='2.5'/%3E%3Ccircle cx='130' cy='120' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M0 40h50l20 20v50h90M80 0v30l10 10h70M20 160v-30l20-20h20M110 160v-20l20-20h30M0 130h10'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='50' cy='40' r='2.5'/%3E%3Ccircle cx='80' cy='30' r='2.5'/%3E%3Ccircle cx='60' cy='110' r='2.5'/%3E%3Ccircle cx='130' cy='120' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 160px 160px; mask-size: 160px 160px;
}
.orbx-bg[data-bg="circuit"] .orbx-bg-1 { background: var(--orbx-bg-d); }
.orbx-bg[data-bg="circuit"] .orbx-bg-2 > i {
    display: block;
    inset: 0 -100% 0 -100%;
    background: repeating-linear-gradient(90deg,
        transparent 0 180px,
        color-mix(in srgb, var(--orbx-bg-c) 8%, transparent) 210px,
        var(--orbx-bg-a) 236px,
        color-mix(in srgb, var(--orbx-bg-c) 8%, transparent) 250px,
        transparent 262px 420px);
    animation: orbx-bg-race 6s linear infinite;
}
@keyframes orbx-bg-race { from { transform: translateX(0); } to { transform: translateX(420px); } }

/* ── 7. Particle swarm — dots drift, and gather while you talk ─── */
.orbx-bg[data-bg="swarm"] .orbx-bg-l {
    display: block;
    inset: -10%;
    background-image: radial-gradient(circle, var(--orbx-bg-a) 0 1.3px, color-mix(in srgb, var(--orbx-bg-c) 6%, transparent) 2.5px, transparent 4px);
    background-size: 71px 83px;
    transform-origin: 50% 46%;
    animation: orbx-bg-drift 26s ease-in-out infinite alternate;
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.orbx-bg[data-bg="swarm"] .orbx-bg-2 { background-size: 109px 97px; background-position: 31px 19px; animation-duration: 34s; animation-direction: alternate-reverse; }
.orbx-bg[data-bg="swarm"] .orbx-bg-3 { background-size: 157px 131px; background-position: 77px 61px; animation-duration: 41s; }
@keyframes orbx-bg-drift {
    from { transform: translate(-14px, 10px) rotate(0deg); }
    to   { transform: translate(16px, -12px) rotate(3deg); }
}
.orbx[data-state="listening"] .orbx-bg[data-bg="swarm"] .orbx-bg-l,
.orbx[data-state="speaking"] .orbx-bg[data-bg="swarm"] .orbx-bg-l {
    -webkit-mask-image: radial-gradient(circle at 50% 46%, #000 0%, rgba(0,0,0,.8) 25%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.05) 80%);
            mask-image: radial-gradient(circle at 50% 46%, #000 0%, rgba(0,0,0,.8) 25%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.12) 62%, rgba(0,0,0,.05) 80%);
}

/* ── 8. Warp tunnel — rings stream out from the centre ─────────── */
.orbx-bg[data-bg="warp"] .orbx-bg-1,
.orbx-bg[data-bg="warp"] .orbx-bg-2,
.orbx-bg[data-bg="warp"] .orbx-bg-3 {
    display: block;
    inset: -50%;
    background: repeating-radial-gradient(circle at 50% 50%, transparent 0 58px, var(--orbx-bg-d) 60px, var(--orbx-bg-b) 61px, var(--orbx-bg-d) 62px, transparent 64px 120px);
    -webkit-mask-image: radial-gradient(circle, transparent 0%, rgba(0,0,0,.2) 6%, rgba(0,0,0,.6) 14%, #000 26%, rgba(0,0,0,.5) 45%, transparent 60%);
            mask-image: radial-gradient(circle, transparent 0%, rgba(0,0,0,.2) 6%, rgba(0,0,0,.6) 14%, #000 26%, rgba(0,0,0,.5) 45%, transparent 60%);
    animation: orbx-bg-warp 12s linear infinite;
}
.orbx-bg[data-bg="warp"] .orbx-bg-2 { animation-delay: -4s; }
.orbx-bg[data-bg="warp"] .orbx-bg-3 { animation-delay: -8s; }
/* Thinking: a faster stream fades in on top (the slow one never jumps). */
.orbx-bg[data-bg="warp"] .orbx-bg-3 > i {
    display: block;
    background: inherit;
    opacity: 0;
    transition: opacity .8s ease;
}
.orbx[data-state="thinking"] .orbx-bg[data-bg="warp"] .orbx-bg-3 > i { opacity: 1; animation: orbx-bg-warp 3s linear infinite; }
@keyframes orbx-bg-warp {
    0%   { transform: scale(.5); opacity: 0; }
    25%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── 9. Aurora field — slow curtains of soft light ─────────────── */
.orbx-bg[data-bg="aurora"] .orbx-bg-1,
.orbx-bg[data-bg="aurora"] .orbx-bg-2 {
    display: block;
    inset: -45%;
}
.orbx-bg[data-bg="aurora"] .orbx-bg-1 {
    background:
        radial-gradient(ellipse 38% 16% at 34% 40%, var(--orbx-bg-b) 0%, color-mix(in srgb, var(--orbx-bg-c) 10%, transparent) 30%, color-mix(in srgb, var(--orbx-bg-c) 4%, transparent) 58%, color-mix(in srgb, var(--orbx-bg-c) 1%, transparent) 80%, transparent 100%),
        radial-gradient(ellipse 30% 12% at 66% 58%, color-mix(in srgb, var(--orbx-bg-c) 14%, transparent) 0%, color-mix(in srgb, var(--orbx-bg-c) 8%, transparent) 30%, color-mix(in srgb, var(--orbx-bg-c) 3%, transparent) 58%, color-mix(in srgb, var(--orbx-bg-c) 1%, transparent) 80%, transparent 100%);
    animation: orbx-bg-sway 30s ease-in-out infinite alternate;
}
.orbx-bg[data-bg="aurora"] .orbx-bg-2 {
    background:
        radial-gradient(ellipse 44% 10% at 52% 30%, color-mix(in srgb, var(--orbx-bg-c) 12%, transparent) 0%, color-mix(in srgb, var(--orbx-bg-c) 7%, transparent) 30%, color-mix(in srgb, var(--orbx-bg-c) 3%, transparent) 58%, color-mix(in srgb, var(--orbx-bg-c) 1%, transparent) 80%, transparent 100%);
    animation: orbx-bg-sway 42s ease-in-out infinite alternate-reverse;
}
@keyframes orbx-bg-sway {
    from { transform: rotate(-6deg) translateX(-3%); }
    to   { transform: rotate(7deg) translateX(4%); }
}

/* ── 10. Constellation web — a living star map ─────────────────── */
.orbx-bg[data-bg="constellation"] .orbx-bg-1,
.orbx-bg[data-bg="constellation"] .orbx-bg-2 {
    display: block;
    inset: -10%;
    background: var(--orbx-bg-b);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg stroke='black' stroke-width='.8' fill='none'%3E%3Cpath d='M30 40L95 70L150 30L210 85M95 70L80 150L160 170L150 30M160 170L215 210M80 150L25 200'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='30' cy='40' r='2'/%3E%3Ccircle cx='95' cy='70' r='2.6'/%3E%3Ccircle cx='150' cy='30' r='2'/%3E%3Ccircle cx='210' cy='85' r='2'/%3E%3Ccircle cx='80' cy='150' r='2.4'/%3E%3Ccircle cx='160' cy='170' r='2.6'/%3E%3Ccircle cx='215' cy='210' r='1.8'/%3E%3Ccircle cx='25' cy='200' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg stroke='black' stroke-width='.8' fill='none'%3E%3Cpath d='M30 40L95 70L150 30L210 85M95 70L80 150L160 170L150 30M160 170L215 210M80 150L25 200'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='30' cy='40' r='2'/%3E%3Ccircle cx='95' cy='70' r='2.6'/%3E%3Ccircle cx='150' cy='30' r='2'/%3E%3Ccircle cx='210' cy='85' r='2'/%3E%3Ccircle cx='80' cy='150' r='2.4'/%3E%3Ccircle cx='160' cy='170' r='2.6'/%3E%3Ccircle cx='215' cy='210' r='1.8'/%3E%3Ccircle cx='25' cy='200' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: 240px 240px; mask-size: 240px 240px;
    animation: orbx-bg-web 24s ease-in-out infinite alternate;
}
.orbx-bg[data-bg="constellation"] .orbx-bg-2 {
    -webkit-mask-size: 330px 330px; mask-size: 330px 330px;
    -webkit-mask-position: 120px 70px; mask-position: 120px 70px;
    animation-duration: 31s;
    animation-direction: alternate-reverse;
}
@keyframes orbx-bg-web {
    0%   { transform: translate(-10px, 6px) rotate(-1deg); opacity: .25; }
    50%  { opacity: 1; }
    100% { transform: translate(12px, -8px) rotate(1.5deg); opacity: .35; }
}

/* ── still for reduced motion, or the person's "Calm motion" ───── */
.orbx.is-calm .orbx-bg-l,
.orbx.is-calm .orbx-bg-l > i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .orbx-bg, .orbx-bg-l, .orbx-bg-l > i { animation: none !important; transition: none; }
}