/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE DESIGN — NÃO EDITAR
   Todas as variáveis abaixo derivam automaticamente do tema acima.
   Ao mudar o tema, este bloco inteiro se atualiza sozinho.
   ═══════════════════════════════════════════════════════════════ */
:root {

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

  /* ── Fundos ─────────────────────────────────────────────── */
  --color-bg:      #020412;
  --color-surface: #f8fafc;

  /* ── Texto ──────────────────────────────────────────────── */
  --color-text:       #0f172a;
  --color-text-muted: #94a3b8;
  --color-text-sub:   #475569;

  /* ── Sucesso ────────────────────────────────────────────── */
  --color-success: #34d399;

  /* ── Grid decorativo ────────────────────────────────────── */
  --grid-size:  32px;
  --grid-color: rgba(0,0,0,.04);

  /* ── Cor primária — derivada do tema ─────────────────────
     Todas as variantes de opacidade usam --theme-primary-rgb,
     então mudar os R,G,B no tema atualiza tudo aqui.          */
  --color-primary:       var(--theme-primary);
  --color-primary-light: var(--theme-primary-light);
  --color-primary-pale:  var(--theme-primary-pale);
  --color-primary-a04:   rgba(var(--theme-primary-rgb), .04);
  --color-primary-a12:   rgba(var(--theme-primary-rgb), .12);
  --color-primary-a15:   rgba(var(--theme-primary-rgb), .15);
  --color-primary-a20:   rgba(var(--theme-primary-rgb), .20);
  --color-primary-a25:   rgba(var(--theme-primary-rgb), .25);
  --color-primary-a30:   rgba(var(--theme-primary-rgb), .30);
  --color-primary-a35:   rgba(var(--theme-primary-rgb), .35);
  --color-primary-a40:   rgba(var(--theme-primary-rgb), .40);
  --color-primary-a50:   rgba(var(--theme-primary-rgb), .50);

  /* ── Cor de acento — derivada do tema ───────────────────── */
  --color-accent:       var(--theme-accent);
  --color-accent-light: var(--theme-accent-light);
  --color-accent-pale:  var(--theme-accent-pale);

  /* ── Gradientes de texto — derivados do tema ────────────── */
  --gradient-text-from: var(--theme-primary-dark);
  --gradient-text-via:  var(--theme-primary);
  --gradient-text-to:   var(--theme-accent);
  --gradient-hero-from: var(--theme-primary-pale);
  --gradient-hero-mid:  #ffffff;
  --gradient-hero-to:   var(--theme-accent-light);
  --gradient-year-from: var(--theme-accent-light);
  --gradient-year-to:   var(--theme-primary-pale);

  /* ── Botão primário — derivado do tema ──────────────────── */
  --btn-primary-from:     var(--theme-primary-dark);
  --btn-primary-to:       var(--theme-primary);
  --btn-primary-from-h:   var(--theme-primary);
  --btn-primary-to-h:     var(--theme-accent-dark);
  --btn-primary-color:    #ffffff;
  --btn-primary-shadow:   rgba(var(--theme-primary-rgb), .45);
  --btn-primary-shadow-h: rgba(var(--theme-primary-rgb), .65);

  /* ── Botão sólido — derivado do tema ────────────────────── */
  --btn-solid-bg:       var(--theme-primary-dark);
  --btn-solid-bg-h:     var(--theme-primary);
  --btn-solid-color:    #ffffff;
  --btn-solid-shadow:   rgba(var(--theme-primary-rgb), .40);
  --btn-solid-shadow-h: rgba(var(--theme-primary-rgb), .60);

  /* ── Botão escuro (fixo, igual em todas as regiões) ─────── */
  --btn-dark-bg:    #0f172a;
  --btn-dark-bg-h:  #1e293b;
  --btn-dark-color: #ffffff;

  /* ── Botão ghost (fixo, igual em todas as regiões) ─────── */
  --btn-ghost-bg:      rgba(255,255,255,.05);
  --btn-ghost-bg-h:    rgba(255,255,255,.10);
  --btn-ghost-border:  rgba(255,255,255,.10);
  --btn-ghost-color:   #cbd5e1;
  --btn-ghost-color-h: #ffffff;

  /* ── Botão inverso (fixo, igual em todas as regiões) ────── */
  --btn-inverse-bg:       #ffffff;
  --btn-inverse-bg-h:     #f8fafc;
  --btn-inverse-color:    #0f172a;
  --btn-inverse-shadow:   rgba(255,255,255,.20);
  --btn-inverse-shadow-h: rgba(255,255,255,.30);

  /* ── Durações de animação (fixas) ───────────────────────── */
  --dur-intro:      1.2s;
  --dur-reveal:     .75s;
  --dur-reveal-x:   .80s;
  --dur-reflection: 6s;
  --dur-shimmer:    5s;
  --dur-marquee:    18s;
  --dur-scanline:   5s;
  --dur-sonar:      2s;
  --dur-btn-shine:  3.5s;

}

