/* ============================================================
   HERO.CSS — Seção Hero com imagem de fundo (ou gradiente fallback)
   ============================================================ */

/* ── Hero Container ───────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(460px, 74vh, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--sp-10) var(--sp-12);
  padding-inline: var(--container-pad);
}

/* ── Fundo: gradiente oceânico + foto quando disponível ───── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);

  /* Gradiente fallback — litoral baiano ao entardecer
     Funciona de forma independente, sem necessitar de foto. */
  background:
    radial-gradient(ellipse at 72% 18%, rgba(255, 200, 80, 0.22) 0%, transparent 48%),
    radial-gradient(ellipse at 28% 65%, rgba(0, 180, 216, 0.20) 0%, transparent 52%),
    linear-gradient(
      162deg,
      #001e3c 0%,
      #00356b 22%,
      #005f8a 45%,
      #006994 62%,
      #004060 80%,
      #001a30 100%
    );
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* A foto cobre o gradiente quando carregada.
     Se falhar, o gradiente fica exposto naturalmente. */
}

/* Overlay — translúcido para funcionar com foto e com gradiente */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 20, 50, 0.28) 0%,
    rgba(0, 30, 65, 0.22) 40%,
    rgba(0, 10, 30, 0.50) 100%
  );
  z-index: var(--z-base);
}

/* Gradiente inferior suave para transição */
.hero__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-bg)
  );
  z-index: var(--z-raised);
}

/* ── Bokeh decorativo (visível sem foto, discret com foto) ── */
.hero__decor {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  overflow: hidden;
}

.hero__bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: bubbleFloat linear infinite;
  will-change: transform, opacity;
}

.hero__bubble:nth-child(1)  { width: 160px; height: 160px; left:  8%; bottom: -80px;  animation-duration: 18s; animation-delay:  0s; }
.hero__bubble:nth-child(2)  { width:  90px; height:  90px; left: 22%; bottom: -45px;  animation-duration: 14s; animation-delay: -4s; }
.hero__bubble:nth-child(3)  { width: 220px; height: 220px; left: 55%; bottom: -110px; animation-duration: 22s; animation-delay: -8s; }
.hero__bubble:nth-child(4)  { width:  70px; height:  70px; left: 75%; bottom: -35px;  animation-duration: 16s; animation-delay: -2s; }
.hero__bubble:nth-child(5)  { width: 120px; height: 120px; left: 88%; bottom: -60px;  animation-duration: 20s; animation-delay: -6s; }
.hero__bubble:nth-child(6)  { width:  50px; height:  50px; left: 40%; bottom: -25px;  animation-duration: 13s; animation-delay: -10s; }
.hero__bubble:nth-child(7)  { width: 180px; height: 180px; left: -4%; bottom: -90px;  animation-duration: 25s; animation-delay: -14s; }

@keyframes bubbleFloat {
  0%   { transform: translateY(0)   scale(1);    opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

/* ── Conteúdo do Hero ─────────────────────────────────────── */
.hero__content {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 780px;
  gap: var(--sp-6);
}

/* ── Logo ─────────────────────────────────────────────────── */
.hero__logo {
  width: clamp(56px, 10vw, 84px);
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  animation: heroFadeDown var(--duration-slower) var(--ease-out) both;
}

/* ── Título ───────────────────────────────────────────────── */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  animation: heroFadeDown var(--duration-slower) var(--ease-out) 100ms both;
}

.hero__title-accent {
  color: var(--color-sky);
}

/* ── Slogan ───────────────────────────────────────────────── */
.hero__slogan {
  font-size: var(--text-lg);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  animation: heroFadeDown var(--duration-slower) var(--ease-out) 200ms both;
}

/* ── Badge ────────────────────────────────────────────────── */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: heroFadeDown var(--duration-slower) var(--ease-out) 50ms both;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-sky);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Scroll Indicator ─────────────────────────────────────── */
.hero__scroll {
  position: absolute;
  bottom: calc(var(--sp-16) + var(--sp-4));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-raised);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: heroFadeUp var(--duration-slower) var(--ease-out) 600ms both;
}

.hero__scroll-arrow {
  width: 24px;
  height: 24px;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  animation: scrollBounce 1.5s ease-in-out infinite;
}

/* ── Animações ────────────────────────────────────────────── */
@keyframes heroFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(6px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.8); }
}

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero {
    min-height: clamp(300px, 56svh, 480px);
    justify-content: center;
    padding-block: var(--sp-10) var(--sp-10);
  }

  .hero__content {
    gap: var(--sp-4);
  }

  .hero__scroll { display: none; }
}