/* ============================================================================
   world-generators.css — WORLD 03 · LOCAL GENERATORS
   Consumes the core tokens from universe-core.css. Redefines none of them.
   Every value this world owns is a --wg-* custom property scoped to the two
   roots this module renders: .wg-rig (the forge) and .wg-floor (the lab floor).

   Motion rule: transform / opacity / filter only. stroke-dashoffset is used
   once, for the pipeline rail draw-in.
   ========================================================================== */

.wg-rig,
.wg-floor {
    /* ---- palette (restrained: the scene stays predominantly black) ------ */
    --wg-violet:   var(--u-accent-generators);     /* #8b5cf6 */
    --wg-magenta:  var(--u-accent-generators-2);   /* #d946ef */
    --wg-blue:     var(--u-accent-generators-3);   /* #3b82f6 — cold ground */

    /* ---- stroke weights (SVG user units; rigs are scaled down slightly) - */
    --wg-sw:       1.6;
    --wg-sw-hair:  1;

    /* ---- motion --------------------------------------------------------- */
    --wg-flow:     5.2s;    /* particle transit          */
    --wg-thumb-d:  6.3s;    /* media thumbnail transit   */
    --wg-wake:     3.6s;    /* gpu bay wake cycle        */
    --wg-pulse:    3.2s;    /* core pulse                */
    --wg-outc:     6.4s;    /* output materialise cycle  */
    --wg-payload:  2.4s;    /* hover transformation pass */

    /* ---- lab floor depth ------------------------------------------------ */
    --wg-depth-scale: 0.07; /* keeps 17px blurbs above the 16px floor       */
    --wg-depth-fade:  0.28;
    --wg-par-x:      -20px; /* parallax reach at depth 1                     */
    --wg-par-y:      -14px;
}

/* ============================================================================
   THE ENTITY — AI FORGE / COMPUTE WORKSTATION
   ========================================================================== */
.wg-host { display: block; }

.wg-rig {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ---- shared stroke vocabulary: one thin-line set, no fills -------------- */
.wg-rig .wg-frame,
.wg-rig .wg-ln,
.wg-rig .wg-edge,
.wg-rig .wg-hair,
.wg-rig .wg-lattice,
.wg-rig .wg-rail,
.wg-rig .wg-gpu__bay,
.wg-rig .wg-core__hex,
.wg-rig .wg-core__ring {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.wg-rig .wg-frame     { stroke: var(--u-line-2); stroke-width: var(--wg-sw); }
.wg-rig .wg-edge      { stroke: var(--u-line-3); stroke-width: var(--wg-sw); }
.wg-rig .wg-ln        { stroke: var(--u-muted);  stroke-width: var(--wg-sw); }
.wg-rig .wg-hair      { stroke: var(--u-line-2); stroke-width: var(--wg-sw-hair); }
.wg-rig .wg-lattice   { stroke: var(--u-line-1); stroke-width: var(--wg-sw-hair); }
.wg-rig .wg-gpu__bay  { stroke: var(--u-line-2); stroke-width: var(--wg-sw); }
.wg-rig .wg-track     { fill: var(--u-line-1); }
.wg-rig .wg-bar       { fill: var(--wg-violet); }
.wg-rig .wg-node      { fill: var(--u-silver); }
.wg-rig .wg-gpu__led  { fill: var(--wg-violet); opacity: 0.2; }
.wg-rig .wg-particle  { fill: var(--wg-blue); opacity: 0; }

/* ---- mono chrome inside the rig ---------------------------------------- */
.wg-rig text {
    font-family: var(--u-font-mono);
    font-weight: 500;
    letter-spacing: 0.12em;
}
.wg-rig .wg-label { font-size: 12px; fill: var(--u-muted); }
.wg-rig .wg-idx   { font-size: 10px; fill: var(--u-silver); }
.wg-rig .wg-read  { font-size: 11px; fill: var(--u-silver); }

/* ---- pipeline rails: draw in once on mount ------------------------------ */
.wg-rig .wg-rail {
    stroke: var(--wg-blue);
    stroke-width: var(--wg-sw-hair);
    opacity: 0.55;
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: wg-draw var(--u-d-scene) var(--u-ease-enter) forwards;
}
@keyframes wg-draw { to { stroke-dashoffset: 0; } }

/* ---- INPUT: rough fragments jitter in the intake ------------------------ */
.wg-rig .jit {
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-jit 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.9s);
}
@keyframes wg-jit {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(1.5px, -1.5px) rotate(2deg); }
}

/* ---- determinate bars: scaleX only, never width ------------------------- */
.wg-rig .wg-bar {
    transform-box: fill-box;
    transform-origin: left center;
    animation: wg-fill 4.4s var(--u-ease-enter) infinite;
    animation-delay: calc(var(--i) * -0.8s);
}
@keyframes wg-fill {
    0%   { transform: scaleX(0.06); opacity: 0.5; }
    70%  { transform: scaleX(0.96); opacity: 1; }
    100% { transform: scaleX(0.06); opacity: 0.5; }
}

