/* =================================================================
   MET3LOSBALLAS244 — Bandeira Oficial · Federação Los 13 (L13)
   style.css — folha de estilos principal
   ================================================================= */

/* ---------- 1. Tokens de design ---------- */
:root{
  /* cores — base */
  --void:        #07050c;
  --void-2:      #0c0a14;
  --surface:     #141019;
  --surface-2:   #1b1524;
  --line:        rgba(201,162,75,.16);
  --line-strong: rgba(201,162,75,.32);

  /* cores — acentos */
  --gold:        #c9a24b;
  --gold-soft:   #e8cf8a;
  --gold-dim:    #8a703a;
  --crimson:     #9a2530;
  --crimson-soft:#cf5a5a;
  --violet:      #5b3f86;
  --violet-soft: #8a6cc0;

  /* texto */
  --bone:        #ece4d3;
  --bone-dim:    #a99e8a;
  --bone-faint:  #756b5c;

  /* tipografia */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* escala fluida */
  --fs-h1:   clamp(2.5rem, 4.4vw + 1.1rem, 5.4rem);
  --fs-h2:   clamp(1.9rem, 2.2vw + 1.1rem, 2.7rem);
  --fs-h3:   clamp(1.1rem, .6vw + .95rem, 1.3rem);
  --fs-lead: clamp(1.02rem, .35vw + .92rem, 1.18rem);
  --fs-body: 1rem;
  --fs-small:.875rem;
  --fs-eye:  .76rem;

  /* layout */
  --container-w: 1180px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --ease-out:  cubic-bezier(.16,.84,.32,1);
  --ease-stamp: cubic-bezier(.2,1.6,.4,1);

  color-scheme: dark;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:84px; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--gold); color:var(--void); }

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* trava de scroll quando o menu mobile está aberto */
body.nav-open{ overflow:hidden; }

/* foco visível para acessibilidade */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--gold-soft);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 3. Fundo atmosférico ---------- */
.bg-fixed{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 18% -6%,  rgba(201,162,75,.16), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 8%,   rgba(91,63,134,.18), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 105%, rgba(154,37,48,.10), transparent 60%),
    var(--void);
}

.noise-overlay{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

#emberCanvas{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  width:100%; height:100%;
}

/* ---------- 4. Utilitários ---------- */
.container{ width:100%; max-width:var(--container-w); margin-inline:auto; padding-inline:1.5rem; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-eye);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex; align-items:center; gap:.65em;
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:''; width:1.6em; height:1px; background:var(--gold-dim); flex:none;
}

.section{ position:relative; padding:7.5rem 0; }
.section-alt{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.012) 18%, rgba(255,255,255,.012) 82%, transparent); }
.section-alt::before,
.section-alt::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
.section-alt::before{ top:0; }
.section-alt::after{ bottom:0; }

.section-head{ max-width:680px; margin-bottom:3.4rem; }
.section-title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  font-weight:700;
  color:var(--bone);
  letter-spacing:.01em;
  line-height:1.2;
}
.section-lead{
  margin-top:1rem;
  font-size:var(--fs-lead);
  color:var(--bone-dim);
  max-width:54ch;
}
.center{ text-align:center; margin-inline:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.95em 1.7em;
  border-radius:var(--radius-s);
  border:1px solid var(--line-strong);
  transition:transform .35s var(--ease-out), border-color .35s, box-shadow .35s, color .35s, background .35s;
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:var(--void);
  border-color:transparent;
  box-shadow:0 10px 30px -10px rgba(201,162,75,.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 38px -10px rgba(201,162,75,.7); }
.btn-ghost{ color:var(--bone); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }

/* reveal ao rolar */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }

