/* Portada: geometría 1942 × 809 del SVG, con fotografías 4K / 6K.
   El fondo y los efectos SVG comparten el mismo plano.
   Al rotar o redimensionar cambia el recorte, nunca la posición relativa de los rayos. */
.portal-body .portal-scene{isolation:isolate;background:#060611}
.portal-body .portal-scene::before{display:none}
/* Un único lienzo 2.40049:1 para la fotografía y el SVG. El propio lienzo hace cover. */
.portal-body .portal-artwork{
  position:absolute;left:50%;top:50%;width:max(100%,240.04944svh);
  aspect-ratio:1942/809;transform:translate(-50%,-50%);
  z-index:1;overflow:visible;
}
.portal-body .portal-backdrop{
  position:absolute;inset:0;z-index:1;
  background-image:url('../assets/portal-ciudad-4k.webp');
  background-size:100% 100%;background-repeat:no-repeat;background-position:center;
  transform:none;animation:none;will-change:auto;
  /* Colores originales: sin filtros de contraste, saturación ni desenfoque. */
  filter:none;
}

.portal-fx{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;overflow:visible}
.portal-body .portal-colorwash{display:none}
.portal-body .portal-grain,.portal-body .portal-vignette{display:none}

/* Haz central vectorial: tres capas para núcleo, cuerpo y halo. Sin elipses ni paquetes ovalados. */
.beam-system{transform-origin:971px 545px;animation:beamBreathe 5.6s ease-in-out infinite}
.beam-halo{opacity:.39}.beam-mid{opacity:.51}.beam-core{opacity:.55;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px #ad8aff)}

/* Relámpagos multicapa: halo difuso + cuerpo violeta + núcleo blanco. */
.lightning{opacity:0;transform-box:fill-box;transform-origin:center}
.lightning path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bolt-glow{stroke:#8d62ff;stroke-width:11;opacity:.33;filter:url(#boltHalo)}
.bolt-mid{stroke:#b78cff;stroke-width:3.1;opacity:.82;filter:drop-shadow(0 0 5px #8d62ff)}
.bolt-core{stroke:#fff;stroke-width:1.18;opacity:.97;filter:drop-shadow(0 0 2px #fff)}
.bolt-mid path:not(.trunk){stroke-width:2}.bolt-core path:not(.trunk){stroke-width:.82}.bolt-glow path:not(.trunk){stroke-width:6.5}
.bolt-a{animation:flashA 12s linear infinite}.bolt-b{animation:flashB 12s linear infinite}.bolt-c{animation:flashC 12s linear infinite}.bolt-d{animation:flashD 12s linear infinite}.bolt-e{animation:flashE 12s linear infinite}

@keyframes beamBreathe{0%,100%{opacity:.72}50%{opacity:1}}
/* doble/triple parpadeo corto para simular descargas reales, no una línea sostenida */
@keyframes flashA{0%,14.8%,15.15%,15.55%,16.1%,100%{opacity:0}14.9%{opacity:.38}15.02%{opacity:1}15.28%{opacity:.22}15.42%{opacity:.86}15.73%{opacity:.16}15.9%{opacity:.72}}
@keyframes flashB{0%,38.0%,38.3%,38.72%,39.1%,100%{opacity:0}38.08%{opacity:.44}38.18%{opacity:.95}38.43%{opacity:.18}38.57%{opacity:.8}38.87%{opacity:.32}}
@keyframes flashC{0%,60.7%,61.0%,61.4%,61.9%,100%{opacity:0}60.78%{opacity:.32}60.9%{opacity:1}61.15%{opacity:.2}61.27%{opacity:.86}61.61%{opacity:.28}}
@keyframes flashD{0%,76.5%,76.82%,77.2%,77.68%,100%{opacity:0}76.58%{opacity:.48}76.72%{opacity:.96}76.98%{opacity:.18}77.08%{opacity:.82}77.42%{opacity:.24}}
@keyframes flashE{0%,89.0%,89.34%,89.7%,90.15%,100%{opacity:0}89.08%{opacity:.34}89.2%{opacity:.88}89.48%{opacity:.18}89.61%{opacity:.72}89.92%{opacity:.25}}


/* Flujo descendente dentro del haz: trazos discontinuos que caen continuamente. */
.beam-flow{mix-blend-mode:screen;opacity:.92}
.beam-stream{fill:none;stroke:#fff;stroke-linecap:round;stroke-width:1.05;stroke-dasharray:2 16;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #9f79ff);animation:beamFall .82s linear infinite}
.stream-1,.stream-7{opacity:.38;animation-duration:1.15s}.stream-2,.stream-6{opacity:.55;animation-duration:.94s}.stream-3,.stream-5{opacity:.72;animation-duration:.78s}.stream-4{opacity:.92;stroke-width:1.35;animation-duration:.66s}

/* Microdescargas que nacen constantemente en los contornos del haz. */
.beam-micro-arcs,.beam-impact-arcs{mix-blend-mode:screen}
.beam-arc{fill:none;stroke:#f7f1ff;stroke-width:var(--w);stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #a879ff);animation:beamArc var(--d) var(--delay) linear infinite}
.beam-arc.branch{stroke:#cdb5ff;filter:drop-shadow(0 0 4px #9b70ff)}
.impact-arc{fill:none;stroke:#efe7ff;stroke-width:.8;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #a879ff);animation:impactArc var(--d) var(--delay) linear infinite}

@keyframes beamFall{from{stroke-dashoffset:0}to{stroke-dashoffset:-72}}
@keyframes beamArc{0%,70%,100%{opacity:0}72%{opacity:.28}74%{opacity:.95}76%{opacity:.16}78%{opacity:.78}81%{opacity:0}}
@keyframes impactArc{0%,61%,100%{opacity:0}63%{opacity:.7}66%{opacity:.18}68%{opacity:.9}72%{opacity:0}}

/* No desplazar individualmente el SVG o la imagen según el aspecto: ambos comparten coordenadas. */
@media(prefers-reduced-motion:reduce){.lightning,.beam-arc,.beam-stream,.impact-arc{animation:none!important;opacity:0!important}.beam-system,.portal-fx{opacity:.55}}

/* Pantallas verticales y tablets: misma geometría, destellos menos invasivos. */
@media(max-width:1024px){
  .portal-body .portal-backdrop{filter:none}
  .portal-fx{opacity:.76}
  .beam-halo{opacity:.31}.beam-mid{opacity:.41}.beam-core{opacity:.38}
  .beam-flow{opacity:.68}
  .beam-micro-arcs{opacity:.77}
}
@media(max-width:600px){
  .portal-body .portal-backdrop{filter:none}
  .portal-fx{opacity:.67}
  .beam-halo{opacity:.26}.beam-mid{opacity:.35}.beam-core{opacity:.31}
  .beam-flow{opacity:.56}
  .beam-micro-arcs{opacity:.68}
}
/* En movimiento reducido se mantiene la imagen quieta, sin desplazamiento del haz. */
@media(prefers-reduced-motion:reduce){.portal-body .portal-artwork{transition:none}}

/* En móviles y tabletas Retina, se carga la versión de 6144 píxeles.
   Misma proporción y encuadre: los rayos SVG no se desalinean. */
@media(max-width:1200px), (min-resolution:2dppx){
  .portal-body .portal-backdrop{background-image:url('../assets/portal-ciudad-6k.webp')}
}