/* ABB Power — premium animated splash (official art + CSS FX, local assets only) */

:root {
  --abb-bg: #00050a;
  --abb-gold: #d4af37;
  --abb-gold-bright: #ffe9a8;
  --abb-blue: #00aeef;
  --abb-blue-glow: #00d4ff;
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--abb-bg);
  opacity: 0;
  animation: splash-fade-in 0.55s ease-out forwards;
  transition: opacity 0.5s ease-out;
  contain: strict;
}

#splash.splash-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@keyframes splash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.splash-viewport {
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

/* Canvas matches official portrait art (1080×1920) */
.splash-canvas {
  position: relative;
  width: min(100vw, 520px);
  max-height: 100%;
  aspect-ratio: 1080 / 1920;
  max-height: min(100dvh, calc(100vw * 1920 / 1080));
}

.splash-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ── Effect layer (GPU-friendly transforms/opacity only) ── */
.splash-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.splash-circuit {
  position: absolute;
  inset: -5%;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(0, 174, 239, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 174, 239, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 38%, black 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 38%, black 15%, transparent 72%);
  animation: splash-circuit-drift 20s linear infinite;
}

@keyframes splash-circuit-drift {
  to { transform: translate3d(-40px, -40px, 0); }
}

/* Side electric arcs */
.splash-arc {
  position: absolute;
  top: 18%;
  width: 32%;
  height: 42%;
  filter: blur(10px);
  opacity: 0;
  animation: splash-arc-pulse 2.4s ease-in-out infinite;
}

.splash-arc-l {
  left: 0;
  background: radial-gradient(ellipse at 100% 50%, rgba(0, 212, 255, 0.65) 0%, transparent 68%);
}

.splash-arc-r {
  right: 0;
  background: radial-gradient(ellipse at 0% 50%, rgba(0, 212, 255, 0.65) 0%, transparent 68%);
  animation-delay: 0.6s;
}

@keyframes splash-arc-pulse {
  0%, 100% { opacity: 0.35; transform: scaleX(0.92); }
  50% { opacity: 0.95; transform: scaleX(1); }
}

/* Center lightning bolt */
.splash-lightning {
  position: absolute;
  left: 50%;
  top: 12%;
  width: 3px;
  height: 28%;
  margin-left: -1.5px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 233, 168, 0.3) 20%,
    #fff6cc 45%,
    #f5d76e 55%,
    rgba(255, 233, 168, 0.2) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 16px rgba(255, 220, 120, 0.9),
    0 0 32px rgba(255, 200, 80, 0.5);
  transform-origin: center top;
  animation: splash-lightning-strike 2.8s ease-in-out infinite;
}

.splash-lightning-flash {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.55) 0%, transparent 70%);
  opacity: 0;
  animation: splash-flash 2.8s ease-in-out infinite;
}

@keyframes splash-lightning-strike {
  0%, 88%, 100% { transform: scaleY(0.15); opacity: 0.2; }
  8% { transform: scaleY(1); opacity: 1; }
  12% { transform: scaleY(0.85); opacity: 0.9; }
  16% { transform: scaleY(1); opacity: 1; }
}

@keyframes splash-flash {
  0%, 86%, 100% { opacity: 0; transform: scale(0.5); }
  10% { opacity: 0.85; transform: scale(1.2); }
  14% { opacity: 0.4; transform: scale(0.9); }
}

/* Ring energy pulse around logo zone */
.splash-ring-pulse {
  position: absolute;
  left: 50%;
  top: 24%;
  width: 42%;
  aspect-ratio: 1;
  margin-left: -21%;
  border-radius: 50%;
  border: 2px solid rgba(0, 174, 239, 0.35);
  box-shadow:
    0 0 20px rgba(0, 212, 255, 0.35),
    inset 0 0 24px rgba(0, 174, 239, 0.15);
  animation: splash-ring-breathe 2.2s ease-in-out infinite;
}

@keyframes splash-ring-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.5; }
  50% { transform: scale(1.04); opacity: 0.95; }
}

/* Metallic shine sweep across logo */
.splash-logo-shine {
  position: absolute;
  left: 22%;
  top: 26%;
  width: 56%;
  height: 12%;
  overflow: hidden;
  border-radius: 8px;
  mask-image: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
}

.splash-logo-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0.15) 60%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: splash-shine-sweep 2.5s ease-in-out 0.4s infinite;
}

@keyframes splash-shine-sweep {
  0% { transform: translateX(-120%); }
  45%, 100% { transform: translateX(180%); }
}