/* ---------- 5. Loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  background:var(--void);
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.loader-emblem{ width:64px; height:64px; opacity:.92; animation:loaderSpin 2.4s linear infinite; }
.loader-emblem svg{ width:100%; height:100%; }
.loader-text{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.34em;
  color:var(--gold-dim); text-transform:uppercase;
}
.loader-bar{ width:160px; height:2px; background:rgba(255,255,255,.08); overflow:hidden; border-radius:2px; }
.loader-bar span{ display:block; height:100%; width:40%; background:var(--gold); animation:loaderBar 1.1s ease-in-out infinite; }

body.loaded .loader{ opacity:0; visibility:hidden; }

@keyframes loaderSpin{ to{ transform:rotate(360deg); } }
@keyframes loaderBar{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(360%); }
}

/* ---------- 6. Navbar ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.1rem 0;
  transition:padding .35s var(--ease-out), background .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding:.7rem 0;
  background:rgba(7,5,12,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-color:var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.nav-logo{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; letter-spacing:.04em; color:var(--bone);
}
.nav-logo svg{ width:30px; height:30px; flex:none; }
.nav-logo span{ color:var(--gold); }
.nav-logo small{ font-family:var(--font-mono); font-size:.6em; color:var(--bone-dim); margin-left:.15em; }

.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-link{
  position:relative;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone-dim);
  padding:.4rem 0;
  transition:color .3s;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease-out);
}
.nav-link:hover{ color:var(--bone); }
.nav-link.active{ color:var(--gold-soft); }
.nav-link.active::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ display:block; height:2px; background:var(--gold-soft); border-radius:2px; transition:transform .35s var(--ease-out), opacity .35s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:8.5rem 0 5rem;
  text-align:center;
  overflow:hidden;
}
.hero-glow{
  position:absolute; top:-10%; left:50%; width:120vw; max-width:1400px; height:70%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 50% at 50% 30%, rgba(201,162,75,.14), transparent 70%);
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

.hero-emblem{ width:150px; height:150px; margin-bottom:1.6rem; perspective:600px; }
.hero-emblem svg{
  width:100%; height:100%;
  opacity:0; transform:scale(2.4) rotate(-8deg);
  filter:drop-shadow(0 0 0 rgba(201,162,75,0));
}
body.loaded .hero-emblem svg{
  animation:stampIn 1s var(--ease-stamp) .15s forwards;
}
@keyframes stampIn{
  0%{ opacity:0; transform:scale(2.4) rotate(-8deg); filter:drop-shadow(0 0 0 rgba(201,162,75,0)); }
  55%{ opacity:1; transform:scale(.94) rotate(1deg); filter:drop-shadow(0 0 26px rgba(201,162,75,.45)); }
  75%{ transform:scale(1.03) rotate(-.4deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); filter:drop-shadow(0 0 14px rgba(201,162,75,.28)); }
}

.hero-title{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-h1); line-height:1;
  letter-spacing:.01em;
  background:linear-gradient(180deg, var(--gold-soft) 10%, var(--gold) 55%, var(--gold-dim) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(14px);
}
body.loaded .hero-title{ animation:fadeUp .8s var(--ease-out) .55s forwards; }
.hero-title span{ background:linear-gradient(180deg, var(--bone) 10%, var(--bone-dim) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-title sup{ font-size:.32em; top:-1.1em; color:var(--gold-dim); -webkit-text-fill-color:var(--gold-dim); }

.hero-sub{
  margin-top:1.4rem; max-width:46ch; font-size:var(--fs-lead); color:var(--bone-dim);
  opacity:0; transform:translateY(14px);
}
body.loaded .hero-sub{ animation:fadeUp .8s var(--ease-out) .72s forwards; }

.hero-actions{
  margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  opacity:0; transform:translateY(14px);
}
body.loaded .hero-actions{ animation:fadeUp .8s var(--ease-out) .88s forwards; }

.hero-meta{
  margin-top:3.4rem; display:flex; gap:.85rem; flex-wrap:wrap; justify-content:center;
  opacity:0; transform:translateY(14px);
}
body.loaded .hero-meta{ animation:fadeUp .8s var(--ease-out) 1.02s forwards; }

@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

.meta-chip{
  display:flex; flex-direction:column; gap:.2rem;
  padding:.7rem 1.2rem;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  min-width:128px;
}
.meta-label{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); }
.meta-value{ font-family:var(--font-display); font-size:.95rem; color:var(--bone); margin-top:.15rem; }

.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--line-strong); border-radius:14px;
  z-index:1;
}
.scroll-cue span{
  position:absolute; top:6px; left:50%; width:4px; height:4px; margin-left:-2px;
  background:var(--gold); border-radius:50%;
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(14px); }
  71%{ opacity:0; transform:translateY(0); }
  100%{ opacity:1; transform:translateY(0); }
}

/* ---------- 8. Cartões com tilt 3D ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .25s var(--ease-out), box-shadow .25s; will-change:transform; }

/* ---------- 9. Crachás de liderança ---------- */
.badge-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem;
  max-width:840px; margin-inline:auto;
}
.badge-card{
  position:relative;
  background:linear-gradient(165deg, var(--surface), var(--surface-2));
  border:1px solid var(--line); border-radius:var(--radius-m);
  padding:1.8rem 1.7rem 2.1rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75);
}
.badge-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(165deg, var(--line-strong), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.badge-top{ display:flex; align-items:center; justify-content:space-between; }
.badge-id{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; color:var(--bone-faint); }
.badge-stamp{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-soft); border:1px solid var(--gold-dim); border-radius:3px; padding:.2rem .5rem;
  transform:rotate(-4deg);
}
.badge-mark{ width:52px; height:52px; margin:1.5rem auto .9rem; color:var(--gold); }
.badge-role{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-dim); text-align:center;
}
.badge-name{
  font-family:var(--font-display); font-size:1.5rem; text-align:center; color:var(--bone);
  margin-top:.4rem;
}
.badge-name span{ color:var(--gold-dim); font-size:.7em; }
.badge-desc{ text-align:center; font-size:var(--fs-small); color:var(--bone-dim); margin-top:.8rem; line-height:1.65; }

