/*
   lakeEffectLogic — Opus variant layer
   Animation-heavy desktop decorative overlays.
   Opus 1: Aurora Pulse  —  crystalline SVG geometry, constellation network, pulsing orbs
   Opus 2: Isometric Grid — dimensional grid field, morphing blobs, floating orbit ring
   Opus 3: Neon Circuit  —  circuit board traces, neon glow typography, wave dividers, matrix rain
*/

/* === Mobile: hide all decorative layers === */
@media (max-width: 979px) {
    body.variant-page .opus-layer,
    body.variant-page .opus-constellation,
    body.variant-page .opus-orbs,
    body.variant-page .opus-grid-field,
    body.variant-page .opus-blob-wrap,
    body.variant-page .opus-orbit-ring,
    body.variant-page .opus-circuit,
    body.variant-page .opus-wave-divider,
    body.variant-page .opus-matrix-canvas,
    body.variant-page .opus-particles,
    body.variant-page .opus-badge,
    body.variant-page .opus-data-panel,
    body.variant-page #hero::before,
    body.variant-page #hero::after,
    body.variant-page #flagship::before,
    body.variant-page #flagship::after,
    body.variant-page #apps::before,
    body.variant-page #apps::after,
    body.variant-page #studio::before,
    body.variant-page #studio::after,
    body.variant-page #join::before,
    body.variant-page #join::after,
    body.variant-page .hero-bg::before,
    body.variant-page .hero-bg::after {
        display: none !important;
    }
}