/* ---- MODEL: nodes illuminate in sequence -------------------------------- */
.wg-rig .wg-node {
    opacity: 0.35;
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-node 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.26s);
}
@keyframes wg-node {
    0%, 70%, 100% { opacity: 0.3;  transform: scale(1); }
    12%           { opacity: 1;    transform: scale(1.35); }
}

/* ---- PROCESSING: bays wake one at a time -------------------------------- */
.wg-rig .wg-gpu {
    opacity: 0.5;
    animation: wg-wake var(--wg-wake) ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.9s);
}
@keyframes wg-wake {
    0%, 100% { opacity: 0.45; }
    18%      { opacity: 1; }
    45%      { opacity: 0.6; }
}
.wg-rig .wg-gpu__led {
    animation: wg-led var(--wg-wake) ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.9s);
}
@keyframes wg-led {
    0%, 100% { opacity: 0.15; }
    18%      { opacity: 1; }
}

/* ---- the compute core: slow pulse + heat shimmer ------------------------ */
.wg-rig .wg-core__hex {
    stroke: var(--wg-magenta);
    stroke-width: var(--wg-sw);
    opacity: 0.85;
}
.wg-rig .wg-core__dot {
    fill: var(--wg-magenta);
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-core-dot var(--wg-pulse) ease-in-out infinite;
}
@keyframes wg-core-dot {
    0%, 100% { opacity: 0.75; transform: scale(0.88); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

.wg-rig .wg-core__ring {
    stroke: var(--wg-violet);
    stroke-width: var(--wg-sw-hair);
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-core-ring var(--wg-pulse) var(--u-ease-enter) infinite;
    animation-delay: calc(var(--i) * -1.1s);
}
@keyframes wg-core-ring {
    0%   { opacity: 0.45; transform: scale(0.86); }
    60%  { opacity: 0.12; transform: scale(1.14); }
    100% { opacity: 0.45; transform: scale(0.86); }
}

.wg-rig .sh {
    stroke: var(--wg-violet);
    opacity: 0.22;
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-shimmer 2.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.7s);
}
@keyframes wg-shimmer {
    0%, 100% { transform: translateY(0);      opacity: 0.08; }
    50%      { transform: translateY(-2.5px); opacity: 0.3; }
}

/* ---- OUTPUT: generated result materialises, then dissolves -------------- */
.wg-rig .wg-out {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-out var(--wg-outc) var(--u-ease-enter) infinite;
}
.wg-rig .wg-out .wg-ln { stroke: var(--wg-magenta); }
@keyframes wg-out {
    0%        { opacity: 0;    transform: scale(0.94); }
    18%       { opacity: 0.95; transform: scale(1); }
    62%       { opacity: 0.8;  transform: scale(1); }
    88%, 100% { opacity: 0;    transform: scale(1.02); }
}

.wg-rig .fr {
    stroke: var(--wg-violet);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-frag var(--wg-outc) var(--u-ease-enter) infinite;
    animation-delay: calc(var(--i) * 0.18s + 0.5s);
}
@keyframes wg-frag {
    0%       { opacity: 0; transform: translateY(6px) scale(0.7); }
    16%      { opacity: 0.9; transform: translateY(0) scale(1); }
    46%      { opacity: 0.5; transform: translateY(-4px) scale(1); }
    70%,100% { opacity: 0; transform: translateY(-8px) scale(0.9); }
}

/* ---- particles flowing the whole pipeline ------------------------------- */
.wg-rig .wg-particle {
    animation: wg-flow var(--dur, var(--wg-flow)) linear infinite;
    animation-delay: calc(var(--i) * -0.43s);
}
@keyframes wg-flow {
    0%   { transform: translate(0, 0);                          opacity: 0; }
    12%  {                                                      opacity: 0.85; }
    80%  {                                                      opacity: 0.4; }
    100% { transform: translate(var(--wg-tx), var(--wg-ty));    opacity: 0; }
}

/* ---- media thumbnails riding the rails into the core -------------------- */
.wg-rig .wg-thumb {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-travel var(--wg-thumb-d) cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-delay: calc(var(--i) * -2.1s);
}
.wg-rig .wg-thumb .wg-ln { stroke: var(--u-light); }
@keyframes wg-travel {
    0%       { transform: translate(0, 0) scale(0.85); opacity: 0; }
    10%      { opacity: 0.9; }
    52%      { transform: translate(var(--wg-mx), var(--wg-my)) scale(1); opacity: 0.9; }
    64%      { transform: translate(var(--wg-mx), var(--wg-my)) scale(0.2); opacity: 0; }
    100%     { transform: translate(var(--wg-mx), var(--wg-my)) scale(0.2); opacity: 0; }
}

/* ---- the hover payload: RAW INPUT -> PROCESSING -> MODEL -> OUTPUT ------ */
.wg-rig .wg-payload {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.wg-rig .wg-payload .wg-ln { stroke: var(--wg-magenta); }

.wg-rig.is-hot .wg-payload {
    animation: wg-payload var(--wg-payload) var(--u-ease-enter) infinite;
}
@keyframes wg-payload {
    0%   { transform: translate(0, 0) scale(0.8) rotate(-6deg); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate(var(--wg-mx), var(--wg-my)) scale(1.15) rotate(4deg); opacity: 1; }
    62%  { transform: translate(var(--wg-mx), var(--wg-my)) scale(0.15) rotate(0deg); opacity: 0; }
    100% { transform: translate(var(--wg-mx), var(--wg-my)) scale(0.15); opacity: 0; }
}

/* ---- hover: throughput rises, everything runs harder -------------------- */
.wg-rig.is-hot { --wg-wake: 1.5s; --wg-pulse: 1.5s; --wg-outc: 2.4s; }
.wg-rig.is-hot .wg-particle { animation-duration: calc(var(--dur, var(--wg-flow)) * 0.42); }
.wg-rig.is-hot .wg-thumb    { animation-duration: calc(var(--wg-thumb-d) * 0.42); }
.wg-rig.is-hot .wg-bar      { animation-duration: 1.6s; }
.wg-rig.is-hot .wg-node     { animation-duration: 1.4s; }
.wg-rig.is-hot .wg-rail     { opacity: 0.9; }
.wg-rig.is-hot .wg-core__hex { opacity: 1; }
.wg-rig .wg-rail,
.wg-rig .wg-core__hex { transition: opacity var(--u-d-micro-lg) var(--u-ease-enter); }

/* ---- activation flourish: brief core over-spin, < 180ms ----------------- */
.wg-rig.is-spin .wg-core {
    transform-box: fill-box;
    transform-origin: center;
    animation: wg-overspin 170ms var(--u-ease-exit);
}
@keyframes wg-overspin {
    0%   { transform: rotate(0deg) scale(1); }
    60%  { transform: rotate(140deg) scale(1.16); }
    100% { transform: rotate(240deg) scale(1); }
}

/* ============================================================================
   THE LAB FLOOR — PROJECT ENVIRONMENT
   Content sits on the void, separated by hairlines. No cards.
   ========================================================================== */
.wg-floor {
    max-width: 1360px;
    margin: 0 auto;
    padding-bottom: var(--u-s7);
}

.wg-floor__head {
    max-width: 68ch;
    margin-bottom: var(--u-s6);
}

.wg-kicker {
    margin: 0 0 var(--u-s2);
    font-family: var(--u-font-mono);
    font-size: var(--u-t-micro);
    font-weight: 500;
    letter-spacing: var(--u-track-mono);
    text-transform: uppercase;
    color: var(--u-muted);
}

.wg-floor__title {
    margin: 0 0 var(--u-s2);
    font-size: var(--u-t-world);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: var(--u-track-title);
    color: var(--u-white);
}

.wg-floor__lead {
    margin: 0;
    font-size: var(--u-t-lead);
    line-height: var(--u-lh-body);
    color: var(--u-light);
}

/* ---- the plot: high-density precision compute bays grid ----------------- */
.wg-floor__plot {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--u-s5) var(--u-s4);
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* ---- one processing bay ------------------------------------------------- */
.wg-bay {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--u-s3);
    text-align: left;
    background: rgba(9, 13, 22, 0.68);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-top: 2px solid rgba(139, 92, 246, 0.4);
    border-radius: 8px;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--u-light);
    font-family: inherit;
    cursor: pointer;
    box-sizing: border-box;
    opacity: 0.96;
    will-change: transform;
    transition:
        transform var(--u-d-micro-lg) var(--u-ease-enter),
        border-color var(--u-d-micro-lg) var(--u-ease-enter),
        background-color var(--u-d-micro-lg) var(--u-ease-enter),
        box-shadow var(--u-d-micro-lg) var(--u-ease-enter),
        opacity var(--u-d-micro-lg) var(--u-ease-enter);
}

