/* Entry loading screen + native page crossfade (shared/loader.js). Never blocks input.
   Only transform/opacity are animated (GPU-composited) and only local fonts are used, so nothing swaps or stalls. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
html.ld::before{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%,color-mix(in srgb,var(--pl-acc,#c3a066) 16%,transparent),transparent 70%),var(--pl-ground,#07070a)}
.poe-loader{--pl-p:.2;position:fixed;inset:0;z-index:2147483001;pointer-events:none;overflow:hidden;contain:strict;
  font-family:Georgia,"Times New Roman",Times,serif;color:var(--pl-hi)}
/* disco que cobre a tela: a íris é só um scale() */
.poe-loader .pl-disc{position:absolute;left:50%;top:46%;width:var(--pl-d,300vmax);height:var(--pl-d,300vmax);margin:calc(var(--pl-d,300vmax) / -2) 0 0 calc(var(--pl-d,300vmax) / -2);border-radius:50%;overflow:hidden;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pl-acc) 16%,var(--pl-ground)) 0,var(--pl-ground) 22%);
  transform:scale(1);will-change:transform;backface-visibility:hidden}
.poe-loader .pl-disc::before{content:"";position:absolute;left:50%;top:50%;width:100vmax;height:100vmax;margin:-50vmax 0 0 -50vmax;
  background:var(--pl-bg,none) center/cover no-repeat;opacity:.16;border-radius:50%}
.poe-loader .pl-disc::after{content:"";position:absolute;left:50%;top:50%;width:100vmax;height:100vmax;margin:-50vmax 0 0 -50vmax;
  background:radial-gradient(closest-side,transparent 25%,var(--pl-ground) 100%)}
.poe-loader .pl-stage{position:absolute;left:50%;top:46%;display:grid;justify-items:center;gap:clamp(6px,1.8vh,16px);width:min(92vw,640px);text-align:center;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .28s ease;will-change:opacity,transform}
.poe-loader.on .pl-stage{opacity:1}
.poe-loader .pl-medal{position:relative;width:clamp(96px,min(46vw,32vh),260px);aspect-ratio:1}
.poe-loader .pl-art{position:absolute;inset:16%;border-radius:50%;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pl-gold) 70%,transparent),0 0 46px -4px var(--pl-acc),inset 0 0 30px rgba(0,0,0,.6)}
.poe-loader .pl-art img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.poe-loader .pl-art img.ok{opacity:1}
.poe-loader .pl-glyph{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(40px,12vw,60px);color:var(--pl-hi)}
.poe-loader .pl-ring,.poe-loader .pl-spark{animation-delay:var(--pl-t,0s)!important;will-change:transform}
.poe-loader .pl-ring{position:absolute;inset:0;border-radius:50%}
.poe-loader .r1{border:1px solid color-mix(in srgb,var(--pl-gold) 55%,transparent);animation:plSpin 7s linear infinite}
.poe-loader .r2{inset:7%;border:2px dashed color-mix(in srgb,var(--pl-acc) 45%,transparent);animation:plSpin 11s linear infinite reverse}
.poe-loader .r3{inset:-6%;border:2px solid transparent;border-top-color:var(--pl-acc);border-right-color:color-mix(in srgb,var(--pl-acc) 35%,transparent);animation:plSpin 1.8s cubic-bezier(.45,.05,.55,.95) infinite}
.poe-loader .pl-spark{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:radial-gradient(circle,var(--pl-hi) 0 35%,color-mix(in srgb,var(--pl-acc) 60%,transparent) 36%,transparent 70%);transform-origin:50% 50%;animation:plOrbit 3.2s linear infinite}
.poe-loader .s2{animation-duration:4.6s;animation-direction:reverse;width:10px;height:10px;margin:-5px}
.poe-loader .s3{animation-duration:6s;width:8px;height:8px;margin:-4px;opacity:.8}
.poe-loader .pl-name{font-size:clamp(18px,min(5.4vw,6.5vh),40px);font-weight:700;font-variant:small-caps;letter-spacing:.07em;line-height:1.15;color:var(--pl-hi);
  text-shadow:0 0 18px color-mix(in srgb,var(--pl-acc) 55%,transparent)}
.poe-loader .pl-sub{font-size:clamp(10px,2.6vw,12px);font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--pl-hi) 70%,transparent)}
.poe-loader .pl-bar{width:clamp(140px,min(62vw,40vh),300px);height:2px;background:color-mix(in srgb,var(--pl-gold) 22%,transparent);border-radius:2px;overflow:hidden;margin-top:6px}
.poe-loader .pl-bar i{display:block;height:100%;transform-origin:left;transform:scaleX(var(--pl-p));background:linear-gradient(90deg,var(--pl-gold),var(--pl-hi),var(--pl-acc));
  transition:transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
/* revelar: disco encolhe até o centro, medalhão se dissolve */
.poe-loader.out .pl-disc{transform:scale(0);transition:transform .8s cubic-bezier(.7,0,.25,1)}
.poe-loader.out .pl-stage{opacity:0;transform:translate(-50%,-50%) scale(1.08);transition:opacity .35s ease,transform .5s ease-in}
@keyframes plSpin{to{transform:rotate(1turn)}}
@keyframes plOrbit{from{transform:rotate(0) translateX(clamp(52px,min(25vw,17vh),140px))}to{transform:rotate(1turn) translateX(clamp(52px,min(25vw,17vh),140px))}}
@media (prefers-reduced-motion:reduce){
  .poe-loader *{animation:none!important}
  .poe-loader.out{opacity:0;transition:opacity .2s ease}
  .poe-loader.out .pl-disc{transform:none;transition:none}
}
@media print{.poe-loader,html.ld::before{display:none}}
/* ---------- modo leve (html.lite, definido no <head> por loader.js): celular, tablet touch e aparelhos fracos.
   Blur de fundo e animações infinitas são redesenhados a cada frame de rolagem sobre o cenário: no celular isso derruba o FPS. */
html.lite body *,html.lite body *::before,html.lite body *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* No celular ficam as animações baratas (só transform/opacity: giro do medalhão, flutuar, entradas e feedback de toque) e saem as que repintam a tela toda:
   cenário com máscara em deriva, brilho/hue de texto, box-shadow pulsante, barras com gradiente animado e partículas. */
html.lite .scene .half,html.lite #poeScene .art,html.lite .fog,html.lite .skfx,html.lite .skfx *,html.lite .brand>span::after,html.lite h1 em,html.lite .totem .fillbar::after,html.lite .totem button.node.cur::before,html.lite .hrail .hf::after,html.lite .hrail button.cur::after,html.lite .kicker .dia,html.lite .hero-sigil .circle,html.lite .hero-sigil .totem{animation:none!important}
html.lite .skfx{display:none}
html.lite[data-build]{--glass:1}
html.lite #poeScene .art{will-change:auto}
html.lite #poeScene,html.lite .scene{transform:translateZ(0)}
html.lite #poeMotes,html.lite #motes,html.lite #embers{display:none}