/* ════════════════════════════════════════════════════════════════════════
 * v5.css — La portada de una sola pantalla (v5.html): la sala de cristal
 * blanco, el logotipo "niva" quieto, la lista de espera (igual que en la v4)
 * y el logo 3D de Niva en blanco y negro paseando por encima (js/wanderlogo.js).
 * ══════════════════════════════════════════════════════════════════════ */
:root {
  --hv: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ink: #0b0c10;
  --blue: #2c6bff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.5, 0.64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body.v5 { background: #f3f4f7; color: var(--ink); font-family: var(--hv); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══ La sala: cristal blanco a toda altura, con grandes paños de luz ═══ */
.hall { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #f3f4f7; }
.hall-wall { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 60% at 50% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #fbfbfc 0%, #f3f5f8 60%, #eceff3 100%); }
.hall-wall::after { content: ""; position: absolute; inset: -10% -18%; pointer-events: none; background: linear-gradient(116deg, transparent 20%, rgba(255, 255, 255, 0.95) 27%, rgba(255, 255, 255, 0) 33%, transparent 58%, rgba(255, 255, 255, 0.8) 66%, rgba(255, 255, 255, 0) 72%), radial-gradient(32% 46% at 16% 40%, rgba(196, 208, 228, 0.22), transparent 70%), radial-gradient(34% 46% at 86% 46%, rgba(206, 214, 232, 0.24), transparent 70%); transform: translateX(calc((var(--sx, 50%) - 50%) * 0.14)); transition: transform 1.4s var(--ease); }
.hall-light { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140% 110% at 50% 40%, rgba(28, 34, 46, 0) 60%, rgba(28, 34, 46, 0.07) 100%); }

/* La lista de espera: cristal (deja ver el suelo y sus reflejos, desenfocados) */
.v4-join .field { position: relative; display: flex; align-items: center; gap: 6px; height: 50px; padding: 5px 5px 5px 20px; border-radius: 999px; cursor: text; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0.32) 100%); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.25), 0 20px 44px -26px rgba(20, 28, 40, 0.5); transition: box-shadow 0.3s ease; }
/* El filo de luz de arriba (como el canto de un cristal) */
.v4-join .field::after { content: ""; position: absolute; left: 22px; right: 22px; top: 1px; height: 45%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0)); pointer-events: none; }
.v4-join .field:focus-within { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 5px rgba(255, 255, 255, 0.45), 0 20px 44px -26px rgba(20, 28, 40, 0.5); }
.v4-join .field.bad { box-shadow: inset 0 0 0 1.5px rgba(180, 83, 9, 0.55), 0 20px 44px -26px rgba(20, 28, 40, 0.5); }
.v4-join .field.shake { animation: shake 0.42s ease-in-out; }
@keyframes shake { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }
.v4-join .field > * { position: relative; z-index: 1; }
.v4-join input[type="email"] { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 15px/1 var(--hv); color: var(--ink); }
.v4-join input::placeholder { color: rgba(11, 12, 16, 0.45); }
.v4-join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.v4-join .join-go { height: 100%; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--hv); color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 60%, rgba(236, 240, 246, 0.8) 100%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(20, 28, 40, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 18px -10px rgba(20, 28, 40, 0.5); transition: transform 0.15s ease, box-shadow 0.25s ease; }
.v4-join .join-go:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px #fff, 0 0 18px -2px rgba(255, 255, 255, 0.9), 0 10px 22px -10px rgba(20, 28, 40, 0.55); }
.v4-join .join-go:active { transform: scale(0.95); }
.v4-join .note { min-height: 1em; margin: 10px 0 0; text-align: center; font: 500 13px/1.3 var(--hv); color: rgba(11, 12, 16, 0.5); }
.v4-join .note.ok { color: var(--ink); }
.v4-join .note.err { color: #b45309; }


/* ═══ La portada ═══ */
/* Capas: la sala (0) < el logotipo (1) < el logo 3D que pasea (2) < la lista de espera (3) */
/* El logotipo, quieto (el mismo SVG que el de arriba de la v4, en negro) */
.v5-logo { position: fixed; z-index: 1; left: 50%; top: 37vh; width: min(66vw, 98vh, 1040px); aspect-ratio: 1400 / 561; translate: -50% -50%; background: var(--ink); -webkit-mask: url(../assets/img/wordmark.svg) center / contain no-repeat; mask: url(../assets/img/wordmark.svg) center / contain no-repeat; pointer-events: none; }
.home-join { position: fixed; z-index: 3; left: 50%; top: 72vh; width: min(440px, 88vw); translate: -50% 0; }
/* Entrada suave, solo con CSS: si el JS no carga (o se abre el archivo sin servidor), se ve igual */
.v5-logo { animation: v5In 1.1s var(--ease) 0.15s both; }
.home-join { animation: v5In 1.1s var(--ease) 0.45s both; }
@keyframes v5In { from { opacity: 0; transform: translateY(14px); } }

/* El logo 3D que pasea: un lienzo a pantalla completa que no tapa los clics
   (los suyos se miran en JS: solo cuenta si el puntero está encima del logo) */
.buddy-gl { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100vh; display: block; pointer-events: none; }
body.over-buddy { cursor: grab; }
body.grab-buddy, body.grab-buddy * { cursor: grabbing !important; user-select: none; }

@media (max-width: 700px) {
  .v5-logo { top: 36vh; width: 84vw; }
  .home-join { top: 66vh; }
}
@media (prefers-reduced-motion: reduce) {
  .v5-logo, .home-join { animation: none; }
}