/* Z1000 · portada «Monolito»: blanco y negro, Inter, mucho aire */
@font-face { font-family: "Inter"; src: url("/fuentes/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --bg: #030303; --fg: #f5f5f5; --gris: #8a8a8a; --linea: #ffffff2e; --fuente: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; }
body { font: 400 14px/1.4 var(--fuente); -webkit-font-smoothing: antialiased; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas#escena { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
html { cursor: crosshair; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* HUD: esquinas en voz baja */
.hud { position: fixed; inset: 0; pointer-events: none; font: 500 10px/1 var(--fuente); letter-spacing: .38em; text-transform: uppercase; color: var(--gris);
  opacity: 0; transition: opacity 2.4s cubic-bezier(.16,1,.3,1) .8s; }
body.listo .hud { opacity: 1; }
.esq { position: absolute; }
.sup-izq { top: max(30px, env(safe-area-inset-top)); left: 34px; color: var(--fg); letter-spacing: .5em; font-weight: 600; }
.sup-der { top: max(30px, env(safe-area-inset-top)); right: 34px; font-variant-numeric: tabular-nums; }
.inf-izq { bottom: max(30px, env(safe-area-inset-bottom)); left: 34px; }

/* botón */
main { position: fixed; left: 0; right: 0; bottom: max(11vh, calc(env(safe-area-inset-bottom) + 64px)); display: flex; justify-content: center; pointer-events: none; }
.entrar {
  --tx: 0px; --ty: 0px; --mx: 50%;
  pointer-events: auto; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 18px;
  padding: 9px 9px 9px 30px; border-radius: 999px; text-decoration: none; color: #f6f5fa; overflow: hidden;
  font: 500 12px/1 var(--fuente); letter-spacing: .26em; text-transform: uppercase;
  /* borde de degradado que gira despacio (naranja → magenta → violeta) sobre cristal oscuro */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(24,22,30,.92), rgba(10,9,14,.95)) padding-box,
    conic-gradient(from var(--ang), #ff7a2e, #ff2e88, #9b4dff, #3a2a55 60%, #ff7a2e) border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 50px -18px rgba(255,46,136,.45), 0 0 0 1px rgba(0,0,0,.4);
  animation: giro 7s linear infinite;
  opacity: 0; transform: translate(var(--tx), calc(var(--ty) + 14px));
  transition: opacity 1.4s cubic-bezier(.16,1,.3,1) .35s, transform .9s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color: transparent;
}
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes giro { to { --ang: 360deg; } }
body.listo .entrar { opacity: 1; transform: translate(var(--tx), var(--ty)); }
.entrar .txt { position: relative; z-index: 1; }
.entrar .flecha { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #ff7a2e, #ff2e88 55%, #9b4dff); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(255,46,136,.8), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .6s cubic-bezier(.16,1,.3,1); }
.entrar .flecha svg { width: 17px; height: 17px; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.entrar .brillo { position: absolute; inset: 0; z-index: 0; border-radius: inherit; opacity: 0; transition: opacity .5s;
  background: radial-gradient(160px circle at var(--mx) 50%, rgba(255,120,60,.22), rgba(255,46,136,.10) 45%, transparent 70%); }
.entrar::after { /* destello que cruza al pasar el ratón */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%); transform: translateX(-120%); }
@media (hover: hover) {
  .entrar:hover { box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 22px 60px -14px rgba(255,46,136,.7), 0 0 0 1px rgba(0,0,0,.4); }
  .entrar:hover .brillo { opacity: 1; }
  .entrar:hover .flecha { transform: scale(1.06); }
  .entrar:hover .flecha svg { transform: translateX(2px); }
  .entrar:hover::after { transform: translateX(120%); transition: transform 1s cubic-bezier(.16,1,.3,1); }
}
.entrar:active .flecha { transform: scale(.92); }
.entrar:focus-visible { outline: 2px solid rgba(255,46,136,.8); outline-offset: 4px; }

/* grano fino de película */
.grano { position: fixed; inset: -50%; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grano 1.2s steps(6) infinite; }
@keyframes grano { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,3%)} 100%{transform:translate(0,0)} }

@media (max-width: 600px) {
  .hud { letter-spacing: .28em; font-size: 9px; }
  .sup-izq, .inf-izq { left: 22px; } .sup-der { right: 22px; }
  .entrar { padding-left: 26px; gap: 14px; letter-spacing: .22em; }
}
@media (prefers-reduced-motion: reduce) { .grano { animation: none; } }
html.og .hud, html.og main, html.og .grano { display: none !important; }

/* transición al iniciar sesión: la esfera cae hacia el botón y todo funde a negro */
body::after { content: ""; position: fixed; inset: 0; background: #030306; opacity: 0; pointer-events: none; z-index: 50;
  transition: opacity .55s cubic-bezier(.65,0,.35,1) .3s; }
body.saliendo::after { opacity: 1; }
body.saliendo .hud { opacity: 0 !important; transition: opacity .35s ease; }
body.saliendo .entrar { transform: translate(var(--tx), var(--ty)) scale(.96); box-shadow: 0 0 0 1px rgba(255,46,136,.6), 0 0 80px rgba(255,46,136,.7); }