/* Boss camera stage (boss-camera.js): region 4 boss fight on desktop, staged in the 4K painting's own coordinates.
   --pw/--ph/--pl/--pt: the painting's cover frame in the arena box. Feet on the painting's duel floor (1720/2160).
   Hero 304/2160 of the painting (ink), the dragon ~760 px at 1080p, Teresa the hero's size, side by side under the arch. */
#battlefield.paint-stage{--arena-lift:0%;--fy:.7963;--stage-hero-x:.2275}
#battlefield.paint-stage[data-stage-hero=duel]{--stage-hero-x:.375}
/* the hero walks only for the last transformation's framing; the duel itself starts under the sun flash (a cut) */
#appFrame #battlefield.paint-stage[data-stage-cut] .combat-hero{transition:none!important}
/* 4K paintings once decoded (.k4, boss-camera.js); before that, and on small windows and phones, the 1920 versions */
#battlefield.paint-stage.k4.zone-4.boss-fight{--landscape:url('assets/backgrounds/4k/fendas-infernais-boss.webp?v=1')}
#battlefield.paint-stage.k4.zone-4.boss-fight:is([data-eclipse=fallen],[data-eclipse=sun],[data-eclipse=solar],[data-eclipse=melt],[data-eclipse=shell],[data-eclipse=kneel]){--landscape:url('assets/backgrounds/4k/fendas-infernais-boss-dragao-caido.webp?v=1')}
#battlefield.paint-stage.k4.zone-4.boss-fight:is([data-eclipse=pool],[data-eclipse=absorb],[data-eclipse=gilded],[data-eclipse=santa]){--landscape:url('assets/backgrounds/4k/fendas-infernais-boss-teresa.webp?v=1')}
#battlefield.paint-stage.k4.zone-4.boss-fight:is([data-eclipse=shed],[data-eclipse=crack],[data-eclipse=raise],[data-eclipse=point],[data-eclipse=teresa]){--landscape:url('assets/backgrounds/4k/fendas-infernais-boss-teresa-humana.webp?v=1')}

/* camera: translate + scale from the box's top-left corner, the same move on the arena and on the full-bleed painting */
#battlefield.paint-stage #battleView,#appFrame .arena-backdrop.paint-stage-backdrop{transform-origin:0 0;transition:translate var(--cam-ms,0ms) cubic-bezier(.45,.05,.3,1),scale var(--cam-ms,0ms) cubic-bezier(.45,.05,.3,1)}
#battlefield.paint-stage #battleView{will-change:translate,scale}

/* actors in painting coordinates */
#appFrame #battlefield.paint-stage .combat-hero{--sh:calc(var(--ph) * .1469);height:var(--sh)!important;max-height:none!important;width:calc(var(--sh) * 1.15)!important;
 left:calc(var(--pl) + var(--pw) * var(--stage-hero-x) - var(--sh) * .575)!important;top:auto!important;
 bottom:calc(100% - var(--pt) - var(--ph) * var(--fy) - var(--sh) * .021)!important;transition:left 3.2s cubic-bezier(.45,.05,.3,1)}
/* the dragon standing: ~4.7x the hero (wing tips stay inside the arena box, below the top bar) */
#appFrame #battlefield.paint-stage .attack-target{--bh:calc(var(--ph) * .682);height:var(--bh)!important;max-height:none!important;width:calc(var(--bh) * 1.4891)!important;
 left:calc(var(--pl) + var(--pw) * .70 - var(--bh) * .7446)!important;right:auto!important;top:auto!important;
 bottom:calc(100% - var(--pt) - var(--ph) * var(--fy) - var(--bh) * .016 - var(--ph) * .022)!important}
/* transformation canvases (2054x483: the fallen dragon, then Teresa at the centre). While the dragon falls and melts
   he stays big (a little smaller than standing) and his pool of gold runs to the hero's feet; once Teresa has drunk the
   pool (sun flash) she stands as tall as the hero, her feet on the duel floor, centred at 63.5% of the painting */
#appFrame #battlefield.paint-stage[data-stage-cast=giant] .attack-target{--bh:calc(var(--ph) * .444);width:calc(var(--bh) * 4.2526)!important;
 left:calc(var(--pl) + var(--pw) * .64 - var(--bh) * 2.1263)!important;bottom:calc(100% - var(--pt) - var(--ph) * var(--fy) - var(--bh) * .01)!important;height:var(--bh)!important}
#appFrame #battlefield.paint-stage[data-stage-cast=duel] .attack-target{--bh:calc(var(--ph) * .302);width:calc(var(--bh) * 4.2526)!important;
 left:calc(var(--pl) + var(--pw) * .635 - var(--bh) * 2.1263)!important;bottom:calc(100% - var(--pt) - var(--ph) * var(--fy) - var(--bh) * .11)!important}