/* Staggered abstract floating constellation on desktop */
@media (min-width: 1201px) {
    .wg-bay:nth-child(1) { margin-top: 0px; }
    .wg-bay:nth-child(2) { margin-top: 36px; }
    .wg-bay:nth-child(3) { margin-top: 14px; }
    .wg-bay:nth-child(4) { margin-top: 48px; }
    .wg-bay:nth-child(5) { margin-top: 18px; }
    .wg-bay:nth-child(6) { margin-top: 52px; }
    .wg-bay:nth-child(7) { margin-top: 8px; }
    .wg-bay:nth-child(8) { margin-top: 42px; }
}
@media (min-width: 861px) and (max-width: 1200px) {
    .wg-bay:nth-child(1) { margin-top: 0px; }
    .wg-bay:nth-child(2) { margin-top: 28px; }
    .wg-bay:nth-child(3) { margin-top: 10px; }
    .wg-bay:nth-child(4) { margin-top: 32px; }
    .wg-bay:nth-child(5) { margin-top: 8px; }
    .wg-bay:nth-child(6) { margin-top: 36px; }
    .wg-bay:nth-child(7) { margin-top: 12px; }
    .wg-bay:nth-child(8) { margin-top: 26px; }
}

/* Weightless organic floating animations */
.wg-bay:nth-child(4n + 1) {
    animation: wgFloat1 6.8s ease-in-out infinite;
}
.wg-bay:nth-child(4n + 2) {
    animation: wgFloat2 7.6s ease-in-out infinite 0.9s;
}
.wg-bay:nth-child(4n + 3) {
    animation: wgFloat3 6.2s ease-in-out infinite 1.8s;
}
.wg-bay:nth-child(4n + 4) {
    animation: wgFloat4 7.2s ease-in-out infinite 2.7s;
}

