/* ============================================================================
   styles-premium.css — ELEVAÇÃO PREMIUM (camada aditiva, escopada e removível)
   Hotel Tubarão · não altera copy, estrutura nem identidade — refina entrega.
   Carregar DEPOIS de style.css. Sem esta folha, o site permanece 100% íntegro.
   ============================================================================ */

/* ---- 1) Ritmo vertical harmônico (escala fluida via clamp) -----------------
   Seções respiram proporcionalmente à viewport; títulos ganham medida áurea
   de leitura (max-width ~34ch) sem tocar no HTML. */
.section { padding-block: clamp(4.25rem, 6vw + 2rem, 7.5rem); }
.section__head { margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.section__title { max-width: 34ch; text-wrap: balance; }
.section__lead { max-width: 62ch; text-wrap: pretty; }

/* ---- 2) Sombra difusa multicamada (elevação consistente de superfícies) ---- */
.sobre__frame,
.quote,
.step,
.location__map {
  box-shadow:
    0 1px 2px rgba(11, 31, 51, 0.06),
    0 8px 18px -8px rgba(11, 31, 51, 0.12),
    0 24px 48px -20px rgba(11, 31, 51, 0.18);
}

/* ---- 3) CTAs táteis e magnéticos ------------------------------------------
   O deslocamento magnético (translate) vem do scroll-choreography.js via
   variáveis; aqui ficam a física de repouso, o afundar no clique e o anel
   de foco AA. Sem JS: hover/focus continuam completos (degradação graciosa). */
.btn {
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease);
  will-change: transform;
}
.btn--gold {
  transform: translate(var(--mx, 0px), var(--my, 0px));
}
.btn--gold:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(0.98); }
.btn:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 3px;
}

/* ---- 4) Contraste & legibilidade (WCAG AA) --------------------------------
   Texto de apoio sobe de contraste em superfícies claras; seleção de texto
   ganha a marca; links de rodapé deixam de depender só de cor. */
:root { --text-muted: color-mix(in srgb, var(--navy-800) 78%, white); }
::selection { background: var(--gold-400); color: var(--navy-900); }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 5) Coordenação com a coreografia GSAP --------------------------------
   Quando o GSAP assume as entradas (html.choreo), o reveal vanilla é
   neutralizado para nunca haver animação dupla. Se o GSAP não carregar,
   .choreo não existe e o reveal vanilla segue dono da cena. */
html.choreo [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
html.choreo .choreo-item { opacity: 0; }
html.choreo.choreo-reduced .choreo-item { opacity: 1; }

/* ---- 6) Ambient da conversão (palco do canvas em #cotacao) ---------------- */
#cotacao { position: relative; isolation: isolate; }
#cotacao > .container { position: relative; z-index: 1; }
.ambient-motion-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ---- 7) Acessibilidade de movimento ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn--gold { transition: none; transform: none !important; }
}