/* Rejilla 3D de cócteles (sección Bienvenidos) — dos columnas que se revelan con profundidad (perspectiva, rotación, blur) a medida que el usuario hace scroll. Animada por carousel-3d.js con GSAP + ScrollTrigger; este CSS solo define la forma en reposo y el estado sin JS/reduced-motion. */ .carousel-3d { margin-top: var(--space-6); } /* 2 columnas en móvil (conserva el vaivén izquierda/derecha), 3 en tablet y 4 en escritorio — el contenedor crece con cada salto para que las fotos no se queden diminutas. */ .carousel-3d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-6); /* hueco generoso: durante la transición cada foto se agranda por la perspectiva y necesita margen para no montarse sobre la de al lado */ width: min(88vw, 38rem); margin-inline: auto; padding-block: 14vh; } @media (min-width: 900px) { .carousel-3d-grid { grid-template-columns: repeat(3, 1fr); width: min(90vw, 62rem); } } @media (min-width: 1300px) { .carousel-3d-grid { grid-template-columns: repeat(4, 1fr); width: min(92vw, 84rem); } } .carousel-3d-item { perspective: 800px; } .carousel-3d-wrap { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-surface); transform-style: preserve-3d; will-change: transform, filter; /* Estado inicial: mismas funciones/valores que el "from" (FILTER_ENTER) de carousel-3d.js — oculta y desenfocada de entrada, antes incluso de que el script arranque. Si el reposo por defecto fuera el nítido/visible, la foto aparecía plana un instante y desaparecía de golpe en cuanto GSAP fijaba su estado real al arrancar; empezando ya oculta no hay salto que ver. Ver el fallback sin JS más abajo, que la muestra si el script nunca llega a arrancar. */ filter: blur(3px) opacity(0%) brightness(0%) contrast(150%); } .carousel-3d-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; will-change: transform; } .carousel-3d-wrap { border-radius: 0.75rem; } @media (max-width: 40rem) { .carousel-3d-grid { padding-block: 9vh; gap: var(--space-5) var(--space-3); } } /* Sin JS (o si GSAP/ScrollTrigger no llegan a cargar): las fotos se muestran en su sitio final, visibles, sin tilt 3D ni blur — carousel-3d.js añade .has-3d-scroll al solo cuando la animación arranca de verdad, así que mientras esa clase no esté, mejor mostrarlas planas que dejarlas ocultas para siempre. */ html:not(.has-3d-scroll) .carousel-3d-wrap { transform: none; filter: none; } /* El scroll-behavior:smooth de base.css (para los anclajes internos) rompe el scrub de ScrollTrigger: el navegador interpola el scroll por su cuenta y la posición que lee GSAP llega a saltos, así que la rejilla no reacciona bien al scroll real con rueda/trackpad. Se desactiva solo cuando la animación 3D está activa (ver carousel-3d.js). */ html.has-3d-scroll { scroll-behavior: auto; }