@keyframes wgFloat1 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(-0.5deg); }
}
@keyframes wgFloat2 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(8px) rotate(0.6deg); }
}
@keyframes wgFloat3 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(-7px) rotate(0.4deg); }
}
@keyframes wgFloat4 {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%      { transform: translateY(9px) rotate(-0.6deg); }
}

.wg-bay:hover,
.wg-bay:focus-visible {
    animation-play-state: paused;
    transform: translateY(-10px) scale(1.028) !important;
    opacity: 1;
    border-top-color: var(--wg-violet);
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(18, 16, 32, 0.88);
    box-shadow: 0 24px 48px -8px rgba(0, 0, 0, 0.8), 0 0 28px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    z-index: 10;
    outline: none;
}

.wg-bay:focus-visible {
    outline: 1px solid var(--u-pure);
    outline-offset: 8px;
}

.wg-bay__idx {
    display: block;
    margin-bottom: var(--u-s1);
    font-family: var(--u-font-mono);
    font-size: var(--u-t-micro);
    font-weight: 500;
    letter-spacing: var(--u-track-mono);
    color: var(--u-silver);
    font-variant-numeric: tabular-nums;
}

/* ---- the machine frame + its media motif -------------------------------- */
.wg-bay__art {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: var(--u-s2);
    overflow: visible;
}

.wg-bay__art .wg-b-frame,
.wg-bay__art .wg-b-edge,
.wg-bay__art .wg-b-hair,
.wg-bay__art .wg-b-ln,
.wg-bay__art .wg-b-wave,
.wg-bay__art .wg-b-tile {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.wg-bay__art .wg-b-frame { stroke: var(--u-line-2); stroke-width: 1.5; }
.wg-bay__art .wg-b-edge  { stroke: var(--u-line-3); stroke-width: 1.5; }
.wg-bay__art .wg-b-hair  { stroke: var(--u-line-1); stroke-width: 1; }
.wg-bay__art .wg-b-ln    { stroke: var(--u-line-2); stroke-width: 1.5; }
.wg-bay__art .wg-b-lug   { fill: var(--u-line-3); }
.wg-bay__art .wg-b-wave  { stroke: var(--u-silver); stroke-width: 1.5; }
.wg-bay__art .wg-b-tile  { stroke: var(--u-line-2); stroke-width: 1.5; }
.wg-bay__art .wg-b-node  { fill: var(--u-silver); opacity: 0.55; }
.wg-bay__art .wg-b-motif {
    transition: opacity var(--u-d-micro-lg) var(--u-ease-enter);
}

/* ---- name / status / index --------------------------------------------- */
.wg-bay__name {
    display: block;
    margin-bottom: var(--u-s1);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: var(--u-track-title);
    color: var(--u-white);
    overflow-wrap: break-word;
    min-height: 2.56em;
}

.wg-bay__meta {
    display: block;
    margin-bottom: var(--u-s2);
}

.wg-chip {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--u-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--u-track-mono);
    text-transform: uppercase;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid currentColor;
    color: var(--u-muted);
}
.wg-chip--live         { color: var(--u-status-live); border-color: rgba(125, 211, 160, 0.4); }
.wg-chip--private      { color: var(--u-status-private); border-color: rgba(148, 163, 184, 0.35); }
.wg-chip--open-source  { color: var(--u-status-open); border-color: rgba(167, 139, 250, 0.4); }
.wg-chip--experimental { color: var(--u-status-experimental); border-color: rgba(184, 255, 60, 0.4); }

.wg-bay__blurb {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
    color: var(--u-muted);
    opacity: 0.85;
    margin-top: auto;
    transition: color var(--u-d-micro) var(--u-ease-enter),
                opacity var(--u-d-micro) var(--u-ease-enter);
}

/* ---- focus state (keyboard, always available) --------------------------- */
.wg-bay:focus-visible {
    opacity: 1;
    border-top-color: var(--wg-violet);
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.08);
}
.wg-bay:focus-visible .wg-bay__blurb { opacity: 1; color: var(--u-light); }
.wg-bay:focus-visible .wg-b-frame    { stroke: var(--wg-violet); }
.wg-bay:focus-visible .wg-b-lug      { fill: var(--wg-magenta); }

/* ---- pointer-only affordances ------------------------------------------ */
@media (hover: hover) {
    .wg-bay:hover {
        opacity: 1;
        border-top-color: var(--wg-violet);
        border-color: rgba(139, 92, 246, 0.5);
        background: rgba(139, 92, 246, 0.08);
    }
    .wg-bay:hover .wg-bay__blurb { opacity: 1; color: var(--u-light); }
    .wg-bay:hover .wg-b-frame    { stroke: var(--wg-violet); }
    .wg-bay:hover .wg-b-lug      { fill: var(--wg-magenta); }
    .wg-bay:hover .wg-b-motif    { opacity: 1; }
}

