.gme-bgfx-active {
    isolation: isolate;
}

.gme-bgfx-layer {
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
    transform: translateZ(0);
    will-change: transform, opacity;
}

.gme-bgfx-field,
.gme-bgfx-interaction-layer {
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:visible;
}
.gme-bgfx-field { will-change:filter, transform; }
.gme-bgfx-interaction-layer { z-index:2; filter:saturate(1.55) contrast(1.08); }
.gme-bgfx-filter-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

.gme-bgfx-blob {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    border-radius: 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    pointer-events: none;
}

.gme-bgfx-gasoline .gme-bgfx-blob {
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
}

.gme-bgfx-aurora .gme-bgfx-blob {
    min-width: 38%;
    aspect-ratio: 1.6 / 1;
}

.gme-bgfx-spotlight .gme-bgfx-blob-1 {
    transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
    [data-gme-status="reduced-motion"] .gme-bgfx-layer {
        display: none !important;
    }
}


.gme-sticker {
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.gme-sticker img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

.gme-sticker-composite {
    translate: var(--gme-sticker-scroll-x, 0px) var(--gme-sticker-scroll-y, 0px);
    rotate: var(--gme-sticker-scroll-rotate, 0deg);
    scale: var(--gme-sticker-scroll-scale, 1);
    transform-origin: center center;
}

/* Atomic Scene Controller: no ocupa espacio en frontend. */
.gme-atomic-controller {
    display: block;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
}

.gme-atomic-bgfx {
    pointer-events: none;
}

/* SVG Draw anti-FOUC.
 * Fail-open: si un script externo/CSP falla, el SVG vuelve a verse solo después de 1.4s.
 * Nunca debe quedar oculto permanentemente por el atributo data-gme-svg-pending.
 */
[data-gme-svg-pending="yes"] svg,
svg[data-gme-svg-pending="yes"] {
    visibility: hidden;
    animation: gme-svg-fail-open 0.01s linear 1.4s forwards;
}
@keyframes gme-svg-fail-open {
    to { visibility: visible; }
}

/* Marquee */
.gme-marquee-active { overflow:hidden; }
.gme-marquee-track { display:flex; flex-wrap:nowrap; align-items:center; width:max-content; max-width:none; }
.gme-marquee-track > * { flex-shrink:0; }
.gme-marquee-track [data-gme-marquee-clone="yes"] { pointer-events:none; }

/* Fluid FX */
.gme-bgfx-fluid { opacity:1; }
.gme-bgfx-fluid .gme-bgfx-blob { box-shadow: inset 0 0 40px rgba(255,255,255,.08); }

/* Horizontal chapter v0.6.6: flujo vertical NATIVO + track sticky.
 * No capturamos wheel/touch ni usamos overscroll contain, así el usuario siempre
 * puede continuar bajando con rueda, trackpad, touch o scrollbar. */
html.gme-has-horizontal-chapter,
html.gme-has-horizontal-chapter body {
    overflow-x: clip;
}
.gme-horizontal-chapter {
    overscroll-behavior: auto;
    touch-action: pan-y;
}
.gme-horizontal-chapter-active { cursor: default; }
.gme-horizontal-sticky-track {
    position: sticky !important;
    top: 0;
    z-index: 0;
}
.gme-horizontal-flow-space {
    display:block !important;
    visibility:hidden !important;
    opacity:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    min-width:0 !important;
    overflow:hidden !important;
}

/* FX interactivo: estela y ondas de energía, siempre detrás del contenido. */
.gme-bgfx-wake,
.gme-bgfx-ripple {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    pointer-events: none;
    will-change: transform, opacity;
}
.gme-bgfx-wake {
    border-radius: 48% 52% 62% 38% / 46% 58% 42% 54%;
    filter: blur(7px) saturate(1.75) contrast(1.12);
    mix-blend-mode: screen;
}
.gme-bgfx-ripple {
    width: 18%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid currentColor;
    box-shadow: 0 0 22px currentColor, 0 0 50px currentColor, inset 0 0 14px currentColor;
    opacity: 0;
}

.gme-bgfx-cursor-lens {
    position:absolute; left:0; top:0; display:block; border-radius:46% 54% 63% 37% / 42% 58% 42% 58%;
    pointer-events:none; opacity:0; mix-blend-mode:screen; filter:blur(8px) saturate(2.1) contrast(1.18);
    box-shadow:0 0 35px rgba(255,255,255,.16), inset 0 0 42px rgba(255,255,255,.16);
    will-change:transform,opacity;
}

/* v0.6.3: track interno real. El elemento pinneado nunca es el mismo que viaja en X. */
.gme-horizontal-track {
    box-sizing: border-box;
    position: relative;
    min-width: 0;
}
.gme-horizontal-track-active {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    max-width: none !important;
    will-change: transform;
}
.gme-horizontal-track-active > * {
    flex-shrink: 0;
}

/* Fluid v0.6.6: el cursor deforma las masas; no renderizamos la antigua "mariposa" cromática. */
.gme-bgfx-fluid .gme-bgfx-interaction-layer {
    filter: none;
}
.gme-bgfx-fluid .gme-bgfx-blob {
    backface-visibility: hidden;
    transform: translateZ(0);
    box-shadow: inset 0 0 54px rgba(255,255,255,.055);
}
.gme-bgfx-fluid .gme-bgfx-field {
    transform: translateZ(0);
}

/* Aurora: cintas de luz difusas, sin lente/estelas que persigan el mouse. */
.gme-bgfx-aurora .gme-bgfx-blob {
    mix-blend-mode: screen;
    will-change: transform;
}

/* Spotlight: dos halos suaves con inercia, no un círculo duro pegado al cursor. */
.gme-bgfx-spotlight .gme-bgfx-blob {
    mix-blend-mode: screen;
}

/* WebGL Oil Field v0.6.6 */
.gme-bgfx-webgl-layer {
    overflow: hidden;
    transform: translateZ(0);
}
.gme-bgfx-webgl-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translateZ(0);
}