/* ── GRADIENT TEXT HELPERS ──────────────────────────── */
/* 2 paradas: títulos de seções ("começa aqui", "Modernization 2026"…) */
.text-gradient {
  background: linear-gradient(to right, var(--gradient-text-from), var(--gradient-text-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 3 paradas: "O que você encontra no Mainframe Modernization 2026" */
.text-gradient-3 {
  background: linear-gradient(to right, var(--gradient-text-from), var(--gradient-text-via), var(--gradient-text-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Hero "Modernization" */
.text-gradient-hero {
  background: linear-gradient(to right, var(--gradient-hero-from), var(--gradient-hero-mid), var(--gradient-hero-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Hero "2026" */
.text-gradient-year {
  background: linear-gradient(to right, var(--gradient-year-from), var(--gradient-year-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── BASE ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background-color: var(--color-surface);
  color: var(--color-text);
  overflow-x: hidden;
}

.font-manrope { font-family: var(--font-body) !important; }

/* ── ANIMATIONS ──────────────────────────────────────── */

@keyframes clipReveal {
  0%   { opacity: 0; transform: translateY(28px) scale(0.97); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0)     scale(1);    filter: blur(0); }
}
.animate-intro { animation: clipReveal var(--dur-intro) cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-intro-d1 { animation-delay: .15s; }
.animate-intro-d2 { animation-delay: .30s; }
.animate-intro-d3 { animation-delay: .45s; }
.animate-intro-d4 { animation-delay: .60s; }
.animate-intro-d5 { animation-delay: .75s; }
.animate-intro-d6 { animation-delay: .90s; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-reveal) cubic-bezier(0.16,1,.3,1),
              transform  var(--dur-reveal) cubic-bezier(0.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left  { opacity: 0; transform: translateX(-32px); transition: opacity var(--dur-reveal-x) cubic-bezier(0.16,1,.3,1), transform var(--dur-reveal-x) cubic-bezier(0.16,1,.3,1); }
.reveal-right { opacity: 0; transform: translateX(32px);  transition: opacity var(--dur-reveal-x) cubic-bezier(0.16,1,.3,1), transform var(--dur-reveal-x) cubic-bezier(0.16,1,.3,1); }
.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Aurora */
@keyframes aurora-move {
  0%   { background-position: 0% 50%;   transform: scale(1); }
  50%  { background-position: 100% 50%; transform: scale(1.12); }
  100% { background-position: 0% 50%;   transform: scale(1); }
}

/* Reflection sweep */
@keyframes reflection-loop {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.title-reflection {
  background: linear-gradient(110deg, #ffffff 45%, var(--color-accent-pale) 50%, #ffffff 55%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reflection-loop var(--dur-reflection) ease-in-out infinite;
}

/* Shimmer */
@keyframes shimmer {
  to { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(to right, var(--color-text-muted) 20%, var(--color-surface) 50%, var(--color-text-muted) 80%);
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shimmer var(--dur-shimmer) linear infinite;
}

/* Float */
@keyframes float-slow    { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-10px)} }
@keyframes float-delayed { 0%,100%{transform:translateY(0)}   50%{transform:translateY(-8px)} }
@keyframes float-reverse { 0%,100%{transform:translateY(0)}   50%{transform:translateY(6px)} }
.animate-float-slow    { animation: float-slow    6s ease-in-out infinite; }
.animate-float-delayed { animation: float-delayed 7s ease-in-out infinite 1s; }
.animate-float-reverse { animation: float-reverse 8s ease-in-out infinite; }

/* Noodle dash */
@keyframes dash { to { stroke-dashoffset: 0; } }
.noodle-path {
  stroke-dasharray: 10;
  stroke-dashoffset: 200;
  animation: dash 2s linear infinite;
}

/* Sonar */
@keyframes sonar {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(3); opacity: 0; }
}
.sonar-emitter { position: relative; }
.sonar-emitter::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: inherit;
  z-index: -1;
  animation: sonar var(--dur-sonar) infinite cubic-bezier(0,0,0.2,1);
}

/* Blink (map dots) */
@keyframes blink-random {
  0%,100%{ opacity:.3; transform:scale(.8); }
  50%    { opacity:1;  transform:scale(1.1); }
}
.animate-blink-1 { animation: blink-random 3s   infinite ease-in-out 0s; }
.animate-blink-2 { animation: blink-random 4s   infinite ease-in-out 1s; }
.animate-blink-3 { animation: blink-random 3.5s infinite ease-in-out .5s; }

/* Number counter roll */
@keyframes numberRoll { from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1} }
.number-roll { animation: numberRoll .4s cubic-bezier(.16,1,.3,1) both; }

/* Pulse glow */
@keyframes pulse-glow {
  0%,100%{ box-shadow: 0 0 0 0 var(--color-primary-a50); }
  50%    { box-shadow: 0 0 30px 10px var(--color-primary-a15); }
}
.pulse-glow { animation: pulse-glow 3s ease-in-out infinite; }

/* Grid scan line */
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
.scan-line {
  position: absolute;
  left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary-a40), transparent);
  animation: scanline var(--dur-scanline) linear infinite;
  pointer-events: none;
}

/* Gradient border beam */
@keyframes border-spin {
  to { --angle: 360deg; }
}

/* ── FLASHLIGHT CARD ─────────────────────────────── */
.flashlight-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.07);
}
.flashlight-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x,0px) var(--mouse-y,0px),
    rgba(255,255,255,.06), transparent 40%);
  z-index: 1; opacity: 0;
  transition: opacity .3s; pointer-events: none;
}
.flashlight-card:hover::before { opacity: 1; }
.flashlight-card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mouse-x,0px) var(--mouse-y,0px),
    var(--color-primary-a35), transparent 40%);
  z-index: 2; opacity: 0; transition: opacity .3s; pointer-events: none;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude; -webkit-mask-composite: xor;
  padding: 1px; border-radius: inherit;
}
.flashlight-card:hover::after { opacity: 1; }

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 3px; }