/* === Desktop === */
@media (min-width: 980px) {

    /* ---------- Shared variant tokens ---------- */
    body.variant-page {
        --op-a: var(--accent);
        --op-b: var(--accent-ice);
        --op-c: var(--violet);
        --op-line: color-mix(in srgb, var(--op-a) 38%, transparent);
        --op-soft: color-mix(in srgb, var(--op-a) 14%, transparent);
        --op-glow: color-mix(in srgb, var(--op-a) 22%, transparent);
    }

    body.opus-01 {
        --op-a: #38bdf8;
        --op-b: #a78bfa;
        --op-c: #22d3ee;
        --op-label: "V1 / Aurora Pulse";
    }

    body.opus-02 {
        --op-a: #fbbf24;
        --op-b: #2dd4bf;
        --op-c: #f97316;
        --op-label: "V2 / Isometric Grid";
    }

    body.opus-03 {
        --op-a: #4ade80;
        --op-b: #f472b6;
        --op-c: #22d3ee;
        --op-label: "V3 / Neon Circuit";
    }

    /* ---------- Variant badge ---------- */
    body.variant-page .opus-badge {
        display: none !important;
    }

    /* ---------- Section isolation ---------- */
    body.variant-page #hero,
    body.variant-page #flagship,
    body.variant-page #apps,
    body.variant-page #studio,
    body.variant-page #join {
        isolation: isolate;
        overflow: hidden;
    }

    body.variant-page section .wrap,
    body.variant-page .app-rows,
    body.variant-page .counters,
    body.variant-page .principles,
    body.variant-page .join-form {
        position: relative;
        z-index: 3;
    }

    body.variant-page .hero-bg {
        z-index: 0;
    }

    /* ---------- Pseudo-element base ---------- */
    body.variant-page #hero::before,
    body.variant-page #hero::after,
    body.variant-page #flagship::before,
    body.variant-page #flagship::after,
    body.variant-page #apps::before,
    body.variant-page #apps::after,
    body.variant-page #studio::before,
    body.variant-page #studio::after,
    body.variant-page #join::before,
    body.variant-page #join::after,
    body.variant-page .hero-bg::before,
    body.variant-page .hero-bg::after {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: 1;
    }

    /* ---------- Interactive glow on cards ---------- */
    body.variant-page .app-row,
    body.variant-page .counter,
    body.variant-page .principle {
        transition:
            opacity 0.45s var(--ease-out),
            background 0.3s,
            box-shadow 0.3s,
            transform 0.45s var(--ease-out);
    }

    body.variant-page .app-row:hover,
    body.variant-page .counter:hover,
    body.variant-page .principle:hover {
        box-shadow: 0 22px 70px var(--op-glow);
    }

    /* ================================================================
       OPUS LAYER: injected containers (positioned by JS)
       ================================================================ */

    .opus-layer {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    /* ---------- Constellation (Opus 1) ---------- */
    .opus-constellation {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .opus-constellation svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .opus-constellation .con-line {
        stroke: var(--op-line);
        stroke-width: 0.7;
        opacity: 0.5;
        animation: conLinePulse 6s ease-in-out infinite;
    }

    .opus-constellation .con-line:nth-child(odd) {
        animation-delay: -2s;
    }

    .opus-constellation .con-node {
        fill: var(--op-a);
        opacity: 0.7;
        animation: conNodePulse 4s ease-in-out infinite;
    }

    .opus-constellation .con-node:nth-child(3n) {
        fill: var(--op-b);
        animation-delay: -1.5s;
    }

    .opus-constellation .con-node:nth-child(3n+1) {
        fill: var(--op-c);
        animation-delay: -3s;
    }

    .opus-constellation .con-traveler {
        fill: var(--op-a);
        filter: drop-shadow(0 0 8px var(--op-a));
        animation: conTravel var(--dur, 6s) linear infinite;
        offset-path: var(--path);
        offset-distance: 0%;
    }

    /* ---------- Gradient Orbs (Opus 1) ---------- */
    .opus-orbs {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .opus-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        mix-blend-mode: screen;
        will-change: transform, opacity;
    }

    .opus-orb:nth-child(1) {
        width: 38vw;
        height: 38vw;
        top: -10%;
        left: 55%;
        background: radial-gradient(circle, var(--op-a), transparent 70%);
        opacity: 0.25;
        animation: orbBreathe 12s ease-in-out infinite;
    }

    .opus-orb:nth-child(2) {
        width: 30vw;
        height: 30vw;
        top: 25%;
        right: -8%;
        background: radial-gradient(circle, var(--op-b), transparent 70%);
        opacity: 0.2;
        animation: orbBreathe 16s ease-in-out infinite reverse;
    }

    .opus-orb:nth-child(3) {
        width: 25vw;
        height: 25vw;
        bottom: 10%;
        left: 8%;
        background: radial-gradient(circle, var(--op-c), transparent 70%);
        opacity: 0.18;
        animation: orbBreathe 20s ease-in-out infinite;
        animation-delay: -4s;
    }

    /* Snowflake SVG geometry (Opus 1 hero) */
    .opus-snowflake {
        position: absolute;
        top: 8%;
        right: 2%;
        width: min(48vw, 640px);
        aspect-ratio: 1;
        z-index: 1;
        pointer-events: none;
        animation: snowflakeSpin 60s linear infinite;
    }

    .opus-snowflake svg {
        width: 100%;
        height: 100%;
    }

    .opus-snowflake .sf-arm {
        fill: none;
        stroke: var(--op-line);
        stroke-width: 0.6;
        stroke-linecap: round;
        opacity: 0.6;
        stroke-dasharray: 800;
        stroke-dashoffset: 800;
        animation: sfDraw 4s var(--ease-out) forwards;
    }

    .opus-snowflake .sf-arm:nth-child(2) { animation-delay: 0.3s; }
    .opus-snowflake .sf-arm:nth-child(3) { animation-delay: 0.6s; }
    .opus-snowflake .sf-arm:nth-child(4) { animation-delay: 0.9s; }
    .opus-snowflake .sf-arm:nth-child(5) { animation-delay: 1.2s; }
    .opus-snowflake .sf-arm:nth-child(6) { animation-delay: 1.5s; }

    .opus-snowflake .sf-crystal {
        fill: none;
        stroke: var(--op-a);
        stroke-width: 0.4;
        opacity: 0.4;
        animation: sfPulse 8s ease-in-out infinite;
    }

    /* ---------- Isometric Grid (Opus 2) ---------- */
    .opus-grid-field {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        perspective: 1200px;
    }

    .opus-grid-field svg {
        position: absolute;
        top: 5%;
        right: -5%;
        width: min(55vw, 750px);
        height: 80vh;
        transform: rotateX(55deg) rotateZ(-45deg);
        transform-style: preserve-3d;
        opacity: 0.5;
    }

    .opus-grid-field .iso-line {
        stroke: var(--op-line);
        stroke-width: 0.5;
        fill: none;
    }

    .opus-grid-field .iso-cell {
        fill: var(--op-soft);
        stroke: var(--op-line);
        stroke-width: 0.3;
        opacity: 0;
        animation: isoCellPop 0.6s var(--ease-out) forwards;
        animation-delay: var(--d, 0s);
    }

    .opus-grid-field .iso-highlight {
        fill: color-mix(in srgb, var(--op-a) 30%, transparent);
        stroke: var(--op-a);
        stroke-width: 0.5;
        animation: isoHighlight 4s ease-in-out infinite;
        animation-delay: var(--d, 0s);
    }

    /* Morphing blobs (Opus 2) */
    .opus-blob-wrap {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .opus-blob {
        position: absolute;
        opacity: 0.12;
        filter: blur(40px);
        animation: blobDrift 20s ease-in-out infinite;
    }

    .opus-blob:nth-child(1) {
        top: -5%;
        right: 10%;
        width: 40vw;
        height: 40vw;
    }

    .opus-blob:nth-child(2) {
        bottom: 5%;
        left: -5%;
        width: 35vw;
        height: 35vw;
        animation-delay: -7s;
        animation-direction: reverse;
    }

    .opus-blob svg {
        width: 100%;
        height: 100%;
    }

    .opus-blob path {
        fill: var(--op-a);
        transition: d 2s ease-in-out;
    }

    .opus-blob:nth-child(2) path {
        fill: var(--op-b);
    }

    /* Orbit ring (Opus 2 hero) */
    .opus-orbit-ring {
        position: absolute;
        top: 50%;
        right: 12%;
        width: min(42vw, 580px);
        aspect-ratio: 1;
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
    }

    .opus-orbit-ring svg {
        width: 100%;
        height: 100%;
        animation: orbitRingSpin 30s linear infinite;
    }

    .opus-orbit-ring .orbit-path {
        fill: none;
        stroke: var(--op-line);
        stroke-width: 0.6;
        stroke-dasharray: 4 8;
    }

    .opus-orbit-ring .orbit-node {
        fill: var(--bg);
        stroke: var(--op-a);
        stroke-width: 1.2;
        filter: drop-shadow(0 0 10px var(--op-glow));
    }

    .opus-orbit-ring .orbit-node:nth-child(3n) { stroke: var(--op-b); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--op-b) 40%, transparent)); }
    .opus-orbit-ring .orbit-node:nth-child(3n+1) { stroke: var(--op-c); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--op-c) 40%, transparent)); }

    .opus-orbit-ring .orbit-label {
        fill: var(--text-dim);
        font-family: var(--font-mono);
        font-size: 8px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* 3D tilt cards (Opus 2) — enabled via JS */
    .opus-tilt-card {
        transition: transform 0.15s ease-out, box-shadow 0.3s;
        transform-style: preserve-3d;
    }

    .opus-tilt-card:hover {
        box-shadow:
            0 30px 80px color-mix(in srgb, var(--op-a) 15%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* Flip counter digits (Opus 2) */
    .opus-flip-digit {
        display: inline-block;
        position: relative;
        overflow: hidden;
        height: 1.1em;
    }

    .opus-flip-digit span {
        display: block;
        animation: flipIn 0.6s var(--ease-out) forwards;
        animation-delay: var(--d, 0s);
        transform: translateY(100%) rotateX(-90deg);
    }

    /* Data panel (Opus 2 hero) */
    .opus-data-panel {
        position: absolute;
        top: 14%;
        right: max(28px, calc((100vw - 1200px) / 2));
        z-index: 2;
        width: 260px;
        display: grid;
        gap: 6px;
        pointer-events: none;
        animation: panelSlideIn 1.2s var(--ease-out) forwards;
        opacity: 0;
        transform: translateX(40px);
    }

    .opus-data-panel .dp-row {
        display: grid;
        grid-template-columns: 1fr 80px;
        gap: 10px;
        align-items: center;
        padding: 10px 12px;
        border: 1px solid var(--op-line);
        border-radius: 8px;
        background: color-mix(in srgb, var(--bg) 74%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--text-dim);
        animation: dpPulse 5s ease-in-out infinite;
    }

    .opus-data-panel .dp-row:nth-child(2n) { animation-delay: -1.5s; }
    .opus-data-panel .dp-row:nth-child(3n) { animation-delay: -3s; }

    .opus-data-panel .dp-val {
        color: var(--op-a);
        font-weight: 500;
        text-align: right;
    }

    .opus-data-panel .dp-bar {
        grid-column: 1 / -1;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--op-a), var(--op-b));
        transform-origin: left;
        animation: dpBarSweep 4s ease-in-out infinite;
    }

    /* ---------- Circuit Board (Opus 3) ---------- */
    .opus-circuit {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .opus-circuit svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .opus-circuit .cir-trace {
        fill: none;
        stroke: var(--op-line);
        stroke-width: 1;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .opus-circuit .cir-current {
        fill: none;
        stroke: var(--op-a);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 20 80;
        filter: drop-shadow(0 0 6px var(--op-a));
        animation: currentFlow var(--dur, 4s) linear infinite;
    }

    .opus-circuit .cir-current:nth-child(even) {
        stroke: var(--op-b);
        filter: drop-shadow(0 0 6px var(--op-b));
        animation-delay: calc(var(--dur, 4s) * -0.5);
    }

    .opus-circuit .cir-node {
        fill: var(--bg);
        stroke: var(--op-a);
        stroke-width: 1.5;
        filter: drop-shadow(0 0 8px var(--op-glow));
    }

    .opus-circuit .cir-node:nth-child(3n) {
        stroke: var(--op-b);
    }

    .opus-circuit .cir-chip {
        fill: color-mix(in srgb, var(--op-a) 15%, transparent);
        stroke: var(--op-a);
        stroke-width: 0.8;
        rx: 3;
        animation: chipGlow 3s ease-in-out infinite;
    }

    .opus-circuit .cir-chip:nth-child(2n) {
        animation-delay: -1.5s;
    }

    /* Neon glow text (Opus 3) */
    body.opus-03 h1 .serif {
        text-shadow:
            0 0 10px color-mix(in srgb, var(--op-a) 60%, transparent),
            0 0 30px color-mix(in srgb, var(--op-a) 30%, transparent),
            0 0 60px color-mix(in srgb, var(--op-a) 15%, transparent);
        animation: neonFlicker 5s ease-in-out infinite;
    }

    body.opus-03 h2 .serif {
        text-shadow:
            0 0 8px color-mix(in srgb, var(--op-a) 50%, transparent),
            0 0 20px color-mix(in srgb, var(--op-a) 20%, transparent);
    }

    /* Wave dividers (Opus 3) */
    .opus-wave-divider {
        position: absolute;
        left: 0;
        right: 0;
        height: 80px;
        z-index: 2;
        pointer-events: none;
        overflow: hidden;
    }

    .opus-wave-divider.top { top: -1px; }
    .opus-wave-divider.bottom { bottom: -1px; transform: scaleY(-1); }

    .opus-wave-divider svg {
        position: absolute;
        bottom: 0;
        width: 200%;
        height: 100%;
        animation: waveFlow 8s linear infinite;
    }

    .opus-wave-divider .wave-line {
        fill: none;
        stroke: var(--op-line);
        stroke-width: 1;
    }

    .opus-wave-divider .wave-glow {
        fill: none;
        stroke: var(--op-a);
        stroke-width: 1.5;
        stroke-dasharray: 30 60;
        filter: drop-shadow(0 0 4px var(--op-a));
        animation: waveDash 3s linear infinite;
    }

    /* Matrix rain canvas (Opus 3) */
    .opus-matrix-canvas {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.12;
    }

    /* Magnetic particles (Opus 3) */
    .opus-particles {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
    }

    .opus-particle {
        position: absolute;
        width: var(--size, 4px);
        height: var(--size, 4px);
        border-radius: 50%;
        background: var(--op-a);
        box-shadow: 0 0 12px var(--op-a);
        opacity: 0.6;
        transition: transform 0.3s ease-out;
        animation: particleDrift var(--dur, 8s) ease-in-out infinite;
        animation-delay: var(--delay, 0s);
    }

    .opus-particle:nth-child(3n) {
        background: var(--op-b);
        box-shadow: 0 0 12px var(--op-b);
    }

    .opus-particle:nth-child(3n+1) {
        background: var(--op-c);
        box-shadow: 0 0 12px var(--op-c);
    }

    /* ================================================================
       OPUS 1 — AURORA PULSE section art
       ================================================================ */

    /* Hero: crystalline geometry backdrop */
    body.opus-01 .hero-bg::before {
        top: 5%;
        right: -3%;
        width: min(50vw, 680px);
        aspect-ratio: 1;
        border-radius: 50%;
        opacity: 0.45;
        background:
            radial-gradient(circle at 50% 50%, transparent 0 14%, var(--op-line) 14.3% 14.7%, transparent 15% 28%, var(--op-line) 28.3% 28.7%, transparent 29% 42%, var(--op-line) 42.3% 42.7%, transparent 43%),
            repeating-conic-gradient(from 0deg, transparent 0 14deg, var(--op-line) 14.5deg 15deg, transparent 15.5deg 30deg);
        filter: drop-shadow(0 30px 80px var(--op-glow));
        mask-image: radial-gradient(circle, #000 40%, transparent 72%);
        -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%);
        animation: auroraCrystalDrift 22s ease-in-out infinite;
    }

    /* Hero: aurora streaks */
    body.opus-01 .hero-bg::after {
        top: 12%;
        right: 8%;
        width: min(40vw, 540px);
        height: 50vh;
        opacity: 0.3;
        background:
            linear-gradient(130deg, transparent 20%, color-mix(in srgb, var(--op-a) 30%, transparent) 30%, transparent 40%),
            linear-gradient(150deg, transparent 40%, color-mix(in srgb, var(--op-b) 25%, transparent) 50%, transparent 60%),
            linear-gradient(170deg, transparent 55%, color-mix(in srgb, var(--op-c) 20%, transparent) 65%, transparent 75%);
        filter: blur(30px);
        animation: auroraStreaks 14s ease-in-out infinite;
    }

    /* Flagship section: repeating rings */
    body.opus-01 #flagship::after {
        right: 3%;
        bottom: 5%;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        opacity: 0.3;
        background:
            repeating-radial-gradient(circle, transparent 0 20px, var(--op-line) 21px 22px, transparent 23px 44px);
        animation: ringPulse 10s ease-in-out infinite;
    }

    /* Apps section: hex grid pattern */
    body.opus-01 #apps::before {
        left: -5%;
        top: 5%;
        width: 380px;
        height: 450px;
        opacity: 0.35;
        background:
            radial-gradient(circle at 30% 25%, var(--op-a) 0 4px, transparent 5px),
            radial-gradient(circle at 70% 45%, var(--op-b) 0 4px, transparent 5px),
            radial-gradient(circle at 45% 75%, var(--op-c) 0 3px, transparent 4px),
            repeating-linear-gradient(60deg, transparent 0 18px, var(--op-line) 19px 20px, transparent 21px 40px),
            repeating-linear-gradient(-60deg, transparent 0 18px, var(--op-line) 19px 20px, transparent 21px 40px);
        border: 1px solid var(--op-line);
        border-radius: 24px;
        transform: rotate(4deg);
    }

    /* Studio section: subtle constellation backdrop */
    body.opus-01 #studio::before {
        right: 4%;
        top: 15%;
        width: 300px;
        height: 300px;
        opacity: 0.25;
        background:
            radial-gradient(circle at 20% 20%, var(--op-a) 0 3px, transparent 4px),
            radial-gradient(circle at 80% 30%, var(--op-b) 0 3px, transparent 4px),
            radial-gradient(circle at 50% 80%, var(--op-c) 0 3px, transparent 4px),
            radial-gradient(circle at 35% 55%, var(--op-a) 0 2px, transparent 3px);
        border: 1px solid var(--op-line);
        border-radius: 50%;
    }

    /* ================================================================
       OPUS 2 — ISOMETRIC GRID section art
       ================================================================ */

    /* Hero: perspective grid floor */
    body.opus-02 .hero-bg::before {
        inset: 40% -20% -5% -20%;
        opacity: 0.22;
        background:
            linear-gradient(color-mix(in srgb, var(--op-a) 18%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in srgb, var(--op-a) 18%, transparent) 1px, transparent 1px);
        background-size: 60px 60px;
        transform: perspective(600px) rotateX(65deg);
        mask-image: linear-gradient(transparent 10%, #000 40%, #000 70%, transparent 95%);
        -webkit-mask-image: linear-gradient(transparent 10%, #000 40%, #000 70%, transparent 95%);
    }

    /* Hero: floating dimension cards */
    body.opus-02 #hero::after {
        content: "WW\A CF\A MQ\A TS\A CS\A ZY";
        white-space: pre;
        right: 5%;
        top: 22%;
        width: 180px;
        padding: 20px;
        border: 1px solid var(--op-line);
        border-radius: 14px;
        background: color-mix(in srgb, var(--bg) 76%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: var(--text-dim);
        font-family: var(--font-mono);
        font-size: 14px;
        letter-spacing: 0.3em;
        line-height: 2.2;
        text-transform: uppercase;
        box-shadow: 0 28px 80px color-mix(in srgb, var(--op-a) 16%, transparent);
        transform: perspective(800px) rotateY(-12deg) rotateX(4deg);
        animation: isoCardFloat 10s ease-in-out infinite;
    }

    /* Flagship: 3D cube wireframe */
    body.opus-02 #flagship::before {
        left: 5%;
        bottom: 8%;
        width: 260px;
        height: 260px;
        border: 1px solid var(--op-line);
        opacity: 0.3;
        transform: perspective(600px) rotateX(20deg) rotateY(30deg) rotateZ(10deg);
        box-shadow:
            60px -30px 0 -1px transparent,
            60px -30px 0 0 var(--op-line);
        animation: cubeRotate 18s ease-in-out infinite;
    }

    body.opus-02 #flagship::after {
        left: calc(5% + 60px);
        bottom: calc(8% + 30px);
        width: 260px;
        height: 260px;
        border: 1px solid var(--op-line);
        opacity: 0.2;
        transform: perspective(600px) rotateX(20deg) rotateY(30deg) rotateZ(10deg);
    }

    /* Apps: stacked layers */
    body.opus-02 #apps::before {
        right: -2%;
        top: 4%;
        width: 320px;
        height: 420px;
        border: 1px solid var(--op-line);
        border-radius: 16px;
        opacity: 0.28;
        background:
            linear-gradient(180deg, transparent 0 30%, var(--op-line) 30.2% 30.6%, transparent 30.8% 60%, var(--op-line) 60.2% 60.6%, transparent 60.8%),
            linear-gradient(90deg, transparent 0 48%, var(--op-line) 48.2% 48.6%, transparent 48.8%);
        transform: perspective(600px) rotateY(-8deg);
    }

    /* Studio: blueprint overlay */
    body.opus-02 #studio::before {
        left: 3%;
        top: 12%;
        width: 340px;
        height: 240px;
        opacity: 0.25;
        background:
            linear-gradient(var(--op-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--op-line) 1px, transparent 1px),
            linear-gradient(45deg, transparent 49.5%, color-mix(in srgb, var(--op-a) 18%, transparent) 49.7% 50.3%, transparent 50.5%);
        background-size: 30px 30px, 30px 30px, auto;
        border: 1px solid var(--op-line);
    }

    /* ================================================================
       OPUS 3 — NEON CIRCUIT section art
       ================================================================ */

    /* Hero: glowing grid with circuit hints */
    body.opus-03 .hero-bg::before {
        inset: 0;
        opacity: 0.15;
        background:
            linear-gradient(var(--op-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--op-line) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 70%);
        -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 70%);
    }

    /* Hero: neon edge glow */
    body.opus-03 .hero-bg::after {
        inset: 0;
        opacity: 0.2;
        background:
            linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--op-a) 20%, transparent) 80%),
            radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--op-b) 15%, transparent), transparent 50%),
            radial-gradient(ellipse at 70% 40%, color-mix(in srgb, var(--op-c) 12%, transparent), transparent 45%);
    }

    /* Flagship: scanline effect */
    body.opus-03 #flagship::before {
        inset: 0;
        opacity: 0.04;
        background: repeating-linear-gradient(
            0deg,
            transparent 0 3px,
            var(--op-a) 3px 4px
        );
        animation: scanlineScroll 12s linear infinite;
    }

    /* Apps: vertical data streams */
    body.opus-03 #apps::before {
        left: 4%;
        top: 0;
        bottom: 0;
        width: 1px;
        opacity: 0.5;
        background: linear-gradient(180deg, transparent, var(--op-a), transparent);
        box-shadow: 0 0 12px var(--op-a);
        animation: dataStream 6s linear infinite;
    }

    body.opus-03 #apps::after {
        right: 4%;
        top: 0;
        bottom: 0;
        width: 1px;
        opacity: 0.35;
        background: linear-gradient(180deg, transparent, var(--op-b), transparent);
        box-shadow: 0 0 12px var(--op-b);
        animation: dataStream 8s linear infinite reverse;
    }

    /* Studio: neon border accents */
    body.opus-03 #studio::before {
        inset: 24px;
        border: 1px solid transparent;
        border-image: linear-gradient(135deg, var(--op-a), transparent 40%, transparent 60%, var(--op-b)) 1;
        opacity: 0.3;
        animation: borderRotate 12s linear infinite;
    }

    /* Join: pulsing spotlight */
    body.opus-03 #join::before {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 60vw;
        height: 60vw;
        border-radius: 50%;
        background: radial-gradient(circle, color-mix(in srgb, var(--op-a) 10%, transparent), transparent 60%);
        animation: neonSpotlight 6s ease-in-out infinite;
    }

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

    @keyframes badgePulse {
        0%, 100% { box-shadow: 0 18px 48px var(--op-glow); }
        50% { box-shadow: 0 18px 48px var(--op-glow), 0 0 20px var(--op-glow); }
    }

    @keyframes conLinePulse {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.7; }
    }

    @keyframes conNodePulse {
        0%, 100% { opacity: 0.5; r: 2.5; }
        50% { opacity: 1; r: 3.5; }
    }

    @keyframes conTravel {
        0% { offset-distance: 0%; }
        100% { offset-distance: 100%; }
    }

    @keyframes orbBreathe {
        0%, 100% { transform: scale(1) translate(0, 0); opacity: var(--o, 0.22); }
        33% { transform: scale(1.15) translate(3%, 2%); opacity: calc(var(--o, 0.22) * 1.5); }
        66% { transform: scale(0.9) translate(-2%, 3%); opacity: calc(var(--o, 0.22) * 0.7); }
    }

    @keyframes snowflakeSpin {
        to { transform: rotate(360deg); }
    }

    @keyframes sfDraw {
        to { stroke-dashoffset: 0; }
    }

    @keyframes sfPulse {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.7; }
    }

    @keyframes auroraCrystalDrift {
        0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
        33% { transform: translate(-15px, 10px) rotate(2deg) scale(1.05); }
        66% { transform: translate(10px, -8px) rotate(-1deg) scale(0.97); }
    }

    @keyframes auroraStreaks {
        0%, 100% { opacity: 0.3; transform: translateX(0); }
        50% { opacity: 0.5; transform: translateX(-20px); }
    }

    @keyframes ringPulse {
        0%, 100% { transform: scale(1); opacity: 0.3; }
        50% { transform: scale(1.06); opacity: 0.5; }
    }

    @keyframes isoCellPop {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }

    @keyframes isoHighlight {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.8; fill: color-mix(in srgb, var(--op-a) 50%, transparent); }
    }

    @keyframes isoCardFloat {
        0%, 100% { transform: perspective(800px) rotateY(-12deg) rotateX(4deg) translateY(0); }
        50% { transform: perspective(800px) rotateY(-12deg) rotateX(4deg) translateY(-14px); }
    }

    @keyframes cubeRotate {
        0%, 100% { transform: perspective(600px) rotateX(20deg) rotateY(30deg) rotateZ(10deg); }
        50% { transform: perspective(600px) rotateX(25deg) rotateY(38deg) rotateZ(14deg); }
    }

    @keyframes blobDrift {
        0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
        33% { transform: translate(5%, -3%) scale(1.08) rotate(5deg); }
        66% { transform: translate(-3%, 4%) scale(0.95) rotate(-3deg); }
    }

    @keyframes orbitRingSpin {
        to { transform: rotate(360deg); }
    }

    @keyframes flipIn {
        from { transform: translateY(100%) rotateX(-90deg); }
        to { transform: translateY(0) rotateX(0); }
    }

    @keyframes panelSlideIn {
        to { opacity: 1; transform: translateX(0); }
    }

    @keyframes dpPulse {
        0%, 100% { opacity: 0.55; }
        50% { opacity: 0.95; }
    }

    @keyframes dpBarSweep {
        0%, 100% { transform: scaleX(0.25); opacity: 0.4; }
        50% { transform: scaleX(1); opacity: 1; }
    }

    @keyframes currentFlow {
        to { stroke-dashoffset: -200; }
    }

    @keyframes chipGlow {
        0%, 100% { opacity: 0.4; }
        50% { opacity: 0.9; fill: color-mix(in srgb, var(--op-a) 25%, transparent); }
    }

    @keyframes neonFlicker {
        0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
        20%, 24%, 55% { opacity: 0.85; }
    }

    @keyframes waveFlow {
        to { transform: translateX(-50%); }
    }

    @keyframes waveDash {
        to { stroke-dashoffset: -180; }
    }

    @keyframes particleDrift {
        0%, 100% { transform: translate(0, 0); opacity: 0.4; }
        25% { transform: translate(calc(var(--dx, 20px)), calc(var(--dy, -30px))); opacity: 0.8; }
        50% { transform: translate(calc(var(--dx, 20px) * -0.5), calc(var(--dy, -30px) * 1.2)); opacity: 0.5; }
        75% { transform: translate(calc(var(--dx, 20px) * 0.8), calc(var(--dy, -30px) * -0.3)); opacity: 0.7; }
    }

    @keyframes scanlineScroll {
        to { transform: translateY(4px); }
    }

    @keyframes dataStream {
        0% { background-position: 0 -100%; }
        100% { background-position: 0 200%; }
    }

    @keyframes borderRotate {
        0% { border-image: linear-gradient(0deg, var(--op-a), transparent 40%, transparent 60%, var(--op-b)) 1; }
        25% { border-image: linear-gradient(90deg, var(--op-a), transparent 40%, transparent 60%, var(--op-b)) 1; }
        50% { border-image: linear-gradient(180deg, var(--op-a), transparent 40%, transparent 60%, var(--op-b)) 1; }
        75% { border-image: linear-gradient(270deg, var(--op-a), transparent 40%, transparent 60%, var(--op-b)) 1; }
        100% { border-image: linear-gradient(360deg, var(--op-a), transparent 40%, transparent 60%, var(--op-b)) 1; }
    }

    @keyframes neonSpotlight {
        0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
        50% { opacity: 0.6; transform: translateX(-50%) scale(1.1); }
    }

} /* end @media (min-width: 980px) */

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    body.variant-page .opus-layer,
    body.variant-page .opus-constellation,
    body.variant-page .opus-orbs,
    body.variant-page .opus-grid-field,
    body.variant-page .opus-blob-wrap,
    body.variant-page .opus-orbit-ring,
    body.variant-page .opus-circuit,
    body.variant-page .opus-wave-divider,
    body.variant-page .opus-matrix-canvas,
    body.variant-page .opus-particles,
    body.variant-page .opus-snowflake,
    body.variant-page .opus-badge,
    body.variant-page .opus-data-panel,
    body.variant-page #hero::before,
    body.variant-page #hero::after,
    body.variant-page .hero-bg::before,
    body.variant-page .hero-bg::after,
    body.variant-page #flagship::before,
    body.variant-page #flagship::after,
    body.variant-page #apps::before,
    body.variant-page #apps::after,
    body.variant-page #studio::before,
    body.variant-page #studio::after,
    body.variant-page #join::before,
    body.variant-page #join::after {
        animation: none !important;
        transition: none !important;
    }
}