/* ==========================================================
   HERO
========================================================== */

.hero {
  position: relative;

  height: 100vh;

  min-height: 850px;

  display: flex;

  align-items: center;

  overflow: visible;
}

/* ==========================================================
   BACKGROUND
========================================================== */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  background: url("../img/hero/hero.webp") center center / cover no-repeat;

  transform: scale(1.05);

  animation: heroZoom 18s ease-in-out infinite alternate;

  will-change: transform;
}

.hero::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 28% 35%,
      rgba(20, 58, 90, 0.28) 0%,
      rgba(20, 58, 90, 0) 35%
    ),
    linear-gradient(
      90deg,
      rgba(15, 40, 65, 0.82) 0%,
      rgba(20, 58, 90, 0.58) 35%,
      rgba(20, 58, 90, 0.22) 70%,
      rgba(20, 58, 90, 0.05) 100%
    );
}

/* ==========================================================
CONTENT
========================================================== */

.hero-content {
  position: relative;

  z-index: 2;

  color: white;

  max-width: 760px;

  opacity: 0;
  transform: translateY(40px);

  animation: heroContent 1s ease forwards;
  animation-delay: 0.4s;

  padding-top: 20px;
}

.hero-content h1 {
  color: white;

  margin-bottom: 32px;

  max-width: 650px;

  letter-spacing: -0.04em;

  text-wrap: balance;

  text-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);

  font-weight: 800;
}

.hero-content p {
  max-width: 620px;

  font-size: 1.32rem;

  line-height: 1.75;

  color: #ffffff;

  font-weight: 500;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

  margin-bottom: 52px;
}

.hero-buttons {
  display: flex;

  gap: 18px;

  flex-wrap: wrap;

  opacity: 0;

  animation: fadeButtons 0.8s ease forwards;

  animation-delay: 1.1s;
}

@keyframes fadeButtons {
  from {
    opacity: 0;

    transform: translateY(20px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* ==========================================================
SCROLL
========================================================== */

.scroll-down {
  position: absolute;

  left: 50%;

  bottom: 35px;

  transform: translateX(-50%);

  z-index: 3;

  color: white;

  font-size: 2rem;

  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translate(-50%, 0);
  }

  40% {
    transform: translate(-50%, -12px);
  }

  60% {
    transform: translate(-50%, -6px);
  }
}

/* ==========================================================
RESPONSIVE
========================================================== */

@media (max-width: 768px) {
  .hero {
    min-height: 700px;
  }

  .hero-content {
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-stats {
    width: 92%;

    padding: 20px;

    flex-direction: column;

    gap: 18px;

    border-radius: 20px 20px 0 0;
  }

  .hero-stat .number {
    font-size: 1.8rem;
  }
}

/* ==========================================================
   HERO ZOOM
========================================================== */

@keyframes heroZoom {
  from {
    transform: scale(1.05);
  }

  to {
    transform: scale(1.15);
  }
}

/* ==========================================================
   HERO CONTENT
========================================================== */

@keyframes heroContent {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   HERO TOP
========================================================== */

.hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  width: fit-content;
}

/* ---------- Badge comune ---------- */

.hero-top .section-tag,
.hero-top .hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 46px;

  padding: 0 22px;

  margin: 0;

  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  line-height: 1;

  box-sizing: border-box;
}

/* ---------- Badge ALA ---------- */

.hero-top .section-tag {
  background: #d6007f;

  color: #ffffff;

  box-shadow: 0 8px 20px rgba(214, 0, 127, 0.28);
}

/* ---------- Badge DAL 1982 ---------- */

.hero-top .hero-badge {
  background: rgba(255, 255, 255, 0.18);

  border: 1px solid rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  color: #d6007f;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ==========================================================
   HERO STATS
========================================================== */