/* ============================================
   TWO4DELIVERY - Hero Background Animat CSS
   (înlocuiește imaginea hero-bg.jpg)
============================================ */

.hero {
  background: var(--black-soft);
}

.hero__bg-image {
  display: none; /* nu mai avem nevoie de poza */
}

/* Gradient animat de fundal */
.hero__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #0f0f1e 0%,
    #1a1a2e 25%,
    #1d3a6e 55%,
    #2563eb 80%,
    #1d4ed8 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Grilă de linii în perspectivă (efect futurist) */
.hero__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
  transform: perspective(500px) rotateX(20deg) scaleY(1.4);
  transform-origin: bottom center;
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

/* Lumini de ambient */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 60%, rgba(37, 99, 235, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 30%, rgba(59, 130, 246, 0.2) 0%, transparent 60%),
    radial-gradient(ellipse 30% 50% at 50% 100%, rgba(29, 78, 216, 0.3) 0%, transparent 60%);
  pointer-events: none;
}

/* Siluetă skyline în partea de jos */
.hero__skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero__skyline svg {
  width: 100%;
  height: 100%;
  fill: rgba(0, 0, 0, 0.35);
}