/* ── COUNTDOWN ───────────────────────────────────── */
.countdown-digit {
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  font-family: var(--font-body);
}

/* ── NAV ─────────────────────────────────────────── */
#navbar {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  transition: background .3s, border-color .3s;
}
#navbar.scrolled { background: rgba(255,255,255,.95); backdrop-filter: blur(20px); border-bottom-color: rgba(0,0,0,.08) !important; }
#navbar.scrolled #logo-light { display: none; }
#navbar.scrolled #logo-dark  { display: block; }
#navbar.scrolled .underline-hover { color: var(--color-text-sub); }
#navbar.scrolled .underline-hover:hover { color: var(--color-text); }
#navbar.scrolled #mobile-btn { color: var(--color-text-sub); }

/* ── HERO BACKGROUND ─────────────────────────────── */
.hero-bg-img {
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center center;
  filter: var(--hero-filter);
}

/* ── SECTION DECORATIVE GRID ─────────────────────── */
.section-grid {
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

/* ── SPONSOR MARQUEE ─────────────────────────────── */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.animate-marquee { animation: marquee var(--dur-marquee) linear infinite; }

/* ── SECTION TRANSITIONS ─────────────────────────── */
section { position: relative; }

/* gradient divider */
.section-fade-top::before {
  content:''; position:absolute; top:0; left:0; right:0; height:80px;
  background: linear-gradient(to bottom, var(--color-surface), transparent);
  z-index: 1; pointer-events:none;
}
.section-fade-bottom::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:80px;
  background: linear-gradient(to top, var(--color-surface), transparent);
  z-index: 1; pointer-events:none;
}

