/* xebadges1 (23-10-2026; Mortimer: «cada badge permitirá usar el background (look) que tenemos ahora mismo en
   news.xelementia.com … agni sería pues el que tenemos en fire.xelementia.com, etc»): the six XElementia looks of an
   Ape Site page, unlocked by the XElementia Master badges (xe_masters.py). The same atmospheres as XElementia's
   static/css/tribe-atmos.css (tribeatmos1 + newsatmos1, 20-10-2026), copied here so bascdao never loads XE files:
   the sky, two slow layers, the particles canvas (ape-xe-looks.js) and the vignette, inside .ape-bgfx.
   Loaded only on a site that uses one of these looks. Everything is scoped to the ape-bg--<look> class.
   Moving layers use transform / opacity only, and the cards over them are tinted glass WITHOUT backdrop-filter
   (re-blurring a moving background every frame is what cost XElementia the most). */

body.ape-bg--xelementia, body.ape-bg--agni, body.ape-bg--akasha, body.ape-bg--vayu, body.ape-bg--bhumi, body.ape-bg--apas {
    --xa-base: #07030f;
    --xa-card-a: rgba(20, 10, 34, 0.8);
    --xa-card-b: rgba(8, 4, 16, 0.86);
    --xa-line: rgba(255, 255, 255, 0.12);
    --xa-glow: #8a6bff;
}

