/* ============================================================
   National Energy — Simple Splash (clean white + nice logo anim)
   Plain white background, just the logo with a smooth, elegant
   entrance: fades + scales up, a soft sheen sweeps across it,
   then a gentle settle. Quick (~1.4s). GPU-friendly.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  will-change: opacity;
  transition: opacity .45s ease;
}

.intro__logo-wrap {
  position: relative;
  display: inline-block;
  /* nice entrance: rise + scale in, then a soft breathing settle */
  animation:
    logo-in .9s cubic-bezier(.16,.84,.3,1) forwards,
    logo-float 3s ease-in-out 1s infinite;
  opacity: 0;
  transform: translateY(14px) scale(.9);
}
@keyframes logo-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.01); }
}

.intro__logo {
  display: block;
  width: min(180px, 48vw);
  height: auto;
}

/* a soft light "sheen" sweeps across the logo once */
.intro__logo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
      transparent 30%,
      rgba(255,255,255,.85) 48%,
      transparent 66%);
  transform: translateX(-130%);
  animation: logo-sheen 1.1s ease-out .55s forwards;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes logo-sheen {
  to { transform: translateX(130%); }
}

/* JS adds this to fade the whole splash out, then removes the node */
.intro.is-done { opacity: 0; pointer-events: none; }

/* lock scroll only while the splash is up */
body.intro-active { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .intro__logo-wrap { animation: none; opacity: 1; transform: none; }
  .intro__logo-wrap::after { display: none; }
}