/* ==========================================================
   Nazateen — base: tokens, reset, tipografia e componentes
   genéricos (botões, painéis, formulários, reveal).
   ========================================================== */

:root{
  /* superfícies */
  --bg:#0e1109;
  --bg-deep:#0b0d07;
  --bg-elev:#171d0f;
  --bg-elev-2:#1f280f;
  --bg-input:#12160c;

  /* texto */
  --text:#eef2e6;
  --text-dim:#a3ab93;
  --text-faint:#8e987c;

  /* linhas */
  --line:#242c17;
  --line-bright:#374323;
  --line-paper:rgba(238,242,230,0.18);

  /* acento verde-limão */
  --accent:#d4ff3d;
  --accent-soft:#e9ff9c;
  --accent-dim:#8fae1f;
  --accent-glow:rgba(212,255,61,0.22);
  --danger:#ff6b6b;

  /* tipografia */
  --font-display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --font-marker:'Permanent Marker', 'Comic Sans MS', cursive;

  /* forma e movimento */
  --radius-s:8px;
  --radius:14px;
  --radius-l:20px;
  --wrap:1080px;
  --gutter:20px;
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* textura de grão (gerada em JS, ver lib/grain.js) */
  --noise:none;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

h1,h2,h3{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:.96; letter-spacing:.005em; text-wrap:balance; margin:0;
}
p{ margin:0; line-height:1.65; color:var(--text-dim); }

/* ---------- utilitários ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:30px;
  background:var(--accent); color:var(--bg); font-family:var(--font-mono); font-size:12px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

.eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
}
.eyebrow::before{ content:''; width:22px; height:1px; background:var(--accent); flex:none; }
.eyebrow b{ color:var(--accent); font-weight:600; }

/* camada de grão reaproveitada no hero e no carrossel */
.grain-layer{
  position:absolute; inset:-50px; pointer-events:none;
  background-image:var(--noise); background-size:160px 160px;
  mix-blend-mode:overlay;
  animation:grainShift .6s steps(5) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-18px,12px); } 40%{ transform:translate(14px,-20px); }
  60%{ transform:translate(-10px,-8px); } 80%{ transform:translate(20px,16px); } 100%{ transform:translate(0,0); }
}

/* ---------- botões ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px; border:1px solid var(--accent);
  background:var(--accent); color:var(--bg);
  font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -12px rgba(212,255,61,.6); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.btn .icon{ width:16px; height:16px; flex:none; }
.btn--ghost{ background:rgba(9,11,6,.55); color:var(--text); border-color:var(--line-paper); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-soft); box-shadow:none; }
.btn--sm{ padding:9px 16px; font-size:11px; }
.btn--pulse{ animation:ctaPulse 2.4s ease-in-out infinite; }
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(212,255,61,.45); } 50%{ box-shadow:0 0 0 12px rgba(212,255,61,0); } }
.bounce{ display:inline-block; animation:bounce 1.4s ease-in-out infinite; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

.link-btn{
  margin-top:16px; padding:0; border:0; background:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint);
}
.link-btn:hover{ color:var(--accent-soft); }

.round-btn{
  width:38px; height:38px; flex:none; border-radius:50%;
  border:1px solid var(--line-paper); background:rgba(9,11,6,.6); color:var(--text);
  font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
.round-btn:hover:not(:disabled){ border-color:var(--accent); color:var(--accent); }
.round-btn:disabled{ opacity:.35; cursor:default; }

/* ---------- painel (substitui o antigo .card) ---------- */
.panel{
  position:relative; padding:26px 24px;
  border:1px solid var(--line-bright); border-radius:var(--radius-l);
  background:
    repeating-linear-gradient(135deg, rgba(238,242,230,.028) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 100% 0%, rgba(212,255,61,.12) 0%, transparent 50%),
    linear-gradient(165deg, var(--bg-elev-2) 0%, var(--bg-elev) 55%, var(--bg) 100%);
  box-shadow:0 24px 60px -36px rgba(0,0,0,.8);
}
/* recorte de ingresso: dois "furos" nas laterais */
.panel--ticket{
  -webkit-mask:
    radial-gradient(circle 13px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 13px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 13px at 0 50%, transparent 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 13px at 100% 50%, transparent 97%, #000) right / 51% 100% no-repeat;
}

/* ---------- formulários ---------- */
.field{ margin-bottom:12px; }
.field label{
  display:block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint);
}
.field input, .field select, .field textarea{
  width:100%; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line-bright); background:var(--bg-input); color:var(--text);
  font-size:14px; resize:vertical; transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,255,61,.14); }
.field .is-invalid, .field [aria-invalid="true"]{ border-color:var(--danger); }
.form-msg{ min-height:18px; margin-top:10px; font-size:13px; }
.form-msg.is-ok{ color:var(--accent); }
.form-msg.is-err{ color:var(--danger); }

/* ---------- reveal ao rolar (só quando o JS está ativo) ---------- */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal-stagger > *{ opacity:0; transform:translateY(18px); }
.js .reveal-stagger.is-in > *{ animation:revealItem .6s var(--ease-out) forwards; }
.reveal-stagger.is-in > *:nth-child(2){ animation-delay:.08s; }
.reveal-stagger.is-in > *:nth-child(3){ animation-delay:.16s; }
.reveal-stagger.is-in > *:nth-child(4){ animation-delay:.24s; }
.reveal-stagger.is-in > *:nth-child(5){ animation-delay:.32s; }
.reveal-stagger.is-in > *:nth-child(n+6){ animation-delay:.4s; }
@keyframes revealItem{ to{ opacity:1; transform:none; } }

/* confete */
.confetti-piece{ position:fixed; z-index:90; pointer-events:none; border-radius:2px; will-change:transform, opacity; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal, .js .reveal-stagger > *{ opacity:1; transform:none; }
  .grain-layer{ animation:none; }
}