/* Agni: fire.xelementia.com */
body.ape-bg--agni {
    --xa-base: #0b0201;
    --xa-sky:
        radial-gradient(120% 55% at 50% 112%, rgba(255, 96, 24, 0.5) 0%, rgba(255, 60, 10, 0.16) 45%, transparent 70%),
        radial-gradient(60% 40% at 8% 100%, rgba(255, 40, 0, 0.28) 0%, transparent 70%),
        radial-gradient(55% 40% at 94% 96%, rgba(255, 150, 0, 0.2) 0%, transparent 70%),
        radial-gradient(70% 45% at 50% -8%, rgba(120, 18, 6, 0.55) 0%, transparent 70%),
        linear-gradient(180deg, #080100 0%, #160403 38%, #2a0803 78%, #3a0d02 100%);
    --xa-glow: #ff5a1f;
    --xa-card-a: rgba(34, 9, 4, 0.8);
    --xa-card-b: rgba(12, 3, 2, 0.88);
    --xa-line: rgba(255, 120, 60, 0.22);
}

/* Apas: water.xelementia.com */
body.ape-bg--apas {
    --xa-base: #010915;
    --xa-sky:
        radial-gradient(90% 45% at 50% -12%, rgba(120, 205, 255, 0.34) 0%, rgba(60, 140, 255, 0.1) 45%, transparent 70%),
        radial-gradient(50% 38% at 12% 40%, rgba(30, 110, 220, 0.18) 0%, transparent 70%),
        radial-gradient(50% 40% at 90% 70%, rgba(20, 200, 220, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #06305e 0%, #042247 26%, #021632 58%, #010a1b 100%);
    --xa-glow: #3b9dff;
    --xa-card-a: rgba(4, 26, 56, 0.78);
    --xa-card-b: rgba(2, 12, 30, 0.86);
    --xa-line: rgba(110, 200, 255, 0.22);
}

/* Vayu: air.xelementia.com */
body.ape-bg--vayu {
    --xa-base: #0a1a2c;
    --xa-sky:
        radial-gradient(80% 50% at 78% -6%, rgba(255, 255, 255, 0.2) 0%, rgba(190, 235, 255, 0.08) 45%, transparent 70%),
        radial-gradient(60% 40% at 10% 30%, rgba(140, 220, 255, 0.14) 0%, transparent 70%),
        radial-gradient(70% 45% at 50% 108%, rgba(120, 200, 255, 0.2) 0%, transparent 70%),
        linear-gradient(180deg, #123a5c 0%, #0f2f4d 30%, #0c2440 62%, #081a30 100%);
    --xa-glow: #7fdcff;
    --xa-card-a: rgba(16, 44, 72, 0.76);
    --xa-card-b: rgba(8, 24, 44, 0.86);
    --xa-line: rgba(200, 240, 255, 0.24);
}

/* Bhumi: earth.xelementia.com */
body.ape-bg--bhumi {
    --xa-base: #050a04;
    --xa-sky:
        radial-gradient(70% 45% at 22% -8%, rgba(214, 222, 120, 0.16) 0%, rgba(120, 170, 60, 0.06) 45%, transparent 70%),
        radial-gradient(55% 40% at 92% 30%, rgba(60, 176, 67, 0.14) 0%, transparent 70%),
        radial-gradient(90% 45% at 50% 112%, rgba(150, 105, 40, 0.3) 0%, transparent 70%),
        linear-gradient(180deg, #0c1a0b 0%, #0b170a 34%, #10180a 66%, #1a160a 100%);
    --xa-glow: #49c95a;
    --xa-card-a: rgba(16, 28, 13, 0.82);
    --xa-card-b: rgba(7, 12, 6, 0.88);
    --xa-line: rgba(160, 210, 110, 0.2);
}

/* Akasha: aether.xelementia.com */
body.ape-bg--akasha {
    --xa-base: #04020c;
    --xa-sky:
        radial-gradient(55% 40% at 18% 24%, rgba(147, 112, 219, 0.32) 0%, transparent 70%),
        radial-gradient(50% 38% at 84% 62%, rgba(230, 80, 200, 0.18) 0%, transparent 70%),
        radial-gradient(45% 32% at 62% 6%, rgba(70, 190, 255, 0.14) 0%, transparent 70%),
        radial-gradient(70% 45% at 40% 100%, rgba(100, 60, 220, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, #0a0520 0%, #0b0624 40%, #08041a 70%, #04020c 100%);
    --xa-glow: #a98bff;
    --xa-card-a: rgba(22, 12, 48, 0.78);
    --xa-card-b: rgba(9, 5, 22, 0.87);
    --xa-line: rgba(190, 160, 255, 0.22);
}

/* XElementia: news.xelementia.com, the Nexus where the five elements meet */
body.ape-bg--xelementia {
    --xa-base: #04050f;
    --xa-sky:
        radial-gradient(45% 35% at 10% 12%, rgba(169, 139, 255, 0.24) 0%, transparent 70%),
        radial-gradient(45% 35% at 92% 10%, rgba(127, 220, 255, 0.2) 0%, transparent 70%),
        radial-gradient(45% 40% at 4% 62%, rgba(73, 201, 90, 0.16) 0%, transparent 70%),
        radial-gradient(50% 40% at 12% 104%, rgba(255, 90, 31, 0.26) 0%, transparent 70%),
        radial-gradient(50% 40% at 92% 100%, rgba(59, 130, 255, 0.26) 0%, transparent 70%),
        radial-gradient(40% 30% at 50% 50%, rgba(20, 217, 255, 0.07) 0%, transparent 70%),
        linear-gradient(180deg, #070a1f 0%, #060818 45%, #05060f 100%);
    --xa-glow: #14d9ff;
    --xa-card-a: rgba(12, 16, 40, 0.8);
    --xa-card-b: rgba(6, 7, 20, 0.88);
    --xa-line: rgba(140, 200, 255, 0.2);
}

/* ---------- the page background ---------- */
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) { background: var(--xa-base); }
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-bgfx { background: var(--xa-base); }
/* XElementia's atmospheres have no grain: the fine texture of the other looks stays off */
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-bgfx::before { content: none; }
/* brightness: a neutral dark layer (the purple one of the other looks would muddy the element's colours) */
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas).ape-bg--dark-light .ape-bgfx::after { background: none; }
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas).ape-bg--dark-medium .ape-bgfx::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.3)); }
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas).ape-bg--dark-strong .ape-bgfx::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.62)); }

.ape-xl { position: absolute; inset: 0; z-index: 0; overflow: hidden; contain: strict; }
.ape-xl > * { position: absolute; inset: 0; }
.ape-xl .xa-sky { background: var(--xa-sky); }
.ape-xl .xa-fx { width: 100%; height: 100%; }
.ape-xl .xa-vig { background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
.ape-xl .xa-l1, .ape-xl .xa-l2 { will-change: transform, opacity; }

/* fire: breathing heat at the bottom + slow flame light sweeping */
.ape-xl[data-element="fire"] .xa-l1 {
    inset: auto -10% -18% -10%; height: 60%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(255, 110, 20, 0.55) 0%, rgba(255, 50, 0, 0.18) 50%, transparent 75%);
    animation: xaHeat 5.5s ease-in-out infinite; }
