:root {
  --bg: #05060f;
  --cyan: #00f0ff;
  --pink: #ff2bd6;
  --violet: #7a5cff;
  --text: #cfe8ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: radial-gradient(ellipse at 50% 30%, #0c1030 0%, var(--bg) 65%);
  color: var(--text);
  font-family: 'Rajdhani', system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- fundo ---------- */
.grid {
  position: fixed;
  inset: -50% -50% 0 -50%;
  top: 40%;
  background-image:
    linear-gradient(rgba(0,240,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.25) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(500px) rotateX(65deg);
  transform-origin: top;
  animation: gridMove 3s linear infinite;
  mask-image: linear-gradient(to bottom, transparent, #000 40%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
  z-index: 0;
}
@keyframes gridMove { to { background-position: 0 60px; } }

.glow {
  position: fixed;
  width: 45vmax; height: 45vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .28;
  z-index: 0;
  animation: drift 14s ease-in-out infinite alternate;
}
.glow-a { background: var(--cyan); top: -15vmax; left: -10vmax; }
.glow-b { background: var(--pink); bottom: -18vmax; right: -12vmax; animation-delay: -7s; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.15); } }

.scan {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.scan::after {
  content: ''; position: absolute; left: 0; right: 0; height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(0,240,255,.07), transparent);
  animation: scan 6s linear infinite;
}
@keyframes scan { from { top: -120px; } to { top: 100%; } }

/* ---------- conteúdo ---------- */
.hero {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  gap: 1.2rem;
}

.brand {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  letter-spacing: .3em;
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan), 0 0 24px var(--cyan);
  animation: flicker 5s infinite;
}
.brand span { color: var(--pink); text-shadow: 0 0 8px var(--pink), 0 0 24px var(--pink); font-weight: 500; }

@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .35; }
}

/* ---------- ampulheta ---------- */
.hourglass {
  width: clamp(150px, 26vw, 240px);
  animation: float 5s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(0,240,255,.55));
}
.hourglass svg { width: 100%; height: auto; overflow: visible; }
@keyframes float { 50% { transform: translateY(-14px); } }

.halo { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.sand-top    { animation: topSand 7s linear infinite; }
.sand-bottom { animation: bottomSand 7s linear infinite; }
.stream      { stroke-dasharray: 3 5; animation: fall .4s linear infinite, streamOn 7s linear infinite; filter: drop-shadow(0 0 3px #00f0ff); }

@keyframes topSand {
  0%   { transform: translateY(0); opacity: 1; }
  92%  { transform: translateY(88px); opacity: 1; }
  100% { transform: translateY(88px); opacity: 0; }
}
@keyframes bottomSand {
  0%   { transform: translateY(90px); opacity: 1; }
  92%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes fall { to { stroke-dashoffset: -8; } }
@keyframes streamOn {
  0%, 90% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.circuit path { stroke-dasharray: 60; animation: trace 3s ease-in-out infinite alternate; }
@keyframes trace { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }

.ring {
  transform-origin: 100px 150px;
  animation: spin 8s linear infinite;
  filter: drop-shadow(0 0 4px var(--violet));
}
@keyframes spin { to { transform: rotate(360deg) scaleY(1); stroke-dashoffset: -96; } }

/* ---------- EM BREVE ---------- */
.soon {
  position: relative;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 9vw, 6rem);
  letter-spacing: .18em;
  padding-left: .18em;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--cyan),
    0 0 32px var(--cyan),
    0 0 70px var(--pink);
  animation: neon 3s ease-in-out infinite alternate;
}
.soon::before, .soon::after {
  content: attr(data-text);
  position: absolute; inset: 0; padding-left: .18em;
  overflow: hidden;
}
.soon::before { color: var(--cyan); text-shadow: none; animation: glitchA 4s infinite steps(1); }
.soon::after  { color: var(--pink); text-shadow: none; animation: glitchB 4s infinite steps(1); }

@keyframes neon {
  from { text-shadow: 0 0 4px #fff, 0 0 10px var(--cyan), 0 0 22px var(--cyan), 0 0 50px var(--pink); }
  to   { text-shadow: 0 0 8px #fff, 0 0 20px var(--cyan), 0 0 44px var(--cyan), 0 0 90px var(--pink); }
}
@keyframes glitchA {
  0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  93% { clip-path: inset(10% 0 60% 0); transform: translate(-4px, 0); }
  96% { clip-path: inset(55% 0 15% 0); transform: translate(4px, 0); }
}
@keyframes glitchB {
  0%, 92%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  94% { clip-path: inset(40% 0 30% 0); transform: translate(4px, 0); }
  97% { clip-path: inset(5% 0 75% 0); transform: translate(-4px, 0); }
}

.tagline {
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: .12em;
  color: var(--text);
  opacity: .85;
}
.cursor { color: var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* barra de carregamento */
.bar {
  width: min(320px, 70vw); height: 6px;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(0,240,255,.5), inset 0 0 8px rgba(0,240,255,.3);
  overflow: hidden;
}
.bar i {
  display: block; height: 100%; width: 40%;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 14px var(--cyan);
  animation: load 2.4s ease-in-out infinite alternate;
}
@keyframes load { from { transform: translateX(-5%); } to { transform: translateX(150%); } }

footer {
  position: relative; z-index: 2;
  text-align: center;
  padding: 1rem;
  font-size: .85rem;
  letter-spacing: .2em;
  color: rgba(207,232,255,.45);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}