/* ==========================================================
   base.css — Lírius Decor
   Reset, tipografia, botões, utilidades, animações de entrada
   e acessibilidade (foco visível, pular para o conteúdo, movimento reduzido).
   ========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--off-white);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer;border:none;background:none}
::selection{background:var(--gold);color:var(--green-deep)}

/* Foco visível só para teclado */
:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px;border-radius:6px}

/* Atalho de teclado para pular o menu */
.skip-link{position:absolute;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:var(--radius-sm);background:var(--gold-light);color:var(--green-deep);font-weight:700}
.skip-link:focus{top:16px}

.container{max-width:var(--container);margin:0 auto;padding:0 32px}
@media(max-width:768px){.container{padding:0 22px}}

/* ---------- TIPOGRAFIA ---------- */
.eyebrow{
  font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:700;
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{content:'';width:34px;height:1px;background:currentColor;opacity:.55}
.eyebrow.left::before{display:none}
.on-dark .eyebrow{color:var(--gold)}

h1,h2,h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em;line-height:1.08}
h1{font-size:clamp(2.7rem,6vw,5rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.12}
h3{font-size:clamp(1.25rem,2vw,1.55rem)}
.serif-italic{font-style:italic;color:var(--gold-ink);font-weight:400}
.on-dark .serif-italic{color:var(--gold-light)}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;min-height:48px;
  padding:17px 34px;border-radius:100px;
  font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s ease,color .4s ease;
  position:relative;overflow:hidden;
}
.btn .arrow{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;transition:width .4s ease}
.btn .arrow::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arrow{width:28px}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--green-deep);box-shadow:0 14px 30px -10px rgba(200,164,93,.55)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(200,164,93,.7)}
.btn-glass{background:rgba(247,243,234,.08);color:var(--off-white);border:1px solid rgba(247,243,234,.28);backdrop-filter:blur(6px)}
.btn-glass:hover{background:rgba(247,243,234,.16);transform:translateY(-3px)}
.btn-outline{background:transparent;color:var(--green-deep);border:1px solid var(--green-mid)}
.btn-outline:hover{background:var(--green-deep);color:var(--off-white);transform:translateY(-3px)}

/* ---------- ENTRADA AO ROLAR ----------
   Só esconde o conteúdo quando o JS está ativo (classe .js no <html>),
   para o texto nunca sumir se o script falhar. */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.12s}
.reveal-d2{transition-delay:.24s}

/* ---------- KEYFRAMES ---------- */
@keyframes titleGlow{from{opacity:.72;filter:blur(2px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.55)}8%{opacity:1}78%{opacity:.86}100%{opacity:0;transform:translateY(-105vh) scale(1.28)}}
@keyframes riseVisible{0%{opacity:.22;transform:translateY(0) scale(.68)}12%{opacity:.46}82%{opacity:.28}100%{opacity:0;transform:translateY(-62vh) scale(1.02)}}
@keyframes floatLeaf{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
@keyframes floatLeaf2{0%,100%{transform:translateY(0) rotate(150deg)}50%{transform:translateY(16px) rotate(156deg)}}
@keyframes scrollDot{0%{transform:translateY(-14px)}100%{transform:translateY(46px)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .hero h1 .ln span,.hero-sub,.hero-ctas,.hero-eyebrow,.hero-pills,.scroll-cue{opacity:1}
  .particles{display:none}
}