/* Fișier CSS local: fără CDN-uri, inline CSS sau resurse externe. */
html, body { width: 100%; min-height: 100%; }
body { margin: 0; font-family: Arial, sans-serif; background: #071116; }
.hero { position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.hero__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.flash-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: calc(100% - 24px);
  text-align: center;
  font-size: clamp(25px, 5vw, 50px);
  font-weight: 700;
  color: #00eaff;
  opacity: 0;
  text-shadow: 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #00eaff, 0 0 80px #00eaff;
}
.flash-text.active { animation: lightning 2s ease; }
@keyframes lightning {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  10% { opacity: 1; }
  20% { opacity: .2; }
  30% { opacity: 1; }
  40% { opacity: .1; }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  70% { opacity: .3; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* Preferința OS-ului pentru reducerea mișcării dezactivează flash-ul repetat. */
@media (prefers-reduced-motion: reduce) {
  .flash-text, .flash-text.active { opacity: 1; animation: none; }
}