/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,canvas,svg,video{display:block;max-width:100%}
button,input,a{font:inherit;color:inherit}
ul,ol{list-style:none}
a{text-decoration:none}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--amber-soft);color:var(--text)}

/* ambiente sutil: glow radial quente + grao levissimo (tira o preto chapado) */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(80% 55% at 78% -5%, rgba(214,161,94,.05), transparent 60%),
    radial-gradient(70% 50% at 8% 108%, rgba(214,161,94,.035), transparent 62%);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.035;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{position:relative;z-index:1}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad-x);
  width:100%;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-micro);
  letter-spacing:var(--tracking-micro);
  text-transform:uppercase;
  color:var(--amber);
  font-weight:500;
}

/* botao */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.85em 1.4em;
  border:1px solid var(--hairline-amber);
  border-radius:var(--radius);
  color:var(--text);
  background:transparent;
  cursor:pointer;
  line-height:1;
  transition:border-color var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out);
  will-change:transform;
}
.btn__arrow{
  color:var(--amber);
  transition:transform var(--dur-fast) var(--ease-out);
}
.btn:hover{border-color:var(--amber);background:var(--amber-soft)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

.btn--ghost{
  padding:.6em 1em;
  font-size:.9rem;
}
.btn--ghost:hover{background:transparent;border-color:var(--amber)}

/* reveal (estado inicial p/ o JS animar) */
.reveal{opacity:0;transform:translateY(var(--reveal-y))}

/* fallback sem JS: nada fica invisivel */
.no-js .reveal{opacity:1;transform:none}
.no-js .hero__title{opacity:1}
.no-js .fan-card{opacity:1!important;transform:translate(-50%,-50%) translateX(var(--tx,0px)) rotate(var(--rot,0deg)) translateY(var(--ty,0px))!important}

/* reduced-motion global */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .hero__title{opacity:1!important}
}