/* ============================================================================
   8 DISTINCT MACHINE MOTIF ANIMATIONS & ARTWORK
   ========================================================================== */

/* Shared SVG styling rules for all motifs */
.wg-bay__art line,
.wg-bay__art path,
.wg-bay__art circle,
.wg-bay__art rect,
.wg-bay__art polygon {
    vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   01: TIMELINE (AI LOCAL VIDEO EDITOR)
   NLE Playhead scrub, multi-track audio energy dancing, clip blocks
   -------------------------------------------------------------------------- */
.wg-b-timeline .wg-tl-clip {
    fill: rgba(139, 92, 246, 0.08);
    stroke: rgba(139, 92, 246, 0.45);
    stroke-width: 1.2;
}
.wg-b-timeline .wg-tl-clip.c1 { fill: rgba(59, 130, 246, 0.12); stroke: rgba(59, 130, 246, 0.65); }
.wg-b-timeline .wg-tl-clip.c2 { fill: rgba(217, 70, 239, 0.12); stroke: rgba(217, 70, 239, 0.65); }
.wg-b-timeline .wg-tl-clip.c3 { fill: rgba(139, 92, 246, 0.12); stroke: rgba(139, 92, 246, 0.65); }

.wg-b-timeline .wg-tl-audio {
    stroke: var(--u-silver);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.65;
    transform-box: fill-box;
    transform-origin: center;
    animation: wgTlAudioWave 1.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.06s);
}
@keyframes wgTlAudioWave {
    0%   { transform: scaleY(0.4); opacity: 0.35; stroke: var(--u-muted); }
    100% { transform: scaleY(1.35); opacity: 0.95; stroke: var(--wg-violet); }
}

.wg-b-timeline .wg-tl-overlay {
    fill: rgba(245, 158, 11, 0.18);
    stroke: rgba(245, 158, 11, 0.6);
    stroke-width: 1;
}

.wg-b-timeline .wg-tl-playhead {
    transform-box: view-box;
    animation: wgTlScrub 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.wg-b-timeline .wg-tl-needle {
    stroke: #ef4444;
    stroke-width: 1.5;
    stroke-linecap: round;
}
.wg-b-timeline .wg-tl-diamond {
    fill: #ef4444;
}
@keyframes wgTlScrub {
    0%   { transform: translateX(20px); }
    88%  { transform: translateX(180px); }
    100% { transform: translateX(180px); opacity: 0; }
}

.wg-bay:hover .wg-b-timeline .wg-tl-playhead,
.wg-bay:focus-visible .wg-b-timeline .wg-tl-playhead {
    animation-duration: 2.2s;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
}
.wg-bay:hover .wg-b-timeline .wg-tl-clip,
.wg-bay:focus-visible .wg-b-timeline .wg-tl-clip {
    stroke-width: 1.6;
}

/* --------------------------------------------------------------------------
   02: DIFFUSION (OFFLINE IMAGE WORKSTATION)
   Latent denoising vector field, seed cell shimmer, compute core pulse
   -------------------------------------------------------------------------- */
.wg-b-diffusion .wg-diff-cell {
    fill: rgba(15, 23, 42, 0.5);
    stroke: rgba(148, 163, 184, 0.35);
    stroke-width: 1;
    transition: all var(--u-d-micro-lg) var(--u-ease-enter);
}
.wg-b-diffusion .wg-diff-seed {
    fill: var(--wg-violet);
    opacity: 0.55;
    transform-box: fill-box;
    transform-origin: center;
    animation: wgDiffSeed 2.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.16s);
}
@keyframes wgDiffSeed {
    0%, 100% { transform: scale(0.7); opacity: 0.3; fill: var(--wg-violet); }
    50%      { transform: scale(1.4); opacity: 1; fill: var(--wg-magenta); }
}

.wg-b-diffusion .wg-diff-vector {
    fill: none;
    stroke: rgba(139, 92, 246, 0.6);
    stroke-width: 1.2;
    stroke-dasharray: 6 4;
    animation: wgDiffFlow 3s linear infinite;
}
@keyframes wgDiffFlow {
    to { stroke-dashoffset: -20; }
}

.wg-b-diffusion .wg-diff-core {
    fill: rgba(217, 70, 239, 0.08);
    stroke: var(--wg-magenta);
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
    animation: wgDiffCoreDash 6s linear infinite;
}
@keyframes wgDiffCoreDash {
    to { stroke-dashoffset: 28; }
}

.wg-b-diffusion .wg-diff-core-pulse {
    fill: var(--wg-magenta);
    transform-box: fill-box;
    transform-origin: center;
    animation: wgDiffCorePulse 2.8s ease-in-out infinite;
}
@keyframes wgDiffCorePulse {
    0%, 100% { transform: scale(0.8); opacity: 0.35; }
    50%      { transform: scale(1.3); opacity: 0.9; }
}

.wg-bay:hover .wg-b-diffusion .wg-diff-cell,
.wg-bay:focus-visible .wg-b-diffusion .wg-diff-cell {
    stroke: rgba(217, 70, 239, 0.7);
    fill: rgba(217, 70, 239, 0.12);
}