/* ── BENEFIT ICON WRAPPER ────────────────────────── */
.benefit-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary-a12);
  border: 1px solid var(--color-primary-a25);
  color: var(--color-primary-light);
  transition: all .3s;
}
.flashlight-card:hover .benefit-icon {
  background: var(--color-primary-a20);
  border-color: var(--color-primary-a40);
  color: var(--color-primary-pale);
}

/* ── CITY TAG ────────────────────────────────────── */
@keyframes city-glow {
  0%,100%{opacity:.7} 50%{opacity:1}
}
.city-glow { animation: city-glow 3s ease-in-out infinite; }

/* ── BUTTON SHINE ────────────────────────────────── */
@keyframes btn-shine {
  0%   { left: -100%; }
  60%  { left: 125%; }
  100% { left: 125%; }
}
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  animation: btn-shine var(--dur-btn-shine) ease-in-out infinite 1s;
}

/* ── BOTÕES ──────────────────────────────────────── */

/* Base compartilhada entre todos os botões */
.btn-primary, .btn-solid, .btn-dark, .btn-ghost, .btn-inverse {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 9999px;
  text-decoration: none;
  transition: all .3s;
  white-space: nowrap;
}

/* Primário — gradiente indigo→cyan com glow */
.btn-primary {
  color: var(--btn-primary-color);
  background: linear-gradient(to right, var(--btn-primary-from), var(--btn-primary-to));
  box-shadow: 0 0 30px var(--btn-primary-shadow);
  transition-duration: .5s;
}
.btn-primary:hover {
  background: linear-gradient(to right, var(--btn-primary-from-h), var(--btn-primary-to-h));
  box-shadow: 0 0 50px var(--btn-primary-shadow-h);
}

/* Sólido — nav, cor sólida sem gradiente */
.btn-solid {
  color: var(--btn-solid-color);
  background: var(--btn-solid-bg);
  box-shadow: 0 0 20px var(--btn-solid-shadow);
  font-weight: 500;
}
.btn-solid:hover {
  background: var(--btn-solid-bg-h);
  box-shadow: 0 0 30px var(--btn-solid-shadow-h);
}

/* Escuro — countdown "Ver detalhes" */
.btn-dark {
  color: var(--btn-dark-color);
  background: var(--btn-dark-bg);
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}
.btn-dark:hover { background: var(--btn-dark-bg-h); }

/* Ghost — botão secundário em fundos escuros */
.btn-ghost {
  color: var(--btn-ghost-color);
  background: var(--btn-ghost-bg);
  border: 1px solid var(--btn-ghost-border);
  font-weight: 500;
}
.btn-ghost:hover {
  background: var(--btn-ghost-bg-h);
  color: var(--btn-ghost-color-h);
}

/* Inverso — CTA final, fundo claro sobre dark background */
.btn-inverse {
  color: var(--btn-inverse-color);
  background: var(--btn-inverse-bg);
  box-shadow: 0 0 40px var(--btn-inverse-shadow);
}
.btn-inverse:hover {
  background: var(--btn-inverse-bg-h);
  box-shadow: 0 0 60px var(--btn-inverse-shadow-h);
}

/* ── AMBIENT ORBS ────────────────────────────────── */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

/* ── INFO CARDS ──────────────────────────────────── */
.info-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .3s, background .3s;
}
.info-card:hover {
  border-color: var(--color-primary-a30);
  background: var(--color-primary-a04);
}

/* ── IMAGE REVEAL ────────────────────────────────── */
.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.16,1,.3,1);
}
.img-reveal.visible { clip-path: inset(0 0% 0 0); }

/* ── UNDERLINE HOVER ─────────────────────────────── */
.underline-hover {
  position: relative;
}
.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.underline-hover:hover::after { transform: scaleX(1); }

/* ── DATA STREAM PARTICLES ───────────────────────── */
@keyframes stream-flow {
  0%   { transform: translateY(0)   scaleY(0); opacity: 0; }
  10%  { opacity: 1; scaleY: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120px) scaleY(1); opacity: 0; }
}
.data-stream {
  animation: stream-flow var(--dur,4s) ease-in-out infinite var(--delay,0s);
}