.ape-xl[data-element="fire"] .xa-l2 {
    inset: -20%;
    background:
        radial-gradient(28% 22% at 20% 80%, rgba(255, 140, 40, 0.16) 0%, transparent 70%),
        radial-gradient(26% 20% at 80% 70%, rgba(255, 70, 20, 0.16) 0%, transparent 70%);
    animation: xaSway 14s ease-in-out infinite alternate; }

/* water: light shafts from the surface + a slow caustic glow */
.ape-xl[data-element="water"] .xa-l1 {
    inset: -10% -20% 30% -20%;
    background: repeating-linear-gradient(100deg, transparent 0 7%, rgba(150, 220, 255, 0.07) 8% 10%, transparent 11% 17%, rgba(120, 200, 255, 0.05) 18% 19%, transparent 20% 26%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    transform-origin: 50% 0;
    animation: xaRays 16s ease-in-out infinite alternate; }
.ape-xl[data-element="water"] .xa-l2 {
    inset: -10% -10% 50% -10%;
    background:
        radial-gradient(30% 26% at 30% 20%, rgba(120, 220, 255, 0.14) 0%, transparent 70%),
        radial-gradient(26% 22% at 72% 12%, rgba(90, 170, 255, 0.14) 0%, transparent 70%);
    animation: xaSway 11s ease-in-out infinite alternate; }

/* air: big soft clouds travelling across the sky */
.ape-xl[data-element="air"] .xa-l1 {
    inset: 0 -60% 0 -60%;
    background:
        radial-gradient(14% 9% at 18% 22%, rgba(235, 248, 255, 0.13) 0%, transparent 70%),
        radial-gradient(18% 10% at 46% 58%, rgba(220, 242, 255, 0.1) 0%, transparent 70%),
        radial-gradient(12% 8% at 74% 34%, rgba(240, 250, 255, 0.12) 0%, transparent 70%),
        radial-gradient(16% 9% at 88% 80%, rgba(210, 238, 255, 0.09) 0%, transparent 70%);
    animation: xaDrift 70s linear infinite; }
.ape-xl[data-element="air"] .xa-l2 {
    inset: 0 -60% 0 -60%;
    background:
        radial-gradient(20% 12% at 30% 78%, rgba(200, 236, 255, 0.08) 0%, transparent 70%),
        radial-gradient(14% 8% at 62% 16%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: xaDrift 110s linear infinite reverse; }

/* earth: mountain ridges at the bottom + sunbeams through the canopy (inline SVG shapes, no outside file) */
.ape-xl[data-element="earth"] .xa-l1 {
    inset: auto 0 0 0; height: 34vh; min-height: 200px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 210 L120 150 L210 190 L330 96 L450 176 L560 120 L700 200 L820 110 L930 168 L1060 84 L1180 170 L1300 126 L1440 180 L1440 320 L0 320Z' fill='%2312240f' fill-opacity='.75'/%3E%3Cpath d='M0 250 L140 200 L260 236 L380 170 L520 240 L660 186 L780 246 L900 196 L1040 252 L1160 198 L1300 244 L1440 210 L1440 320 L0 320Z' fill='%230b1709' fill-opacity='.9'/%3E%3Cpath d='M0 290 L180 262 L360 286 L540 258 L720 292 L900 262 L1080 290 L1260 266 L1440 286 L1440 320 L0 320Z' fill='%23060d05'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    opacity: 0.85; }
.ape-xl[data-element="earth"] .xa-l2 {
    inset: -20% -10% 20% -30%;
    background: repeating-linear-gradient(118deg, transparent 0 9%, rgba(230, 220, 140, 0.06) 10% 12%, transparent 13% 21%, rgba(200, 230, 140, 0.045) 22% 23%, transparent 24% 32%);
    -webkit-mask-image: radial-gradient(70% 70% at 15% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(70% 70% at 15% 0%, #000 0%, transparent 75%);
    transform-origin: 0 0;
    animation: xaRays 18s ease-in-out infinite alternate; }

/* aether: a slow arcane circle + drifting nebula (inline SVG) */
.ape-xl[data-element="aether"] .xa-l1 {
    inset: auto; left: 50%; top: 50%;
    width: min(120vmin, 1100px); height: min(120vmin, 1100px);
    margin: calc(min(120vmin, 1100px) / -2) 0 0 calc(min(120vmin, 1100px) / -2);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23c9b4ff'%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='.8'/%3E%3Ccircle cx='200' cy='200' r='184' stroke-width='.5' stroke-dasharray='2 6'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='.7'/%3E%3Ccircle cx='200' cy='200' r='96' stroke-width='.6'/%3E%3Cpath d='M200 50 L330 275 L70 275Z M200 350 L70 125 L330 125Z' stroke-width='.7'/%3E%3Cpath d='M200 4 V40 M200 360 V396 M4 200 H40 M360 200 H396' stroke-width='.8'/%3E%3Ccircle cx='200' cy='200' r='40' stroke-width='.6' stroke-dasharray='1 4'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.1;
    animation: xaSpin 160s linear infinite; }
.ape-xl[data-element="aether"] .xa-l2 {
    inset: -15%;
    background:
        radial-gradient(30% 24% at 30% 30%, rgba(160, 110, 255, 0.16) 0%, transparent 70%),
        radial-gradient(26% 20% at 74% 66%, rgba(255, 110, 210, 0.12) 0%, transparent 70%);
    animation: xaSway 20s ease-in-out infinite alternate; }

/* news: an elemental colour wheel in the middle (the motes circle it) + breathing auroras */
.ape-xl[data-element="news"] .xa-l1 {
    inset: auto; left: 50%; top: 50%;
    width: min(150vmax, 2200px); height: min(150vmax, 2200px);
    margin: calc(min(150vmax, 2200px) / -2) 0 0 calc(min(150vmax, 2200px) / -2);
    background: conic-gradient(from 0deg, rgba(255, 90, 31, 0.1), rgba(59, 130, 255, 0.1), rgba(73, 201, 90, 0.09), rgba(127, 220, 255, 0.1), rgba(169, 139, 255, 0.11), rgba(255, 90, 31, 0.1));
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 70%);
    animation: xaBreath 9s ease-in-out infinite; }   /* breathing only: spinning a layer this big cost a third of the frame rate */
.ape-xl[data-element="news"] .xa-l2 {
    inset: -15%;
    background:
        radial-gradient(26% 20% at 20% 30%, rgba(169, 139, 255, 0.12) 0%, transparent 70%),
        radial-gradient(24% 20% at 80% 75%, rgba(255, 120, 40, 0.1) 0%, transparent 70%),
        radial-gradient(24% 18% at 75% 20%, rgba(20, 217, 255, 0.1) 0%, transparent 70%);
    animation: xaSway 18s ease-in-out infinite alternate; }

@keyframes xaBreath { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes xaHeat { 0%, 100% { opacity: 0.75; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.08); } }
@keyframes xaSway { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(2%, -1.5%, 0) scale(1.06); } }
@keyframes xaRays { from { transform: rotate(-3deg) translateX(-2%); opacity: 0.75; } to { transform: rotate(3deg) translateX(2%); opacity: 1; } }
@keyframes xaDrift { from { transform: translate3d(-18%, 0, 0); } to { transform: translate3d(18%, 0, 0); } }
@keyframes xaSpin { to { transform: rotate(360deg); } }

/* ---------- the owner's blocks: element glass, no backdrop blur ---------- */
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-card,
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-link:not(.has-bg),
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-tabs {
    background:
        linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--xa-glow) 55%, transparent) 50%, transparent 94%) top / 100% 1px no-repeat,
        radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--xa-glow) 9%, transparent) 0%, transparent 70%),
        linear-gradient(160deg, var(--xa-card-a) 0%, var(--xa-card-b) 100%);
    border-color: var(--xa-line);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-card {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 40px color-mix(in srgb, var(--xa-glow) 6%, transparent); }
/* the BASC bar and the club footer keep their frame (apeframe1), on the element's dark glass */
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-bar,
body.ape:is(.ape-bg--xelementia, .ape-bg--agni, .ape-bg--akasha, .ape-bg--vayu, .ape-bg--bhumi, .ape-bg--apas) .ape-foot {
    background: var(--frame), var(--xa-card-b); -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
    .ape-xl * { animation: none !important; }
}