/* the green arena (Santa at half health): a crossfade over her arena, in the scenery and in the full-bleed painting */
.stage-bloom{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 3s ease-in-out;display:none}
#battlefield.paint-stage .stage-bloom,#appFrame .arena-backdrop.paint-stage-backdrop>.stage-bloom--outer{display:block}
.arena-backdrop>.stage-bloom--outer{background-size:var(--bk-size,cover);background-position:var(--bk-pos,center)}
#battlefield.paint-stage.is-bloomed .stage-bloom{opacity:1}
html:has(#battlefield.paint-stage.is-bloomed) #appFrame .arena-backdrop>.stage-bloom--outer{opacity:1}

/* sun: rays from the sun behind the arch, golden motes in the light, a warm bounce on the duel floor */
.stage-sun{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;display:none;--sun-power:0;--sun:255 206 140;will-change:transform}
#battlefield.paint-stage .stage-sun,#appFrame .arena-backdrop.paint-stage-backdrop>.stage-sun--outer{display:block}
.stage-sun-frame{position:absolute;left:var(--pl);top:var(--pt);width:var(--pw);height:var(--ph)}
/* on the full-bleed painting: the painting's frame in the backdrop (arena-light.js), below its shades */
.arena-backdrop>.stage-sun--outer{z-index:0}
.arena-backdrop>.stage-sun--outer>.stage-sun-frame{left:var(--bk-x,0);top:var(--bk-y,0);width:var(--bk-w,100%);height:var(--bk-h,100%)}
.stage-sun-frame>i{position:absolute;display:block}
.stage-sun-core{left:65%;top:6.5%;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
 background:radial-gradient(circle,rgb(var(--sun) / calc(var(--sun-power) * .55)) 0,rgb(var(--sun) / calc(var(--sun-power) * .22)) 30%,rgb(var(--sun) / 0) 70%)}
.stage-sun-rays{left:65%;top:6.5%;width:0;height:0}
.stage-sun-rays>b{position:absolute;left:0;top:0;width:var(--w,9vw);height:var(--len,120vh);translate:-50% 0;transform-origin:50% 0;rotate:var(--a);
 /* one soft elliptical gradient per ray (no mask, no animation: static, cheap to raster) */
 background:radial-gradient(50% 100% at 50% 0%,rgb(var(--sun) / calc(var(--sun-power) * var(--o,.2))) 0,rgb(var(--sun) / calc(var(--sun-power) * var(--o,.2) * .5)) 40%,rgb(var(--sun) / 0) 100%)}
.stage-sun-rays>b:nth-child(1){--a:28deg;--w:7vw;--o:.24;--d:-1s}
.stage-sun-rays>b:nth-child(2){--a:38deg;--w:11vw;--o:.32;--d:-3s}
.stage-sun-rays>b:nth-child(3){--a:47deg;--w:8vw;--o:.27;--d:-5s}
.stage-sun-rays>b:nth-child(4){--a:57deg;--w:12vw;--o:.22;--d:-2s}
.stage-sun-rays>b:nth-child(5){--a:68deg;--w:6vw;--o:.18;--d:-4s}
.stage-sun-bounce{left:12%;right:12%;top:71%;height:20%;background:radial-gradient(50% 50% at 50% 50%,rgb(var(--sun) / calc(var(--sun-power) * .2)) 0,rgb(var(--sun) / calc(var(--sun-power) * .08)) 55%,rgb(var(--sun) / 0) 100%)}
.stage-sun-motes{left:22%;right:22%;top:30%;bottom:16%;opacity:min(1,calc(var(--sun-power) * .9))}
.stage-sun-motes>b{position:absolute;width:.32vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgb(255 244 210 / .95) 0 30%,rgb(var(--sun) / .5) 55%,rgb(var(--sun) / 0) 75%);
 opacity:0;animation:stage-mote var(--t,9s) linear infinite;animation-delay:var(--d,0s)}
/* plain numbers and a transform only: the motes run on the compositor (their strength is the parent's opacity) */
@keyframes stage-mote{0%{transform:translate(0,0);opacity:0}15%{opacity:1}80%{opacity:.8}100%{transform:translate(var(--dx,3vw),-14vh);opacity:0}}
.stage-sun-motes>b:nth-child(1){left:4%;top:80%;--t:9s;--d:-1s;--dx:2vw}
.stage-sun-motes>b:nth-child(2){left:12%;top:55%;--t:11s;--d:-6s;--dx:-1.5vw}
.stage-sun-motes>b:nth-child(3){left:19%;top:92%;--t:8s;--d:-3s;--dx:3vw}
.stage-sun-motes>b:nth-child(4){left:27%;top:68%;--t:12s;--d:-9s;--dx:1vw}
.stage-sun-motes>b:nth-child(5){left:33%;top:40%;--t:10s;--d:-2s;--dx:-2vw}
.stage-sun-motes>b:nth-child(6){left:39%;top:86%;--t:9.5s;--d:-7s;--dx:2.5vw}
.stage-sun-motes>b:nth-child(7){left:45%;top:60%;--t:13s;--d:-4s;--dx:-1vw}
.stage-sun-motes>b:nth-child(8){left:50%;top:30%;--t:11s;--d:-10s;--dx:1.5vw}
.stage-sun-motes>b:nth-child(9){left:56%;top:76%;--t:8.5s;--d:-5s;--dx:-2.5vw}
.stage-sun-motes>b:nth-child(10){left:62%;top:48%;--t:12s;--d:-1.5s;--dx:2vw}
/* strength through the fight: the dragon's eclipse (red, embers), the eclipse opening, the Santa, the green arena,
   Teresa, and Teresa past half health: the sun keeps growing */