/* --------------------------------------------------------------------------
   03: FACETRACK (GENESIS: YT-CLIP-MASTER)
   Vertical 9:16 crop bounds, real-time face tracking reticle & lock
   -------------------------------------------------------------------------- */
.wg-b-facetrack .wg-ft-crop {
    fill: rgba(139, 92, 246, 0.06);
    stroke: var(--wg-violet);
    stroke-width: 1.2;
    animation: wgFtCropBlink 3.2s ease-in-out infinite;
}
@keyframes wgFtCropBlink {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; stroke-width: 1.6; }
}

.wg-b-facetrack .wg-ft-reticle {
    transform-box: view-box;
    animation: wgFtPan 5.2s ease-in-out infinite;
}
@keyframes wgFtPan {
    0%   { transform: translate(94px, 36px); }
    30%  { transform: translate(106px, 34px); }
    65%  { transform: translate(90px, 42px); }
    100% { transform: translate(94px, 36px); }
}

.wg-b-facetrack .wg-ft-bracket {
    fill: none;
    stroke: #10b981;
    stroke-width: 1.5;
    animation: wgFtLockPulse 1.8s ease-in-out infinite;
}
@keyframes wgFtLockPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); stroke: #34d399; }
}

.wg-b-facetrack .wg-ft-dot {
    fill: #10b981;
}
.wg-b-facetrack .wg-ft-eyeline {
    stroke: #10b981;
    stroke-width: 1;
    stroke-dasharray: 2 2;
}
.wg-b-facetrack .wg-ft-caption {
    stroke: var(--u-silver);
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.6;
    animation: wgFtCaptionBlink 2.4s ease-in-out infinite;
}
@keyframes wgFtCaptionBlink {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.9; }
}

.wg-bay:hover .wg-b-facetrack .wg-ft-bracket,
.wg-bay:focus-visible .wg-b-facetrack .wg-ft-bracket {
    stroke: #34d399;
    filter: drop-shadow(0 0 6px #10b981);
}

/* --------------------------------------------------------------------------
   04: ENHANCER (PHOTO ENHANCER & BG REMOVER)
   Coarse pixel blocks, vector contour cutout, laser scanning beam
   -------------------------------------------------------------------------- */
.wg-b-enhancer .wg-esr-pixel {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(148, 163, 184, 0.4);
    stroke-width: 1;
    animation: wgEsrDither 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.14s);
}
@keyframes wgEsrDither {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.85; fill: rgba(6, 182, 212, 0.18); }
}

.wg-b-enhancer .wg-esr-contour {
    fill: rgba(6, 182, 212, 0.08);
    stroke: #06b6d4;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 140;
    stroke-dashoffset: 0;
}
.wg-b-enhancer .wg-esr-mesh-dot {
    fill: #06b6d4;
    filter: drop-shadow(0 0 4px #06b6d4);
}

.wg-b-enhancer .wg-esr-laser-group {
    transform-box: view-box;
    animation: wgEsrSweep 3.6s ease-in-out infinite alternate;
}
.wg-b-enhancer .wg-esr-beam {
    stroke: #06b6d4;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 5px #06b6d4);
}
.wg-b-enhancer .wg-esr-spark {
    fill: #ffffff;
    filter: drop-shadow(0 0 6px #06b6d4);
}
@keyframes wgEsrSweep {
    0%   { transform: translateX(24px); }
    100% { transform: translateX(174px); }
}

.wg-bay:hover .wg-b-enhancer .wg-esr-contour,
.wg-bay:focus-visible .wg-b-enhancer .wg-esr-contour {
    stroke-width: 2.4;
    filter: drop-shadow(0 0 8px #06b6d4);
}
.wg-bay:hover .wg-b-enhancer .wg-esr-laser-group,
.wg-bay:focus-visible .wg-b-enhancer .wg-esr-laser-group {
    animation-duration: 1.8s;
}

/* --------------------------------------------------------------------------
   05: AUDIO (CHATTERBOX AUDIO STUDIO)
   22-band voice frequency spectrum analyzer, formant ripples
   -------------------------------------------------------------------------- */
.wg-b-audio .wg-audio-eq-bar {
    stroke: var(--wg-violet);
    stroke-width: 2.2;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: wgAudioBounce 1.2s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.065s);
}
@keyframes wgAudioBounce {
    0%   { transform: scaleY(0.2); stroke: var(--wg-violet); opacity: 0.45; }
    50%  { transform: scaleY(0.85); opacity: 0.8; }
    100% { transform: scaleY(1.35); stroke: var(--wg-magenta); opacity: 1; }
}

.wg-b-audio .wg-audio-peak {
    fill: var(--wg-magenta);
    opacity: 0.85;
    animation: wgAudioPeakFloat 1.2s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * -0.065s);
}
@keyframes wgAudioPeakFloat {
    0%   { transform: translateY(6px); opacity: 0.3; }
    100% { transform: translateY(-4px); opacity: 1; }
}

.wg-b-audio .wg-audio-wave {
    fill: none;
    stroke: rgba(217, 70, 239, 0.65);
    stroke-width: 1.4;
    stroke-dasharray: 6 3;
    animation: wgAudioWaveFlow 2.6s linear infinite;
}
@keyframes wgAudioWaveFlow {
    to { stroke-dashoffset: -20; }
}
.wg-b-audio .wg-audio-core {
    fill: var(--wg-violet);
}

.wg-bay:hover .wg-b-audio .wg-audio-eq-bar,
.wg-bay:focus-visible .wg-b-audio .wg-audio-eq-bar {
    stroke-width: 2.6;
    animation-duration: 0.75s;
    filter: drop-shadow(0 0 5px rgba(217, 70, 239, 0.6));
}

/* --------------------------------------------------------------------------
   06: PIPELINE (LONG-FORMAT VIDEO PIPELINE)
   Modular assembly stages, glowing conduit rails & data packet transport
   -------------------------------------------------------------------------- */
.wg-b-pipeline .wg-pipe-stage {
    fill: rgba(15, 23, 42, 0.6);
    stroke: var(--u-line-2);
    stroke-width: 1.2;
    animation: wgPipeStagePulse 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.85s);
}
@keyframes wgPipeStagePulse {
    0%, 100% { stroke: var(--u-line-2); fill: rgba(15, 23, 42, 0.6); }
    30%      { stroke: var(--wg-violet); fill: rgba(139, 92, 246, 0.16); }
}

