/* Fuente Neon (truetype). Si más adelante tienes WOFF2, agrégalo como primer src */
@font-face{
  font-family: "Neon";
  src: url("../fonts/Neon.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Paleta y resets */
:root{
  --bg:#0a0f1e;
  --ink:#d8e7ff;
  --muted:#9bb2d6;
  --neon:#28e0ff;
  --neon2:#7cf7ff;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  background:#000;
  color:var(--ink);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}

/* Fondo muy oscuro con sutil gradiente apenas visible cuando se enciende */
body.lit, body.prelit{
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(40,224,255,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 110%, rgba(124,247,255,.08), transparent 60%),
    linear-gradient(#091225, #0a0f1e);
}

.stage{
  position:fixed; inset:0;
  display:grid; place-items:center;
}

/* Botón “Edmar Daer” centrado */
.neon-btn{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:0; margin:0; outline:0;
  -webkit-tap-highlight-color: transparent;
  display:grid; place-items:center; gap:10px;
}

/* Usa la fuente Neon para el texto principal */
.neon-text{
  font-family:"Neon", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial;
  font-weight:900; letter-spacing:.4px;
  /* Mitad del tamaño anterior: 48→24px, 13vw→6.5vw, 132→66px */
  font-size:clamp(24px, 6.5vw, 66px);
  line-height:1;
  transition: opacity .18s ease, filter .18s ease, text-shadow .18s ease, color .18s ease;
  user-select:none;
}

/* Estado APAGADO */
body.off .neon-text{
  color:#02070a; opacity:.08; text-shadow:none; filter:none;
}

/* Estado PRE-ENCENDIDO (hover): parpadeo */
body.prelit .neon-text{
  color:var(--neon);
  text-shadow:
    0 0 8px rgba(40,224,255,.9),
    0 0 18px rgba(40,224,255,.7),
    0 0 42px rgba(124,247,255,.5),
    0 0 82px rgba(124,247,255,.35);
  animation: flick 1.6s ease-in-out infinite;
}

/* Estado ENCENDIDO (click): brillo estable */
body.lit .neon-text{
  color:var(--neon);
  text-shadow:
    0 0 10px rgba(40,224,255,.95),
    0 0 26px rgba(40,224,255,.75),
    0 0 60px rgba(124,247,255,.45);
  animation: glow 4s ease-in-out infinite;
}

@keyframes glow{
  0%,100%{opacity:1} 50%{opacity:.96}
}
@keyframes flick{
  0%{opacity:.3} 8%{opacity:1} 12%{opacity:.65} 16%{opacity:1}
  24%{opacity:.85} 28%{opacity:1} 50%{opacity:.9} 100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .neon-text{ animation:none !important }
}

/* Pista “tap!” solo cuando está apagado/pre-encendido */
.hint{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  opacity:0; transform:translateY(2px);
  transition:opacity .2s ease, transform .2s ease;
  user-select:none;
}
body.off .hint{ opacity:.25; }
body.prelit .hint{ opacity:.35; transform:none; }
body.lit .hint{ opacity:0; visibility:hidden; }


/* ====== NEÓN BICOLOR ====== */
:root{
  /* Rojo/Naranja (Edmar) */
  --ed-r1:#ff3b2e;   /* rojo */
  --ed-r2:#ffa33b;   /* naranja */
  --ed-g1:rgba(255,66,46,.85);
  --ed-g2:rgba(255,136,30,.55);
  --ed-g3:rgba(255,176,80,.38);

  /* Azules (studio) */
  --st-b1:#35d7ff;
  --st-b2:#7ee6ff;
  --st-g1:rgba(53,215,255,.9);
  --st-g2:rgba(126,230,255,.6);
  --st-g3:rgba(126,230,255,.35);
}

/* Contenedor del texto: dos líneas centradas */
.neon-btn{ gap: 8px; }

/* Línea genérica con relleno en gradiente (se recorta al texto) */
.neon-line{
  font-family:"Neon", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial;
  font-weight:900;
  line-height:1;
  letter-spacing:.4px;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  transition:opacity .18s ease, text-shadow .18s ease, filter .18s ease;
  user-select:none;
}

/* Tamaños */
.neon-edmar{  /* grande arriba */
  font-size: clamp(44px, 14vw, 160px);
  background-image: linear-gradient(180deg, var(--ed-r1), var(--ed-r2));
}
.neon-studio{ /* pequeño abajo */
  font-size: clamp(18px, 6.5vw, 64px);
  letter-spacing:.28em;
  text-transform:uppercase;
  background-image: linear-gradient(180deg, var(--st-b1), var(--st-b2));
}

/* Estado APAGADO */
body.off .neon-line{
  opacity:.08;
  text-shadow:none;
  filter:none;
}

/* Estado PRE-ENCENDIDO (hover/focus) */
body.prelit .neon-edmar{
  text-shadow:
    0 0 6px  var(--ed-g1),
    0 0 14px var(--ed-g1),
    0 0 32px var(--ed-g2),
    0 0 64px var(--ed-g3);
  animation: flick 1.6s ease-in-out infinite;
}
body.prelit .neon-studio{
  text-shadow:
    0 0 6px  var(--st-g1),
    0 0 14px var(--st-g1),
    0 0 32px var(--st-g2),
    0 0 64px var(--st-g3);
  animation: flick 1.6s ease-in-out infinite;
}

/* Estado ENCENDIDO (click) */
body.lit .neon-edmar{
  text-shadow:
    0 0 8px  var(--ed-g1),
    0 0 22px var(--ed-g1),
    0 0 48px var(--ed-g2),
    0 0 96px var(--ed-g3);
  animation: glow 4s ease-in-out infinite;
}
body.lit .neon-studio{
  text-shadow:
    0 0 8px  var(--st-g1),
    0 0 22px var(--st-g1),
    0 0 48px var(--st-g2),
    0 0 96px var(--st-g3);
  animation: glow 4s ease-in-out infinite;
}

/* Puedes mantener tus @keyframes glow/flick existentes */