/* ============================================================
   WineSync — styles.css
   Fontes, base, animações e os estados que a conversão do export
   exigiu (navbar, menu mobile, hover/focus, formulário).
   Os estilos de layout continuam inline no index.html — eles são a
   fonte da verdade do design; aqui só entra o que não cabe lá.
   ============================================================ */

/* ---- Fontes ---- */
@font-face{font-family:'Fashion';src:url("assets/fonts/Fashion.otf") format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Unbounded';src:url("assets/fonts/Unbounded-200.ttf") format('truetype');font-weight:200;font-display:swap}
@font-face{font-family:'Unbounded';src:url("assets/fonts/Unbounded-300.ttf") format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Unbounded';src:url("assets/fonts/Unbounded-400.ttf") format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Unbounded';src:url("assets/fonts/Unbounded-500.ttf") format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Unbounded';src:url("assets/fonts/Unbounded-600.ttf") format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Unbounded';src:url("assets/fonts/Unbounded-700.ttf") format('truetype');font-weight:700;font-display:swap}

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:#150C09;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#511318;color:#F9F5F2}
input::placeholder{color:rgba(219,203,184,.5)}
a{text-decoration:none}
/* `hidden` precisa vencer os display:flex inline (form, card de sucesso) */
[hidden]{display:none!important}

/* ---- Reveal — só quando main.js está ativo (<html class="js">); sem JS tudo fica visível ---- */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none}}

/* ---- Animações ---- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulsering{0%{box-shadow:0 0 0 0 rgba(110,31,42,.5)}70%{box-shadow:0 0 0 16px rgba(110,31,42,0)}100%{box-shadow:0 0 0 0 rgba(110,31,42,0)}}

/* ---- Tweaks: Atmosfera (mood layer) ---- */
.ws-ambient{position:fixed;inset:0;pointer-events:none;z-index:2;transition:background .7s ease,opacity .7s ease}
[data-atmosfera="meialuz"] .ws-ambient{background:none;opacity:0}
[data-atmosfera="penumbra"] .ws-ambient{mix-blend-mode:normal;background:radial-gradient(120% 92% at 50% 26%,transparent 34%,rgba(6,3,2,.62))}
[data-atmosfera="candle"] .ws-ambient{mix-blend-mode:screen;background:radial-gradient(56% 46% at 80% 13%,rgba(214,150,58,.24),transparent 62%)}

/* ---- Tweaks: Movimento (animation intensity) ---- */
[data-motion="sutil"] [style*="floaty"]{animation-duration:13s!important}
.js [data-motion="sutil"] [data-reveal]{transform:translateY(14px)}
[data-motion="estatico"] [style*="floaty"],[data-motion="estatico"] [style*="pulsering"]{animation:none!important}
[data-motion="estatico"] [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}

/* ---- Hero full-bleed ---- */
.ws-hero-bg{transition:background-position .3s ease}
@media (max-width:820px){
  .ws-trust{flex-wrap:wrap!important;white-space:normal!important}
  .ws-hero-bg{background-position:74% center}
  .ws-hero-veil{background:linear-gradient(180deg,rgba(21,12,9,.45),rgba(21,12,9,.8)),linear-gradient(90deg,#150C09 0%,rgba(21,12,9,.66) 52%,rgba(21,12,9,.32) 100%)!important}
}

/* ---- Navbar: transparente no topo, sólida após 24px de scroll (main.js adiciona .is-scrolled) ---- */
.ws-header{background:rgba(18,10,8,0);border-bottom:1px solid rgba(219,203,184,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px)}
.ws-header.is-scrolled{background:rgba(18,10,8,.82);border-bottom:1px solid rgba(219,203,184,.12);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}

/* ---- Navegação: links desktop ≥ 900px; botão + painel mobile < 900px (main.js alterna .is-open) ---- */
.ws-mobile-menu{display:none}
.ws-mobile-menu.is-open{display:block}
@media (max-width:899.98px){
  .ws-nav-desktop{display:none!important}
}
@media (min-width:900px){
  .ws-menu-btn{display:none!important}
  .ws-mobile-menu{display:none!important}
}

/* ---- Hover / focus — convertidos dos atributos style-hover / style-focus do export.
        !important porque os estilos de repouso estão inline nos elementos. ---- */
.hv-link:hover{color:#F9F5F2!important}
.hv-link-accent:hover{color:#DBCBB8!important}
.hv-btn:hover{background:linear-gradient(180deg,#8A2738,#5e1620)!important}
.hv-badge:hover{border-color:rgba(219,203,184,.45)!important}
.hv-notice:hover{background:rgba(199,162,117,.16)!important}
.hv-outline:hover{background:rgba(199,162,117,.1)!important}
.hv-social:hover{border-color:var(--accent,#C7A275)!important}
.hv-card:hover{transform:translateY(-7px)!important;box-shadow:0 24px 46px rgba(49,32,17,.13)!important;border-color:rgba(165,127,99,.4)!important}
.hv-step:hover{transform:translateY(-7px)!important;box-shadow:0 24px 46px rgba(49,32,17,.13)!important}
.hv-tile:hover{transform:translateY(-8px)!important;border-color:rgba(199,162,117,.4)!important;box-shadow:0 30px 60px rgba(0,0,0,.4)!important}
.hv-wa:hover{transform:scale(1.06)!important}
.fc-input:focus{border-color:var(--accent,#C7A275)!important}