.wg-b-pipeline .wg-pipe-node {
    fill: var(--u-silver);
    opacity: 0.55;
    animation: wgPipeNodeFlash 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.85s);
}
@keyframes wgPipeNodeFlash {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    30%      { opacity: 1; fill: var(--wg-magenta); transform: scale(1.3); }
}

.wg-b-pipeline .wg-pipe-conduit {
    stroke: var(--wg-blue);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.wg-b-pipeline .wg-pipe-pkt {
    transform-box: view-box;
}
.wg-b-pipeline .pkt-1 {
    fill: var(--wg-magenta);
    filter: drop-shadow(0 0 5px var(--wg-magenta));
    animation: wgPipePktMove 3.4s linear infinite;
}
.wg-b-pipeline .pkt-2 {
    fill: var(--wg-violet);
    filter: drop-shadow(0 0 5px var(--wg-violet));
    animation: wgPipePktMove 3.4s linear infinite 1.7s;
}
@keyframes wgPipePktMove {
    0%   { transform: translateX(24px); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(170px); opacity: 0; }
}

.wg-b-pipeline .wg-pipe-rail {
    stroke: var(--u-line-2);
    stroke-width: 1;
    animation: wgPipeRailDash 4s linear infinite;
}
@keyframes wgPipeRailDash {
    to { stroke-dashoffset: -20; }
}

.wg-bay:hover .wg-b-pipeline .pkt-1,
.wg-bay:hover .wg-b-pipeline .pkt-2,
.wg-bay:focus-visible .wg-b-pipeline .pkt-1,
.wg-bay:focus-visible .wg-b-pipeline .pkt-2 {
    animation-duration: 1.8s;
}

/* --------------------------------------------------------------------------
   07: AUTOML (AI DATA ANALYST & AUTOML)
   Synapse graph DAG, decision node network, ROC/AUC curve sweep
   -------------------------------------------------------------------------- */
.wg-b-automl .wg-aml-synapse {
    stroke: rgba(148, 163, 184, 0.2);
    stroke-width: 1;
    animation: wgSynapseSpark 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.14s);
}
@keyframes wgSynapseSpark {
    0%, 100% { stroke: rgba(148, 163, 184, 0.18); stroke-width: 1; }
    50%      { stroke: var(--wg-violet); stroke-width: 1.5; }
}

