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

:root {
  --bg: #0b0f14;
  --card: rgba(15, 20, 28, 0.92);
  --line: rgba(255, 255, 255, 0.08);
  --text: #e8eef7;
  --muted: #93a4b7;
  --accent: #5ee7ff;
  --accent-strong: #28c8ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --radius: 20px;
}

html {
  scrollbar-color: var(--accent) transparent;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(94, 231, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #0a0d12, var(--bg));
  overflow: hidden;
  position: relative;
}

/* Partículas */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  width: 3px;
  height: 3px;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  box-shadow:
    8vw 12vh var(--accent),
    18vw 68vh rgba(94, 231, 255, 0.7),
    26vw 24vh rgba(94, 231, 255, 0.45),
    39vw 82vh rgba(94, 231, 255, 0.55),
    51vw 18vh rgba(94, 231, 255, 0.4),
    63vw 72vh rgba(94, 231, 255, 0.6),
    74vw 30vh rgba(94, 231, 255, 0.5),
    86vw 78vh rgba(94, 231, 255, 0.45),
    92vw 16vh rgba(94, 231, 255, 0.35),
    12vw 44vh rgba(94, 231, 255, 0.3),
    47vw 52vh rgba(94, 231, 255, 0.35),
    58vw 8vh rgba(94, 231, 255, 0.25);
  animation: floatParticles 18s linear infinite;
  filter: blur(0.2px);
}

body::after {
  background:
    radial-gradient(circle at 30% 20%, rgba(94, 231, 255, 0.09), transparent 18%),
    radial-gradient(circle at 70% 80%, rgba(40, 200, 255, 0.06), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03), transparent 40%);
  filter: blur(45px);
  opacity: 0.9;
  animation: pulseGlow 7s ease-in-out infinite alternate;
}

/* Card */
main {
  width: min(100%, 460px);
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

main::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(94, 231, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

main:has(input:focus-visible) {
  transform: translateY(-2px);
  border-color: rgba(94, 231, 255, 0.22);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

h1 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.04em;
  margin-bottom: 1.4rem;
}

/* Form */
form {
  display: flex;
  gap: 0.75rem;
}

input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 12, 18, 0.95);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

input::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

input:hover {
  border-color: rgba(94, 231, 255, 0.18);
}

input:focus-visible {
  border-color: rgba(94, 231, 255, 0.65);
  box-shadow:
    0 0 0 4px rgba(94, 231, 255, 0.12),
    0 0 22px rgba(94, 231, 255, 0.08);
  transform: translateY(-1px);
}

/* Button */
button {
  position: relative;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  padding: 0.95rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: #051018;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(94, 231, 255, 0.18);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

button::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  transform: translateX(-120%) rotate(18deg);
  animation: shine 4.8s ease-in-out infinite;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(94, 231, 255, 0.22);
}

button:active {
  transform: translateY(1px);
}

button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

/* Resultado */
#resultado {
  min-height: 1.6rem;
  margin-top: 1.2rem;
  text-align: center;
  line-height: 1.5;
  word-break: break-word;
}

#resultado:empty {
  color: var(--muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

#resultado:not(:empty) {
  animation: reveal 360ms cubic-bezier(.2, .8, .2, 1);
}

#resultado a {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  transition: background 180ms ease, transform 180ms ease;
}

#resultado a:hover {
  background: rgba(94, 231, 255, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Acessibilidade e detalhes */
::selection {
  background: rgba(94, 231, 255, 0.3);
  color: white;
}

@media (max-width: 520px) {
  body {
    padding: 16px;
  }

  main {
    padding: 1.3rem;
    border-radius: 18px;
  }

  form {
    flex-direction: column;
  }

  button {
    width: 100%;
  }
}

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

/* Animações */
@keyframes floatParticles {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-70px);
  }
}

@keyframes pulseGlow {
  from {
    transform: scale(1);
    opacity: 0.75;
  }
  to {
    transform: scale(1.05);
    opacity: 1;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-120%) rotate(18deg);
  }
  45% {
    transform: translateX(120%) rotate(18deg);
  }
  100% {
    transform: translateX(120%) rotate(18deg);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}