/* Pedestal blue pulse */
.splash-pedestal-pulse {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 36%;
  height: 6%;
  margin-left: -18%;
  background: radial-gradient(ellipse, rgba(0, 174, 239, 0.55) 0%, transparent 72%);
  filter: blur(6px);
  animation: splash-pedestal-glow 1.8s ease-in-out infinite;
}

@keyframes splash-pedestal-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Electric sparks */
.splash-sparks i {
  position: absolute;
  width: 2px;
  height: 12px;
  background: linear-gradient(180deg, var(--abb-blue-glow), transparent);
  border-radius: 2px;
  opacity: 0;
  animation: splash-spark 1.6s ease-out infinite;
}

.splash-sparks i:nth-child(1) { left: 28%; top: 30%; animation-delay: 0s; transform: rotate(-25deg); }
.splash-sparks i:nth-child(2) { right: 26%; top: 32%; animation-delay: 0.4s; transform: rotate(20deg); }
.splash-sparks i:nth-child(3) { left: 34%; top: 38%; animation-delay: 0.9s; transform: rotate(-12deg); }
.splash-sparks i:nth-child(4) { right: 32%; top: 36%; animation-delay: 1.3s; transform: rotate(15deg); }

@keyframes splash-spark {
  0% { opacity: 0; transform: scaleY(0.2); }
  15% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0.1) translateY(8px); }
}

/* Floating gold/blue particles */
.splash-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--abb-gold-bright);
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.8);
  animation: splash-particle-float linear infinite;
}

.splash-particles span:nth-child(odd) {
  background: var(--abb-blue-glow);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.8);
}

.splash-particles span:nth-child(1) { left: 15%; bottom: 28%; animation-duration: 3.4s; }
.splash-particles span:nth-child(2) { left: 82%; bottom: 32%; animation-duration: 2.9s; animation-delay: 0.3s; }
.splash-particles span:nth-child(3) { left: 22%; bottom: 45%; animation-duration: 3.8s; animation-delay: 0.7s; }
.splash-particles span:nth-child(4) { left: 70%; bottom: 22%; animation-duration: 2.6s; animation-delay: 0.2s; }
.splash-particles span:nth-child(5) { left: 48%; bottom: 38%; animation-duration: 4.2s; animation-delay: 1s; }
.splash-particles span:nth-child(6) { left: 88%; bottom: 48%; animation-duration: 3.1s; animation-delay: 0.5s; }
.splash-particles span:nth-child(7) { left: 10%; bottom: 55%; animation-duration: 3.6s; animation-delay: 0.8s; }
.splash-particles span:nth-child(8) { left: 58%; bottom: 25%; animation-duration: 2.8s; animation-delay: 0.4s; }

@keyframes splash-particle-float {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  8% { opacity: 0.9; }
  100% { transform: translateY(-90px) scale(0.25); opacity: 0; }
}

/* ── Live loading panel (covers static bar in PNG) ── */
.splash-load-panel {
  position: absolute;
  left: 50%;
  bottom: 17.5%;
  transform: translateX(-50%);
  width: 72%;
  text-align: center;
  z-index: 4;
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  padding: 10px 8px 6px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(0, 5, 10, 0.72) 0%,
    rgba(0, 5, 10, 0.88) 100%
  );
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.splash-load-title {
  margin: 0 0 4px;
  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 174, 239, 0.35);
}

.splash-load-sub {
  margin: 0 0 10px;
  font-size: clamp(0.72rem, 2.8vw, 0.85rem);
  color: rgba(200, 230, 255, 0.9);
  min-height: 1.2em;
  transition: opacity 0.25s ease;
}

.splash-bar-track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.45);
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.splash-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a7020 0%, #f5d76e 35%, #fff8dc 52%, #f5d76e 70%, #c9a227 100%);
  box-shadow: 0 0 14px rgba(255, 220, 120, 0.65);
  transition: width 0.06s linear;
}

.splash-bar-spark {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 18px rgba(255, 220, 120, 0.9);
}

.splash-bar-pct {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: rgba(220, 235, 255, 0.95);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
  .splash-load-panel {
    width: 78%;
    bottom: 16%;
  }
}

@media (max-height: 640px) {
  .splash-canvas {
    max-height: 96dvh;
  }
  .splash-load-panel {
    bottom: 14%;
  }
}

@media (min-width: 768px) {
  .splash-canvas {
    width: min(420px, 90vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash,
  #splash * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .splash-bar-fill {
    width: 100% !important;
  }
}