/* ============================================================
   Alma Acessórios — Coming Soon
   Paleta da marca:
   --verde-escuro #134F31 · --sage #8E9970 · --limao #E8EDC0
   ============================================================ */

/* ---------- Fonte da marca: Vonca ---------- */
@font-face{font-family:"Vonca";src:url("../fonts/Vonca-Light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Vonca";src:url("../fonts/Vonca-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Vonca";src:url("../fonts/Vonca-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Vonca";src:url("../fonts/Vonca-Semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Vonca";src:url("../fonts/Vonca-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --verde-profundo:#0c3421;
  --verde-escuro:#134F31;
  --verde-medio:#1c6640;
  --sage:#8E9970;
  --suave:#B5C48C;
  --limao:#E8EDC0;
  --limao-claro:#f3f6dd;

  --texto:#eef2d6;
  --texto-suave:rgba(238,242,214,.62);
  --linha:rgba(232,237,192,.22);

  --serif:"Vonca",Georgia,"Times New Roman",serif;
  --editorial:"Cormorant Garamond",Georgia,serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  min-height:100svh;
  font-family:var(--serif);
  color:var(--texto);
  background:var(--verde-profundo);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:flex;
  flex-direction:column;
}

/* ================= Atmosfera de fundo ================= */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg__mesh{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 90% at 15% 0%, #17603c 0%, transparent 55%),
    radial-gradient(120% 100% at 85% 100%, #0e4229 0%, transparent 60%),
    linear-gradient(160deg, #10462b 0%, #0c3421 55%, #082818 100%);
}
.bg__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen}
.bg__glow--1{width:46vmax;height:46vmax;left:-8vmax;top:-14vmax;background:radial-gradient(circle,#a9c07f 0%,transparent 68%);animation:drift1 22s var(--ease) infinite alternate}
.bg__glow--2{width:40vmax;height:40vmax;right:-10vmax;bottom:-16vmax;background:radial-gradient(circle,#e8edc0 0%,transparent 66%);opacity:.32;animation:drift2 26s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(6vmax,4vmax) scale(1.1)}}
@keyframes drift2{to{transform:translate(-5vmax,-3vmax) scale(1.08)}}

.bg__vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(4,20,12,.55) 100%)}
.bg__grain{
  position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================= Isotipo marca d'água ================= */
.watermark{position:fixed;z-index:1;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-52%);width:min(92vw,680px);opacity:.05;filter:saturate(1.2)}
.watermark img{width:100%;height:auto;display:block;
  animation:floatMark 12s ease-in-out infinite}
@keyframes floatMark{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ================= Brilhos (JS) ================= */
.sparkles{position:fixed;inset:0;z-index:2;pointer-events:none}
.sparkle{position:absolute;color:var(--limao);opacity:0;
  animation:twinkle var(--dur,5s) ease-in-out infinite;animation-delay:var(--delay,0s);
  filter:drop-shadow(0 0 6px rgba(232,237,192,.55))}
.sparkle svg{width:100%;height:100%;display:block;fill:currentColor}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  50%{opacity:var(--peak,.9);transform:scale(1) rotate(8deg)}
}

/* ================= Palco / conteúdo ================= */
.stage{position:relative;z-index:3;flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(2rem,6vw,5rem) 1.5rem;width:100%}
.card{width:100%;max-width:min(640px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}

.eyebrow{max-width:100%;margin:0 0 clamp(1.4rem,4vw,2.2rem);font-weight:500;font-size:clamp(.72rem,2vw,.82rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--suave)}

.wordmark{position:relative;margin:0;width:clamp(240px,62vw,440px);isolation:isolate}
.wordmark img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 40px rgba(0,0,0,.35)) brightness(var(--glint,1))}
.wordmark__shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.35) 48%,rgba(255,255,255,.75) 50%,rgba(255,255,255,.35) 52%,transparent 58%);
  mix-blend-mode:screen;transform:translateX(-135%);opacity:0}
/* A varredura (reflexo de joia) é controlada via GSAP em assets/js/main.js */

.divider{display:flex;align-items:center;gap:1rem;width:min(280px,70%);margin:clamp(1.6rem,4vw,2.4rem) 0 clamp(1.4rem,4vw,2rem)}
.divider__line{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--linha),transparent)}
.divider__star{width:16px;height:16px;fill:var(--suave);flex:none;
  animation:starPulse 4s ease-in-out infinite}
@keyframes starPulse{0%,100%{opacity:.55;transform:scale(.9) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}

.headline{width:100%;margin:0;font-weight:300;line-height:1.12;letter-spacing:-.01em;
  font-size:clamp(1.9rem,6.5vw,3.4rem);overflow-wrap:break-word}
.headline em{font-family:var(--editorial);font-style:italic;font-weight:400;color:var(--suave)}

.lede{margin:clamp(1.2rem,3.5vw,1.8rem) 0 0;max-width:min(44ch,100%);font-weight:300;
  font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.65;color:var(--texto-suave);overflow-wrap:break-word}

/* ================= Formulário ================= */
.notify{width:100%;max-width:min(440px,100%);margin:clamp(2rem,5vw,2.8rem) 0 0}
.notify__field{display:flex;gap:.5rem;padding:.4rem .4rem .4rem 1.2rem;
  background:rgba(232,237,192,.06);border:1px solid var(--linha);border-radius:999px;
  backdrop-filter:blur(6px);transition:border-color .35s var(--ease),background .35s var(--ease)}
.notify__field:focus-within{border-color:rgba(232,237,192,.5);background:rgba(232,237,192,.1)}
.notify__field input{flex:1;min-width:0;border:0;background:transparent;color:var(--texto);
  font-family:var(--serif);font-size:1rem;letter-spacing:.01em}
.notify__field input::placeholder{color:rgba(238,242,214,.4)}
.notify__field input:focus{outline:none}
.notify__field button{flex:none;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:0;border-radius:999px;padding:.85rem 1.5rem;
  font-family:var(--serif);font-weight:600;font-size:.95rem;letter-spacing:.02em;
  color:var(--verde-escuro);background:var(--limao);
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.notify__field button:hover{background:var(--limao-claro);transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(232,237,192,.22)}
.notify__field button:active{transform:translateY(0)}
.notify__field button svg{transition:transform .3s var(--ease)}
.notify__field button:hover svg{transform:translateX(3px)}

.notify__msg{margin:.9rem 0 0;min-height:1.2em;font-size:.9rem;letter-spacing:.02em;color:var(--suave);
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.notify__msg.show{opacity:1;transform:none}
.notify__hint{margin:.7rem 0 0;font-size:.82rem;letter-spacing:.04em;color:var(--texto-suave)}

/* ================= Social ================= */
.social{margin-top:clamp(1.8rem,4vw,2.4rem)}
.social a{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--suave);
  font-size:.92rem;letter-spacing:.06em;padding:.5rem .2rem;transition:color .3s var(--ease)}
.social a:hover{color:var(--limao)}
.social svg{transition:transform .3s var(--ease)}
.social a:hover svg{transform:scale(1.08) rotate(-4deg)}

/* ================= Rodapé ================= */
.foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .9rem;
  padding:1.6rem 1.5rem 2rem;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  color:var(--texto-suave)}
.foot__dot{width:4px;height:4px;border-radius:50%;background:var(--sage)}

/* ================= Reveal na carga ================= */
.reveal{opacity:0;transform:translateY(18px);
  animation:reveal 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes reveal{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .wordmark__shine{display:none}
}

@media (max-width:520px){
  .notify__field{flex-direction:column;padding:.6rem;border-radius:20px;gap:.6rem}
  .notify__field input{text-align:center;padding:.6rem 0}
  .notify__field button{justify-content:center;width:100%;padding:.95rem}
  .wordmark{width:min(230px,72vw)}
  .headline{font-size:clamp(1.7rem,7.5vw,2.2rem)}
  .foot{gap:.35rem .7rem;font-size:.7rem;letter-spacing:.08em}
  .foot__dot{display:none}
}