/* ============================================================
   MARÉ · integrator.css
   Polimento global · sobrescreve conflitos entre seções,
   define comportamentos de página inteira (scroll, drawer, etc.)
   Autoria: Agente 25 · Director & Integrator
   Carregar APÓS design-tokens.css.
   ============================================================ */

/* ---------- Reset adicional ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* nav fixa do hero tem ~64px no estado scrolled — folga */
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* respiração geral · cor de fundo de fallback antes do hero pintar */
  background: var(--mare-deep);
  /* Remove sublinhado base dos `a` herdado de design-tokens — cada seção
     controla seus próprios links. */
}
body a { border-bottom: none; }

/* ---------- Seções: contêm overflow lateral e ficam empilháveis ---------- */
body > section {
  position: relative;
  overflow-x: hidden;
}

/* ---------- Fade+rise das seções ao entrar no viewport ---------- */
.mare-fadeup {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.mare-fadeup.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Performance: content-visibility nas seções fora do viewport ----
   O hero (id="hero") fica de fora porque é a primeira coisa visível e não
   pode "pular" no primeiro paint. */
body > section:not(#hero) {
  content-visibility: auto;
  contain-intrinsic-size: 1000px 800px;
}

/* ---------- Font-display swap (reforço, caso o Google CSS não traga) ---- */
@font-face {
  font-family: 'Inter';
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-display: swap;
}

/* ============================================================
   READING-PROGRESS BAR (topo, âmbar, scaleX)
   ============================================================ */
.mare-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-nav) + 5);
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.mare-progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--mare-ambar), var(--mare-pirita));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 80ms linear;
  will-change: transform;
  box-shadow: 0 0 8px rgba(217, 146, 60, 0.35);
}

/* ============================================================
   BACK-TO-TOP (canto inferior direito)
   ============================================================ */
.mare-top {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(5, 31, 51, 0.92);
  color: var(--mare-foam);
  border: 1px solid rgba(217, 146, 60, 0.45);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-3);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-oceanic),
              opacity var(--dur-base) var(--ease-oceanic),
              box-shadow var(--dur-base) var(--ease-oceanic);
}
.mare-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-glow), var(--sh-3);
  color: var(--mare-ambar);
}
.mare-top[hidden] { display: none; }
.mare-top__label { line-height: 1; }

/* ============================================================
   MOBILE DRAWER (responde a evento mare:nav-toggle)
   ============================================================ */
.mare-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}
.mare-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 31, 51, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-oceanic);
}
.mare-drawer__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 86vw);
  background: linear-gradient(180deg, #051F33 0%, #0B3D5C 100%);
  color: var(--mare-foam);
  padding: var(--s-7) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-tide);
  box-shadow: -32px 0 64px rgba(0, 0, 0, 0.35);
  border-left: 1px solid rgba(217, 146, 60, 0.2);
}
.mare-drawer.is-open {
  pointer-events: auto;
}
.mare-drawer.is-open .mare-drawer__inner {
  transform: translateX(0);
}
.mare-drawer.is-open .mare-drawer__scrim {
  opacity: 1;
}
.mare-drawer__close {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--mare-foam);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-quick) var(--ease-oceanic);
}
.mare-drawer__close:hover {
  background: rgba(217, 146, 60, 0.2);
  color: var(--mare-ambar);
}
.mare-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.mare-drawer__link {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--mare-foam);
  letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--s-3);
  transition: color var(--dur-quick) var(--ease-oceanic),
              padding-left var(--dur-quick) var(--ease-oceanic);
  text-decoration: none;
}
.mare-drawer__link:hover {
  color: var(--mare-ambar);
  padding-left: var(--s-2);
}
.mare-drawer__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) var(--s-5);
  background: var(--mare-ambar);
  color: var(--mare-deep);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--sh-2);
}
.mare-drawer__cta:hover {
  box-shadow: var(--sh-glow), var(--sh-3);
}

/* ============================================================
   ACESSIBILIDADE
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--mare-ambar);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Mantém focus invisível em mouse, visível em teclado */
:focus:not(:focus-visible) { outline: none; }

/* Skip target highlight quando navegar via âncora */
:target {
  scroll-margin-top: 80px;
}

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mare-fadeup {
    opacity: 1;
    transform: none;
  }
  .mare-progress__bar {
    transition: none;
  }
}

/* ============================================================
   PRINT STYLESHEET
   ============================================================ */
@media print {
  /* Esconder elementos flutuantes */
  .hero-nav,
  .mare-progress,
  .mare-top,
  .mare-drawer,
  .hero__scroll,
  .hero-bg,
  .hero-bg__wave,
  .hero-bg__particles,
  .hero-particle {
    display: none !important;
  }
  /* Desliga animações e força tudo visível */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  body > section,
  .mare-fadeup {
    opacity: 1 !important;
    transform: none !important;
    content-visibility: visible !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  body {
    background: white !important;
    color: black !important;
  }
  a { color: inherit; text-decoration: none; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }
}

/* ============================================================
   PEQUENOS AJUSTES DE INTEGRAÇÃO
   ============================================================ */

/* Seção 02 (plataforma) e 05 (costao-pass) são dark.
   Garantir cor de fundo correta nas bordas onde uma seção
   light termina e uma dark começa, evitando flash branco. */
section[data-theme="dark"] {
  color-scheme: dark;
}
section[data-theme="light"] {
  color-scheme: light;
}

/* Mobile: esconde back-to-top próximo do bottom (não atrapalhar CTA) */
@media (max-width: 600px) {
  .mare-top {
    right: var(--s-3);
    bottom: var(--s-3);
    padding: var(--s-2) var(--s-3);
  }
  .mare-top__label { display: none; }
}

/* Reforço: imagens responsivas por padrão */
img, svg {
  max-width: 100%;
  height: auto;
}
img { display: block; }