/* ---------- 10. Placas da federação ---------- */
.plaque-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.plaque{
  background:rgba(255,255,255,.018);
  border:1px solid var(--line); border-radius:var(--radius-m);
  padding:2rem 1.6rem;
  position:relative;
}
.plaque-num{ font-family:var(--font-mono); font-size:.72rem; color:var(--gold-dim); letter-spacing:.14em; }
.plaque h3{ font-family:var(--font-display); font-size:1.25rem; color:var(--bone); margin-top:.7rem; }
.plaque p{ margin-top:.7rem; font-size:var(--fs-small); color:var(--bone-dim); line-height:1.7; }
.plaque-icon{ width:34px; height:34px; color:var(--gold); margin-bottom:.4rem; }

/* ---------- 11. Tag oficial ---------- */
.tag-panel{
  max-width:760px; margin-inline:auto;
  background:radial-gradient(circle at 30% 20%, rgba(201,162,75,.08), transparent 60%), var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius-l);
  padding:3rem 2rem; text-align:center;
  position:relative; overflow:hidden;
}
.tag-panel::before{
  content:''; position:absolute; inset:10px; border:1px dashed var(--line-strong); border-radius:calc(var(--radius-l) - 8px);
  pointer-events:none;
}
.tag-stamp{
  font-family:var(--font-mono); font-size:clamp(1.3rem,3vw,2rem); letter-spacing:.04em;
  color:var(--gold-soft);
  padding:.5rem 0;
}
.tag-stamp em{ font-style:normal; color:var(--bone-dim); }
.tag-note{ margin-top:1.1rem; font-size:var(--fs-small); color:var(--bone-dim); max-width:48ch; margin-inline:auto; }
.tag-copy{ margin-top:1.6rem; }

