/* =========================================================================
   Drifin — estilos gerais da página (extraídos do projeto original)
   ========================================================================= */

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Com JS ativo, a rolagem suave dos links é feita em js/site.js: o scroll-behavior
   no <html> atrapalha os cálculos do GSAP ScrollTrigger. */
html.df-js { scroll-behavior: auto; }
body { margin:0; background:#05070A; color:#EDEFF2; font-family:Manrope,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection { background:#F5A623; color:#05070A; }
img { max-width:100%; display:block; }
a { color:#F5A623; text-decoration:none; }
a:hover { color:#FFC46B; }
[data-reveal] { opacity:0; transform:translate3d(0,26px,0); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1); }
[data-reveal][data-shown] { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1 !important; transform:none !important; } }
@keyframes dfPulse { 0%{transform:scale(1);opacity:.9} 70%,100%{transform:scale(2.6);opacity:0} }
@keyframes dfCue { 0%{transform:scaleX(0)} 42%{transform:scaleX(1)} 100%{transform:scaleX(1) translateX(100%)} }

/* Hover (antes em style-hover, que o runtime não aplicava) */
[data-hover="hv0"]:hover{color:#EDEFF2 !important}
[data-hover="hv1"]:hover{background:#FFC46B !important}
[data-hover="hv2"]:hover{background:#0B0E13 !important}
[data-hover="hv3"]:hover{background:#FFC46B !important;transform:translateY(-2px) !important}
[data-hover="hv4"]:hover{color:#F5A623 !important}

/* Cabeçalho no celular: o subtítulo da marca encostava no menu */
@media (max-width: 480px) {
  header { gap: 12px !important; }
  header a[href="#topo"] i { display: none; }
  header a[href="#topo"] { flex: none; gap: 8px !important; }
  header a[href="#topo"] b { letter-spacing: .18em !important; }
  header nav { gap: 9px !important; }
  header nav a { letter-spacing: .06em !important; font-size: 9px !important; }
  header nav a[href*="play.google"] { font-size: 12px !important; padding: 8px 12px !important; gap: 6px !important; letter-spacing: 0 !important; }
}
@media (max-width: 360px) {
  header nav a[href="#premium"] { display: none !important; }
}

/* ---------- Fundo de mapa visível por trás das seções ---------- */
.df-page > section:not(#topo) { background: rgba(5,7,10,.62) !important; }
.df-page > section#premium { background: linear-gradient(180deg, rgba(5,7,10,.62), rgba(12,9,3,.74) 46%, rgba(5,7,10,.62)) !important; }
.df-page > section#fim { background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(245,166,35,.16), transparent 70%), rgba(5,7,10,.62) !important; }
.df-page > footer { background: rgba(5,7,10,.88) !important; }
.df-page [style*="background:#05070A;padding"] { background: rgba(5,7,10,.84) !important; }

/* ---------- Telas em leque ---------- */
.df-fan {
  --w: clamp(112px, 29vw, 190px);
  --h: calc(var(--w) * 2.2229);
  position: relative;
  height: calc(var(--h) + var(--w) * .42);
  overflow: hidden;
}
.df-fan-deck {
  position: absolute;
  top: 12px;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
}
.df-fan-card {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: calc(var(--w) * .1);
  overflow: hidden;
  background: #090B0D;
  outline: 1px solid rgba(237,239,242,.16);
  outline-offset: -1px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.95);
  transform-origin: 50% 115%;
  transition: box-shadow .3s ease;
  will-change: transform;
  cursor: pointer;
}
.df-fan-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.df-fan-card:focus-visible { outline: 2px solid #F5A623; outline-offset: 2px; }
.df-fan-labels {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8a93a1;
}
.df-fan-labels li { display: flex; gap: 7px; cursor: pointer; padding: 4px 0; }
.df-fan-labels li span { color: #F5A623; }
.df-fan-labels li.on { color: #EDEFF2; }