/* ABC dos Bichos V4 — Hero: Underwater Cinematic Minimalism (isolado) */
:root {
  --v4-abyss: #040B10;
  --v4-champagne: #D9B77A;
  --v4-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Header transparente, discreto, sem bordas/glass */
#main-header.v4-header {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color 400ms var(--v4-ease);
}
#main-header.v4-header.is-scrolled { background: rgba(4, 11, 16, 0.9) !important; }
#main-header.v4-header nav a { font-size: 12px; letter-spacing: 0.04em; }

/* Trilho de scroll: desktop usa sticky nativo (sem hijacking); mobile sem retenção */
.v4-hero-track { position: relative; width: 100%; background: var(--v4-abyss); }
@media (min-width: 1024px) { .v4-hero-track { height: 210svh; } }

.v4-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--v4-abyss);
}
@media (min-width: 1024px) { .v4-hero { position: sticky; top: 0; } }

.v4-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

/* Cenário (profundidade: move mais devagar que o peixe) */
.v4-scene { inset: -3%; }
.v4-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; }

/* Raios de luz da superfície */
.v4-rays {
  inset: -6% -6% 20% -6%;
  background:
    radial-gradient(ellipse 34% 70% at 26% 0%, rgba(120, 220, 230, 0.20) 0%, transparent 70%),
    radial-gradient(ellipse 18% 60% at 40% 0%, rgba(120, 220, 230, 0.12) 0%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.8;
  will-change: transform, opacity;
}

/* Peixe protagonista: preto puro some com screen blend */
.v4-fish {
  position: absolute;
  right: 3vw;
  top: 50%;
  width: min(54vw, 920px);
  aspect-ratio: 4 / 3;
  margin-top: calc(min(54vw, 920px) * -0.375);
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: screen;
}
.v4-fish img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 62%, transparent 100%);
}

/* Legibilidade à esquerda + fusão com a próxima seção */
.v4-scrim {
  background:
    linear-gradient(90deg, rgba(4,11,16,0.86) 0%, rgba(4,11,16,0.55) 30%, rgba(4,11,16,0) 58%),
    linear-gradient(180deg, rgba(4,11,16,0.35) 0%, rgba(4,11,16,0) 22%, rgba(4,11,16,0) 72%, rgba(4,11,16,0.55) 100%);
  will-change: auto;
}
.v4-fade-next {
  top: auto; height: 34%;
  background: linear-gradient(180deg, rgba(4,11,16,0) 0%, #040B10 100%);
  opacity: 0;
  will-change: opacity;
}

/* Tipografia: somente título + botão */
.v4-copy {
  position: absolute;
  z-index: 10;
  left: clamp(1.25rem, 5vw, 5rem);
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  max-width: 560px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.75rem;
  will-change: opacity, transform;
}
.v4-title {
  margin: 0;
  font-family: 'Manrope', 'Geist', sans-serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #fff;
}
.v4-title span { display: block; color: var(--v4-champagne); }
.v4-rule { width: 40px; height: 1px; background: var(--v4-champagne); opacity: 0.9; }
.v4-cta {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 44px; padding: 0 1.5rem;
  border: 1px solid rgba(217, 183, 122, 0.7);
  border-radius: 9999px;
  color: var(--v4-champagne);
  font-family: 'Manrope', sans-serif; font-weight: 500;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--v4-ease);
}
.v4-cta:active { transform: scale(0.97); }
@media (hover: hover) { .v4-cta:hover { background: var(--v4-champagne); color: var(--v4-abyss); } }
.v4-cta:focus-visible { outline: 2px solid var(--v4-champagne); outline-offset: 3px; }

/* Mobile: peixe visível, título e CTA legíveis */
@media (max-width: 1023px) {
  .v4-scene img { object-position: 70% 50%; }
  .v4-fish { right: -6vw; top: 44%; width: 104vw; margin-top: calc(104vw * -0.375); }
  .v4-copy {
    top: auto; bottom: calc(5.5rem + env(safe-area-inset-bottom)); transform: none;
    width: auto; max-width: none; right: 1.25rem; gap: 1.25rem;
  }
  .v4-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .v4-scrim {
    background:
      linear-gradient(180deg, rgba(4,11,16,0.45) 0%, rgba(4,11,16,0) 25%, rgba(4,11,16,0.2) 52%, rgba(4,11,16,0.88) 82%, #040B10 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-layer, .v4-fish, .v4-copy { transition: none !important; }
  .v4-rays { opacity: 0.7 !important; transform: none !important; }
}