/* ---------- 12. Código da bandeira (linha do tempo) ---------- */
.codex-grid{ position:relative; max-width:880px; margin-inline:auto; }
.codex-grid::before{
  content:''; position:absolute; top:4px; bottom:4px; left:23px;
  width:1px; background:linear-gradient(to bottom, transparent, var(--line-strong) 6%, var(--line-strong) 94%, transparent);
}
.codex-item{ position:relative; padding-left:4.6rem; padding-bottom:2.6rem; }
.codex-item:last-child{ padding-bottom:0; }
.codex-marker{
  position:absolute; left:0; top:0; width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--void-2); border:1px solid var(--gold-dim);
  font-family:var(--font-display); font-size:.92rem; color:var(--gold-soft);
}
.codex-card{
  background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:1.3rem 1.5rem;
}
.codex-card-head{ display:flex; align-items:center; gap:.7rem; }
.codex-icon{ width:20px; height:20px; color:var(--gold); flex:none; }
.codex-card h3{ font-family:var(--font-display); font-size:1.06rem; color:var(--bone); }
.codex-card p{ margin-top:.6rem; font-size:var(--fs-small); color:var(--bone-dim); line-height:1.75; }
.codex-card .tag-sample{ font-family:var(--font-mono); color:var(--gold-soft); }

/* ---------- 13. Proibições ---------- */
.ban-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:3rem; }
.ban-card{
  position:relative; padding:1.9rem 1.5rem 1.7rem;
  background:linear-gradient(165deg, rgba(154,37,48,.07), rgba(255,255,255,.015));
  border:1px solid rgba(154,37,48,.35); border-radius:var(--radius-m);
  text-align:center; overflow:hidden;
}
.ban-stamp{
  display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  color:var(--crimson-soft); border:1px solid var(--crimson); border-radius:3px;
  padding:.25rem .6rem; transform:rotate(-3deg); margin-bottom:1rem;
}
.ban-icon{ width:30px; height:30px; color:var(--crimson-soft); margin:0 auto .9rem; }
.ban-card p{ font-size:var(--fs-small); color:var(--bone-dim); line-height:1.7; }
.ban-card strong{ color:var(--bone); }

.notice-plate{
  max-width:720px; margin-inline:auto; text-align:center;
  padding:2.2rem 2rem; border:1px solid var(--line-strong); border-radius:var(--radius-m);
  background:rgba(255,255,255,.018);
  font-family:var(--font-display); font-size:1.15rem; color:var(--gold-soft); line-height:1.6;
}

/* ---------- 14. Rodapé ---------- */
.footer{ padding:4.5rem 0 2.5rem; border-top:1px solid var(--line); text-align:center; }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.footer-emblem{ width:40px; height:40px; color:var(--gold-dim); margin-bottom:.4rem; }
.footer-title{ font-family:var(--font-display); font-size:1.05rem; color:var(--bone); letter-spacing:.02em; }
.footer-title span{ color:var(--gold-dim); margin:0 .35em; }
.footer-sub{ font-size:var(--fs-small); color:var(--bone-dim); }
.footer-copy{ font-family:var(--font-mono); font-size:.72rem; color:var(--bone-faint); margin-top:.6rem; }

/* ---------- 15. Toast ---------- */
.toast{
  position:fixed; bottom:1.6rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gold-soft); color:var(--void);
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em;
  padding:.75rem 1.3rem; border-radius:var(--radius-s);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  z-index:300;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =================================================================
   RESPONSIVO
   ================================================================= */
@media (max-width:880px){
  .badge-grid{ grid-template-columns:1fr; max-width:420px; }
  .plaque-grid{ grid-template-columns:1fr; }
  .ban-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .section{ padding:5.5rem 0; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    flex-direction:column; justify-content:center; gap:2.2rem;
    background:rgba(10,8,16,.97); backdrop-filter:blur(18px);
    border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .45s var(--ease-out);
    padding:2rem;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-link{ font-size:.95rem; }
  .hero{ padding:7.5rem 0 4rem; }
  .hero-emblem{ width:118px; height:118px; }
  .hero-meta{ gap:.6rem; }
  .meta-chip{ min-width:100px; padding:.6rem .9rem; }
}

@media (max-width:520px){
  .hero-actions{ flex-direction:column; width:100%; }
  .hero-actions .btn{ width:100%; }
  .tag-stamp{ font-size:1.15rem; word-break:break-word; }
}

/* movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  body.loaded .hero-emblem svg,
  body.loaded .hero-title,
  body.loaded .hero-sub,
  body.loaded .hero-actions,
  body.loaded .hero-meta{ opacity:1; transform:none; }
}