/* =========================================================
   Mar Profundo — fundo fixo + parallax horizontal
   ========================================================= */

:root {
  --mar-1: #0f5b9c;
  --mar-2: #0a3d74;
  --mar-3: #062b55;
  --mar-4: #041d3d;
  --texto: #eaf4ff;
  --muted: #a8c4e0;
  --bg: #031527;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--texto);
  padding-top: 58px;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ---------- 1. Fundo fixo ---------- */
.mar-fixo {
  position: relative;
  height: calc(100vh - 58px);
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@supports (height: 100dvh) {
  .mar-fixo { height: calc(100dvh - 58px); }
}

/* camada do fundo: 3x mais alta que a seção, para nunca mostrar borda */
.mar-fundo {
  position: absolute;
  top: -100%; bottom: -100%;
  background-image:
    radial-gradient(4px 4px at 8% 22%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(3px 3px at 18% 64%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(5px 5px at 30% 38%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(3px 3px at 44% 78%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(4px 4px at 58% 26%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(3px 3px at 70% 58%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(5px 5px at 84% 34%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(3px 3px at 93% 72%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(180deg, var(--mar-1) 0%, var(--mar-2) 40%, var(--mar-3) 75%, var(--mar-4) 100%);
  background-size: 120px 120px, 140px 140px, 100px 100px, 150px 150px,
                   130px 130px, 120px 120px, 110px 110px, 140px 140px, cover;
  background-position: 0 0;
  background-attachment: fixed;
  will-change: transform;
}

/* no celular o "fixed" é limitado; o JS simula o fundo preso */
@media (max-width: 768px) {
  .mar-fundo { background-attachment: scroll; }
}

.conteudo { position: relative; z-index: 5; padding: 0 20px; }

.tag {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 4px 40px rgba(0, 40, 90, 0.7);
}

h1 span { color: #7fd4ff; }

.sub {
  margin-top: 16px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(255, 255, 255, 0.92);
}
.sub strong { color: #fff; }
code { background: rgba(0, 0, 0, 0.3); padding: 2px 8px; border-radius: 6px; font-size: 0.9em; }

.hint {
  margin-top: 26px;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.75);
  animation: pisca 1.6s ease-in-out infinite;
}

@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- 2. Cena horizontal ---------- */
.correnteza {
  position: relative;
  height: 120vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--mar-3), var(--mar-4));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* camada larga (190vw) para nunca mostrar bordas ao deslizar */
.cxl {
  position: absolute;
  top: 0; bottom: 0;
  left: -45vw; right: -45vw;
  pointer-events: none;
  will-change: transform;
}

.bicho {
  position: absolute;
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
  animation: flutua 3.5s ease-in-out infinite alternate;
}

.bicho:nth-child(2n) { animation-delay: 0.8s; }
.bicho:nth-child(3n) { animation-delay: 1.6s; }

@keyframes flutua {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

/* bolhas: padrão de pontos repetido */
[data-linha="bolhas"] {
  background-image:
    radial-gradient(5px 5px at 12% 30%, rgba(255,255,255,0.6), transparent 60%),
    radial-gradient(3px 3px at 24% 70%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(6px 6px at 38% 20%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(4px 4px at 52% 55%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(5px 5px at 64% 80%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(3px 3px at 76% 25%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(5px 5px at 88% 60%, rgba(255,255,255,0.55), transparent 60%);
}

[data-linha="algas"] .bicho { font-size: 46px; }

/* texto central por cima */
.correnteza .conteudo.cena {
  max-width: 560px;
  padding: 44px 34px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  text-align: center;
}

.cena h2 { font-size: 1.8rem; margin-bottom: 10px; }
.cena h2 span { color: #7fd4ff; }
.cena p { color: rgba(255, 255, 255, 0.85); }

/* ---------- textos ---------- */
.texto {
  padding: 90px 20px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.texto h2 { font-size: 1.9rem; margin-bottom: 14px; }
.texto p { color: var(--muted); margin-bottom: 12px; }

footer {
  padding: 30px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
footer a { color: #7fd4ff; }