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

:root {
  --cyan: #00ffcc;
  --cyan-dim: #00ffcc33;
  --violet: #7c3aed;
  --violet-dim: #7c3aed22;
  --white: #e0e0e0;
}

body {
  background: #050510;
  color: var(--white);
  font-family: 'Courier New', Courier, monospace;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Capas de fondo ── */
.bg-noise {
  position: fixed;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
}

.bg-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, #000000dd 100%);
  pointer-events: none;
  z-index: 2;
}

.bg-scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.12) 2px,
    rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 11;
}

/* ── Partículas flotantes ── */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--cyan);
  border-radius: 50%;
  animation: floatUp linear infinite;
}

.particle:nth-child(1)  { left: 10%; animation-duration: 12s; animation-delay: 0s;  opacity: 0.6; }
.particle:nth-child(2)  { left: 25%; animation-duration: 18s; animation-delay: 2s;  opacity: 0.3; width: 1px; height: 1px; }
.particle:nth-child(3)  { left: 40%; animation-duration: 15s; animation-delay: 5s;  opacity: 0.5; }
.particle:nth-child(4)  { left: 55%; animation-duration: 20s; animation-delay: 1s;  opacity: 0.4; }
.particle:nth-child(5)  { left: 70%; animation-duration: 14s; animation-delay: 7s;  opacity: 0.6; width: 3px; height: 3px; }
.particle:nth-child(6)  { left: 85%; animation-duration: 22s; animation-delay: 3s;  opacity: 0.3; }
.particle:nth-child(7)  { left: 15%; animation-duration: 16s; animation-delay: 9s;  opacity: 0.5; }
.particle:nth-child(8)  { left: 30%; animation-duration: 19s; animation-delay: 4s;  opacity: 0.2; }
.particle:nth-child(9)  { left: 50%; animation-duration: 13s; animation-delay: 11s; opacity: 0.5; }
.particle:nth-child(10) { left: 65%; animation-duration: 21s; animation-delay: 6s;  opacity: 0.4; }
.particle:nth-child(11) { left: 78%; animation-duration: 17s; animation-delay: 8s;  opacity: 0.3; }
.particle:nth-child(12) { left: 92%; animation-duration: 24s; animation-delay: 10s; opacity: 0.5; }

@keyframes floatUp {
  0%   { transform: translateY(100vh) scale(1); opacity: 0; }
  10%  { opacity: var(--op, 0.5); }
  90%  { opacity: var(--op, 0.5); }
  100% { transform: translateY(-10vh) scale(0.3); opacity: 0; }
}

/* ── Contenedor principal ── */
.container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* ── Texto ── */
.brand {
  text-align: center;
  user-select: none;
}

.brand-name {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #e0e0e0;
  text-shadow: 0 0 20px var(--cyan-dim), 0 0 40px var(--cyan-dim);
  animation: textGlow 4s ease-in-out infinite;
}

.brand-domain {
  color: #ff3333;
  font-weight: bold;
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 15px var(--cyan-dim), 0 0 35px var(--cyan-dim); }
  50%      { text-shadow: 0 0 25px var(--cyan-dim), 0 0 55px var(--cyan-dim), 0 0 80px var(--violet-dim); }
}

.brand-tagline {
  margin-top: 0.5rem;
  font-size: clamp(0.7rem, 2vw, 0.95rem);
  letter-spacing: 0.25em;
  color: #666;
  animation: taglineFade 8s ease-in-out infinite;
}

@keyframes taglineFade {
  0%, 100% { color: #555; }
  50%      { color: #888; }
}

/* ── Grid sutil detrás del logo ── */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,204,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,204,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center center;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}



/* ── Búho centrado ── */
.owl-wrapper {
  width: min(300px, 70vw);
  animation: owlFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(0,255,204,0.5))
          drop-shadow(0 0 40px rgba(124,58,237,0.4))
          drop-shadow(0 0 70px rgba(0,255,204,0.2));
}

@keyframes owlFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.9; }
  50%      { transform: translateY(-6px) scale(1.03); opacity: 1; }
}

.owl-img {
  width: 100%;
  height: auto;
  display: block;
}