/* Efeitos sutis (aprovados pelo Raick em 09/11/2026, E1 a E8): valem com <html data-efeitos> (Base.astro) e quando o
   efeitos.js põe .fx (sem JS ou com movimento reduzido, tudo aparece parado e visível).
   Referências: entrada suave de texto e foto ao chegar na seção, uma vez só (Faith Ibiza, Monarque,
   Wedding Cinema Club, Tatiana de Weber, Vander Hotel); nada segue a rolagem. */

/* E1 · títulos e textos: sobem 16px saindo de um desfoque leve (21st.dev: tom_ui/blur-reveal) */
html.fx .fx-sobe { opacity: 0; transform: translateY(16px); filter: blur(6px); }
html.fx .fx-sobe.is-in { opacity: 1; transform: none; filter: none; transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .25, 1), filter .9s ease; transition-delay: var(--fx-d, 0s); }

/* E2 · fotos: entram com um zoom bem leve, de 1,06 para 1 (Vander Hotel faz de 1,3 para 1) */
html.fx .fx-foto { overflow: hidden; }
html.fx .fx-foto img { opacity: 0; transform: scale(1.06); }
html.fx .fx-foto.is-in img { opacity: 1; transform: none; transition: opacity 1s ease, transform 1.6s cubic-bezier(.22, .8, .25, 1); }

/* E3 · listas em cascata: cada item entra 90ms depois do anterior (usa o E1 com atraso) */

/* E4 · links do menu e do rodapé: sublinhado que cresce da esquerda (21st.dev: ruixen.ui/animated-link) */
html[data-efeitos] :is(.nav__link, .rodape__col a, .casal__ig, .casal__voltar) { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .35s cubic-bezier(.22, .8, .25, 1), color .2s; }
html[data-efeitos] :is(.nav__link, .rodape__col a, .casal__ig, .casal__voltar):hover { background-size: 100% 1px; }
html[data-efeitos] :is(.casal__ig, .casal__voltar) { border-bottom-color: transparent; }

/* E5 · perguntas abrem e fecham deslizando (21st.dev: designali-in/accordion-plus-minus); sem suporte, abrem na hora */
html[data-efeitos] { interpolate-size: allow-keywords; }
html[data-efeitos] .perguntas__lista details::details-content { height: 0; overflow: clip; transition: height .45s cubic-bezier(.22, .8, .25, 1), content-visibility .45s allow-discrete; }
html[data-efeitos] .perguntas__lista details[open]::details-content { height: auto; }

/* E6 · formulário: ao focar, a linha do campo se preenche da esquerda em terracota (Faith Ibiza) */
html[data-efeitos] .form-linha .field :is(input, select, textarea) { background: linear-gradient(var(--terra-texto), var(--terra-texto)) no-repeat 0 100% / 0 2px; transition: background-size .45s cubic-bezier(.22, .8, .25, 1); }
html[data-efeitos] .form-linha .field :is(input, select, textarea):focus { border-bottom: 1px solid color-mix(in oklab, var(--ink) 40%, transparent); background-size: 100% 2px; }

/* E7 · rodapé: "Linda Cerimonial" sobe por trás de uma máscara, palavra por palavra (21st.dev: tom_ui/slide-up-text) */
html.fx .fx-mascara { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
html.fx .fx-mascara > span { display: inline-block; transform: translateY(105%); }
html.fx .is-in .fx-mascara > span { transform: none; transition: transform 1.2s cubic-bezier(.65, 0, .25, 1); transition-delay: var(--fx-d, 0s); }

/* E8 · topo: a frase principal aparece palavra por palavra ao abrir a página (21st.dev: ibelick/text-effect) */
html.fx .fx-palavra { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(4px); }
html.fx .is-in .fx-palavra { opacity: 1; transform: none; filter: none; transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .25, 1), filter .8s ease; transition-delay: var(--fx-d, 0s); }

@media (prefers-reduced-motion: reduce) {
  html[data-efeitos] *, html[data-efeitos] *::details-content { transition: none !important; }
}