/* =============================================================
   GALOPÊRA — premium.css
   Camada de REDESIGN VISUAL (Awwwards / agência de tech).
   Carregada SÓ em index.html e sites-24h.html, DEPOIS de style.css.
   Não renomeia nem remove nenhum seletor da integração — só estiliza.
   ============================================================= */

/* ---------- 1. Tipografia autoral ---------- */
:root {
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  /* corpo continua Plus Jakarta Sans (legível, já carregado) */

  /* Aurora / mesh (verde-esmeralda + preto-petróleo) */
  --petrol-950: #050d0a;
  --petrol-900: #071310;
  --em-600: #0d7a45;
  --em-500: #16a34a;
  --em-400: #22c07a;
  --em-glow: rgba(34, 197, 122, 0.55);
}

/* Títulos em display font, peso mais leve e tracking negativo (sofisticação) */
h1, h2, h3,
.hero h1, .section-head h2, .s24-promo h2, .cta-final h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
}
.hero h1 {
  font-weight: 500;
  font-size: clamp(38px, 7.2vw, 74px);
  letter-spacing: -0.035em;
}
.hero .sub, .s-hero .sub { font-size: clamp(16px, 2.3vw, 20px); line-height: 1.6; color: var(--text-soft); }
/* Eyebrow mais refinado (versalete espaçado) */
.eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
}
.text-grad, .text-grad * {
  background: linear-gradient(100deg, var(--em-400) 0%, var(--green-200) 45%, #cfeee0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 2. Fundo Aurora + Grain (profundidade) ---------- */
html { background: var(--petrol-950); }
body { background: transparent; position: relative; }

/* aurora: blobs esmeralda que se movem lentamente, atrás de tudo */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% -10% -10%;
  z-index: -10;
  background:
    radial-gradient(38% 42% at 78% 8%, rgba(34, 192, 122, 0.30), transparent 60%),
    radial-gradient(34% 40% at 12% 22%, rgba(22, 163, 74, 0.22), transparent 62%),
    radial-gradient(46% 50% at 88% 82%, rgba(13, 122, 69, 0.26), transparent 60%),
    radial-gradient(40% 44% at 20% 92%, rgba(46, 196, 95, 0.14), transparent 64%),
    linear-gradient(180deg, var(--petrol-900), var(--petrol-950));
  filter: saturate(1.15);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}
/* grain / noise: textura sutil por cima do fundo (nunca sobre o texto forte) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -9;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- 3. Hero FX: foguete subindo + estrelas em parallax ---------- */
.hero { isolation: isolate; }               /* cria contexto de empilhamento próprio */
.hero > .container { position: relative; z-index: 2; }  /* conteúdo sempre acima do FX */
.hero-fx {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
/* estrelas (2 camadas de pontos que sobem devagar, sensação de crescimento) */
.fx-stars, .fx-stars::before {
  content: ""; position: absolute; inset: -50% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(215, 247, 221, 0.9), transparent),
    radial-gradient(1.2px 1.2px at 65% 70%, rgba(143, 232, 154, 0.8), transparent),
    radial-gradient(1.6px 1.6px at 80% 20%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 40% 85%, rgba(143, 232, 154, 0.7), transparent),
    radial-gradient(1.3px 1.3px at 92% 55%, rgba(215, 247, 221, 0.6), transparent),
    radial-gradient(1px 1px at 8% 60%, rgba(255, 255, 255, 0.6), transparent);
  background-size: 320px 320px;
  animation: starRise 26s linear infinite;
  opacity: 0.55;
}
.fx-stars::before { background-size: 200px 200px; animation-duration: 40s; opacity: 0.6; }
@keyframes starRise { from { transform: translateY(0); } to { transform: translateY(-320px); } }

/* foguete estilizado subindo em diagonal, bem sutil, atrás do texto */
.fx-rocket {
  position: absolute;
  left: 8%; bottom: -60px;
  width: clamp(70px, 9vw, 120px);
  opacity: 0.5;
  filter: drop-shadow(0 0 22px var(--em-glow));
  animation: rocketRise 22s ease-in-out infinite;
}
.fx-rocket .flame { transform-origin: 40px 118px; animation: flame 0.28s steps(2) infinite; }
@keyframes rocketRise {
  0%   { transform: translate(0, 0) rotate(8deg); opacity: 0; }
  12%  { opacity: 0.5; }
  50%  { transform: translate(46vw, -78vh) rotate(12deg); opacity: 0.5; }
  70%  { opacity: 0; }
  100% { transform: translate(70vw, -120vh) rotate(14deg); opacity: 0; }
}
@keyframes flame { 0% { transform: scaleY(1); } 100% { transform: scaleY(0.7); } }

/* ---------- 4. Micro-interações premium ---------- */
/* Botões: leve elevação + brilho + gradiente vivo */
.btn { transition: transform 0.22s cubic-bezier(.2,.7,.3,1), box-shadow 0.22s, background 0.3s, border-color 0.22s; will-change: transform; }
.btn-primary {
  background: linear-gradient(120deg, var(--em-400), var(--em-600));
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.28);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(34, 197, 122, 0.42), 0 0 0 1px rgba(143, 232, 154, 0.35) inset;
  filter: brightness(1.05);
}
.btn-ghost { transition: transform 0.22s, border-color 0.22s, color 0.22s, background 0.22s; }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--border-strong); }

/* Cards com vidro + realce no hover */
.card {
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  backdrop-filter: blur(6px);
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), border-color 0.25s, box-shadow 0.25s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border-strong);
  box-shadow: 0 20px 44px rgba(0,0,0,0.4), 0 0 40px -12px var(--em-glow);
}
/* brilho suave no card ao passar o mouse */
.card .ic { transition: transform 0.25s, color 0.25s; }
.card:hover .ic { transform: scale(1.08) translateY(-1px); }

/* Topbar com vidro mais profundo ao rolar */
.topbar.scrolled { background: rgba(6, 15, 11, 0.7); backdrop-filter: blur(20px) saturate(1.4); border-bottom-color: var(--border-strong); }

/* Portfólio (sites-24h) e promo com hover mais rico */
.port-item img { transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s, border-color 0.3s; }
.s24-promo { box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6), 0 0 60px -30px var(--em-glow); }

/* Preço em destaque com a display font */
.price-card .big, .s-price-badge b, #homeS24Price, #heroPrice, #priceBig, #formPrice {
  font-family: var(--font-display); letter-spacing: -0.02em;
}

/* Refino de seções */
.section-head h2 { font-size: clamp(28px, 4.6vw, 46px); }
.section-head p { color: var(--text-soft); }

/* ---------- 5. Acessibilidade / performance ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, .fx-stars, .fx-stars::before, .fx-rocket, .fx-rocket .flame { animation: none !important; }
  .fx-rocket { opacity: 0.35; transform: translate(20vw, -30vh); }
}
/* Em telas pequenas, foguete some mais cedo p/ não competir com o texto; estrelas mantêm o clima */
@media (max-width: 720px) {
  .fx-rocket { left: 4%; width: 66px; opacity: 0.4; }
  body::before { animation-duration: 34s; }
}