/* ============================================================ HUELLITAS CLUB — Intro de primera visita Pantalla tipo "elegí idioma": accesos chicos arriba (socio / comercio) y, en el centro, una pelota que rebota. Al tocarla, entra el perro corriendo, la agarra, se sienta y el logo avanza hacia adelante para abrir el sitio. Las dos animaciones son video (renderizadas con Remotion) y comparten fondo y encuadre, así el corte no se nota. El lleva .con-intro desde un script inline en el para que no se vea un destello del sitio antes de la intro. ============================================================ */ .intro { display: none; } .con-intro body { overflow: hidden; } .con-intro .intro { display: grid; grid-template-rows: auto 1fr; position: fixed; inset: 0; z-index: 9999; /* mismo verde que el video, por si tarda en pintar el primer frame */ background: radial-gradient(125% 95% at 50% 38%, #175c2d 0%, #104922 45%, #0b3319 100%); color: var(--crema); overflow: hidden; transition: opacity .55s ease; } .intro--fin { opacity: 0; pointer-events: none; } /* ---------- Capa de video ---------- */ .intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .18s linear; z-index: 1; /* la pelota (video opaco) */ background: #104922; /* verde de base: evita el negro mientras carga */ filter: brightness(1.14) contrast(0.86); /* aplana el viñeteo y aclara: mismo verde parejo que el portal */ } /* El patrón va por encima del video, pero enmascarado: transparente en el centro (la pelota queda limpia) y visible hacia los bordes. */ .intro__patron { z-index: 2; opacity: .14; -webkit-mask-image: radial-gradient(circle at 50% 47%, transparent 0, transparent 250px, #000 560px); mask-image: radial-gradient(circle at 50% 47%, transparent 0, transparent 250px, #000 560px); } .intro__video--accion { opacity: 0; } .intro--play .intro__video--idle { opacity: 0; } .intro--play .intro__video--accion { opacity: 1; } /* Toda la pantalla es el botón: no hace falta apuntarle a la pelota */ .intro__tocar { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; font: inherit; color: transparent; } /* el botón ocupa toda la pantalla: un anillo de foco acá sería un marco amarillo alrededor de todo, así que la marca visible va en el texto */ .intro__tocar:focus { outline: none; } .intro__tocar:focus-visible ~ .intro__centro .intro__hint { color: var(--lima); animation: none; opacity: 1; } /* ---------- Arriba: logo + "Tocá la pelota" ---------- */ .intro__centro { position: relative; z-index: 3; display: grid; place-items: center; align-content: start; gap: clamp(14px, 2.5vh, 24px); padding: clamp(20px, 5vh, 60px) 16px 0; pointer-events: none; /* el click atraviesa hacia la pelota... */ transition: opacity .3s ease; } /* Un solo botón blanco partido al medio. La mitad sobre la que está el mouse se pinta de lima, así queda claro cuál vas a elegir. */ .acceso-doble { pointer-events: auto; /* el contenedor no recibe clicks, el botón sí */ display: inline-flex; background: #fff; border-radius: var(--radio-pill); padding: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.22); } .acceso { display: block; padding: .52rem 1.05rem; font-family: var(--ff-titulo); font-weight: 600; font-size: .84rem; color: var(--musgo); line-height: 1.25; border-radius: var(--radio-pill); transition: background var(--transicion), color var(--transicion); } .acceso:hover, .acceso:focus-visible { background: var(--lima); color: var(--musgo); outline: none; } /* divisoria entre las dos mitades, se borra al pasar el mouse */ .acceso + .acceso { position: relative; } .acceso + .acceso::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: rgba(16,73,34,.2); transition: opacity var(--transicion); } .acceso-doble:hover .acceso + .acceso::before, .acceso-doble:focus-within .acceso + .acceso::before { opacity: 0; } /* ---------- Abajo: el botón ---------- */ .intro__pie { position: relative; z-index: 3; display: grid; place-items: center; align-content: end; padding: 0 16px clamp(22px, 5vh, 54px); pointer-events: none; transition: opacity .3s ease; } .intro__logo { height: clamp(96px, 15vh, 150px); width: auto; margin: 0; filter: drop-shadow(0 6px 22px rgba(0,0,0,.4)); } .intro__hint { margin: 0; transition: opacity .3s ease; font-family: var(--ff-titulo); font-weight: 600; font-size: clamp(1rem, 2.4vw, 1.3rem); color: rgba(245,240,225,.85); text-shadow: 0 2px 14px rgba(0,0,0,.45); animation: respira 2.4s ease-in-out infinite; transition: opacity .3s ease; } /* Al arrancar la secuencia, la interfaz se va y queda sólo la animación */ .intro--play .intro__centro, .intro--play .intro__pie { opacity: 0; } .intro--play .intro__tocar { pointer-events: none; } @keyframes respira { 0%, 100% { opacity: .62; } 50% { opacity: 1; } } /* ---------- Sin animación ---------- */ @media (prefers-reduced-motion: reduce) { .intro__hint { animation: none; opacity: 1; } }