.wg-b-automl .wg-aml-node {
    fill: var(--u-silver);
    opacity: 0.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: wgAmlNodePulse 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.22s);
}
@keyframes wgAmlNodePulse {
    0%, 100% { transform: scale(1); fill: var(--u-silver); opacity: 0.4; }
    50%      { transform: scale(1.4); fill: #10b981; opacity: 1; }
}

.wg-b-automl .wg-aml-curve {
    fill: none;
    stroke: #10b981;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 200;
    animation: wgAmlCurveDraw 4.4s ease-in-out infinite;
}
@keyframes wgAmlCurveDraw {
    0%   { stroke-dashoffset: 200; opacity: 0.3; }
    45%  { stroke-dashoffset: 0; opacity: 1; }
    85%  { stroke-dashoffset: 0; opacity: 0.9; }
    100% { stroke-dashoffset: -200; opacity: 0.3; }
}

.wg-bay:hover .wg-b-automl .wg-aml-curve,
.wg-bay:focus-visible .wg-b-automl .wg-aml-curve {
    stroke-width: 2.4;
    filter: drop-shadow(0 0 8px #10b981);
}

/* --------------------------------------------------------------------------
   08: PUBLISHER (GENESIS: LINKEDIN PUBLISHER)
   Social post preview, typewriter streaming line, RF broadcast transmitter
   -------------------------------------------------------------------------- */
.wg-b-publisher .wg-pub-card {
    fill: rgba(15, 23, 42, 0.55);
    stroke: var(--u-line-2);
    stroke-width: 1.2;
}
.wg-b-publisher .wg-pub-avatar {
    fill: #0ea5e9;
}
.wg-b-publisher .wg-pub-text {
    stroke: var(--u-silver);
    stroke-width: 1.6;
    stroke-linecap: round;
    transform-box: fill-box;
    transform-origin: left center;
    animation: wgTypeStream 3.4s ease-in-out infinite;
}
.wg-b-publisher .wg-pub-text.t2 {
    animation-delay: 0.4s;
}
@keyframes wgTypeStream {
    0%        { transform: scaleX(0.2); opacity: 0.35; }
    45%, 85%  { transform: scaleX(1); opacity: 0.95; }
    100%      { transform: scaleX(0.2); opacity: 0.35; }
}

.wg-b-publisher .wg-pub-img {
    fill: rgba(139, 92, 246, 0.08);
    stroke: rgba(139, 92, 246, 0.4);
    stroke-width: 1;
}

.wg-b-publisher .wg-pub-ring {
    fill: none;
    stroke: #0ea5e9;
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    animation: wgRingSpin 4s linear infinite;
}
@keyframes wgRingSpin {
    to { transform: rotate(360deg); }
}

.wg-b-publisher .wg-pub-beacon {
    fill: #0ea5e9;
    filter: drop-shadow(0 0 6px #0ea5e9);
    animation: wgBeaconPulse 1.8s ease-in-out infinite;
}
@keyframes wgBeaconPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.wg-b-publisher .wg-pub-wave {
    fill: none;
    stroke: #0ea5e9;
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: left center;
    animation: wgRfWave 2.1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.wg-b-publisher .wg-pub-wave.w1 { animation-delay: 0s; }
.wg-b-publisher .wg-pub-wave.w2 { animation-delay: 0.55s; }
.wg-b-publisher .wg-pub-wave.w3 { animation-delay: 1.1s; }
@keyframes wgRfWave {
    0%   { opacity: 0.9; transform: scale(0.85); stroke-width: 1.6; }
    100% { opacity: 0; transform: scale(1.4); stroke-width: 0.8; }
}

.wg-bay:hover .wg-b-publisher .wg-pub-beacon,
.wg-bay:focus-visible .wg-b-publisher .wg-pub-beacon {
    filter: drop-shadow(0 0 10px #0ea5e9);
}

/* the film strip is clipped to the machine frame while it travels */
.wg-bay__art { clip-path: inset(-6px -2px -6px -2px); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    .wg-floor__plot {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--u-s4);
    }
}

@media (max-width: 860px) {
    .wg-floor__head { margin-bottom: var(--u-s5); }
    .wg-floor__plot {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--u-s3);
    }
    .wg-bay {
        margin-top: 0 !important;
        padding: var(--u-s2);
    }
    .wg-bay__name {
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .wg-floor__plot {
        grid-template-columns: 1fr;
        gap: var(--u-s3);
    }
    .wg-bay {
        margin-top: 0 !important;
        padding: var(--u-s3);
    }
    .wg-bay__name {
        font-size: 16px;
    }
}

/* ============================================================================
   REDUCED MOTION
   One static composed frame: all four stages labelled, output present, bays
   at fixed load levels. No particles, no payload, no shimmer, no wake.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wg-rig *,
    .wg-floor * { animation: none !important; transition: none !important; }
}

.wg--still *,
.wg-rig.wg--still {
    animation: none !important;
    transition: none !important;
}

.wg--still .wg-particle,
.wg--still .wg-thumb,
.wg--still .wg-payload,
.wg--still .wg-shimmer { display: none; }

.wg--still .wg-rail   { stroke-dashoffset: 0; opacity: 0.6; }
.wg--still .wg-out    { opacity: 0.9; }
.wg--still .wg-frag   { display: none; }
.wg--still .wg-gpu    { opacity: 0.8; }
.wg--still .wg-gpu__led { opacity: 0.7; }
.wg--still .wg-node   { opacity: 0.7; }
.wg--still .wg-bar    {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(calc(0.32 + var(--i) * 0.17));
}

/* the same static frame when the OS asks for it, whatever the JS flag said */
@media (prefers-reduced-motion: reduce) {
    .wg-rig .wg-particle,
    .wg-rig .wg-thumb,
    .wg-rig .wg-payload,
    .wg-rig .wg-shimmer { display: none; }

    .wg-rig .wg-rail { stroke-dashoffset: 0; opacity: 0.6; }
    .wg-rig .wg-out  { opacity: 0.9; }
    .wg-rig .wg-frag { display: none; }
    .wg-rig .wg-gpu,
    .wg-rig .wg-node { opacity: 0.75; }
    .wg-rig .wg-gpu__led { opacity: 0.7; }
    .wg-rig .wg-bar {
        transform-box: fill-box;
        transform-origin: left center;
        transform: scaleX(calc(0.32 + var(--i) * 0.17));
    }
    .wg-bay { transform: none !important; opacity: 1; margin-top: 0 !important; animation: none !important; }
    .wg-bay__blurb { opacity: 1; transform: none; }
}