[data-sun=dragon] .stage-sun{--sun:255 96 52;--sun-power:.45}
[data-sun=fallen] .stage-sun{--sun:255 178 104;--sun-power:.55}
[data-sun=santa] .stage-sun{--sun:255 206 140;--sun-power:.7}
[data-sun=bloom] .stage-sun{--sun:255 210 146;--sun-power:.88}
[data-sun=teresa] .stage-sun{--sun:255 222 168;--sun-power:1}
[data-sun=teresa-half] .stage-sun{--sun:255 226 176;--sun-power:1.25}
/* the strength steps with the fight's stages (no custom-property transition: it would repaint every gradient per frame) */
/* golden rim light on the actors in the sun (hero-refined.css reads --scene-light) and long shadows towards the camera */
#battlefield.paint-stage:not([data-eclipse=""]):is([data-eclipse]){--scene-light:224 178 112}
@media(prefers-reduced-motion:reduce){.stage-sun-motes{display:none!important}}
html.hw-lite .stage-sun-motes{display:none!important}
/* the sun flash when Teresa has drunk the whole pool: the screen turns to sunlight for an instant */
.stage-flash{position:absolute;inset:0;z-index:60;pointer-events:none;opacity:0;
 background:radial-gradient(60% 70% at 62% 42%,#fffdf4 0,#fff1c4 35%,#ffd57a 70%,#e9a845 100%)}
.stage-flash[hidden]{display:none}
/* contact shadows (round4.js, fitted on the feet): as dark under Teresa as under the hero, so both stand on the floor */
#appFrame #battlefield.paint-stage .hero-ground-shadow[data-contact=fitted]{opacity:.85!important}
#appFrame #battlefield.paint-stage[data-stage-cast=duel] .mob-shadow[data-contact=fitted]{opacity:.85!important}
/* small windows and phones (no camera stage): the Santa's arena turns green at half health too, as a plain swap */
#battlefield.zone-4.boss-fight[data-eclipse=santa][data-boss-half]:not(.paint-stage):not(.boss-transforming){--landscape:url('assets/backgrounds/fast/fendas-infernais-boss-teresa-florescendo.webp?v=1')}
@media(max-width:760px),(max-height:600px){#battlefield.zone-4.boss-fight[data-eclipse=santa][data-boss-half]:not(.paint-stage):not(.boss-transforming){--landscape:url('assets/backgrounds/fast/fendas-infernais-boss-teresa-florescendo-mobile.webp?v=1')}}
/* the copy on the full-bleed painting carries only the sun and its rays (the motes and the floor bounce are in the arena) */
.arena-backdrop>.stage-sun--outer :is(.stage-sun-motes,.stage-sun-bounce){display:none}
/* Teresa's sun halo behind her back (not at her feet): in the stage the target box is exactly the 2054x483 canvas,
   where her feet are at 11% and her head at ~58% of its height, so the halo is centred on her upper back */
#appFrame #battlefield.paint-stage[data-stage-cast=duel] .solar-halo{--teresa-chest:43%;height:50%;left:51.2%}
#appFrame #battlefield.paint-stage[data-stage-cast=duel] .solar-embers{bottom:11%;height:42%}
/* the standing dragon's ground shadow (sprite coordinates of dragao-das-fendas.webp: the target box is the sprite) */
.stage-dragon-shadow{display:none;position:absolute;pointer-events:none;user-select:none;z-index:0;left:-26.596%;top:75.248%;width:132.979%;height:32.871%;max-width:none}
#battlefield.paint-stage:not([data-eclipse]) .stage-dragon-shadow{display:block}
#appFrame #battlefield.paint-stage:not([data-eclipse]) .mob-shadow{display:none!important}
/* the full-bleed painting moves with the camera: its translate/scale transitions must survive visual-fx's opacity-only
   transition (higher specificity there), or it jumps between shots while the arena glides (a seam under the arena) */
#appFrame #arenaBackdrop.paint-stage-backdrop{transition:opacity .45s ease,translate var(--cam-ms,0ms) cubic-bezier(.45,.05,.3,1),scale var(--cam-ms,0ms) cubic-bezier(.45,.05,.3,1)}
/* boss presentations and transformations (cinema mode) keep the painting outside the arena: the camera never shows a cut edge */
#appFrame.vfx-cinema #arenaBackdrop.paint-stage-backdrop{opacity:1!important}