/* ═══════════════════════════════════════════════════════════ PRIMMATE VIP ESTUDIO — intro.css Entrada de la landing — "lujo silencioso". Principios: · El usuario percibe calidad y fluidez, no una animación · Solo opacity + transform (compositor GPU, 60 fps) · Desplazamientos mínimos (8–14 px), easings suaves · prefers-reduced-motion respetado · La interacción nunca se bloquea (curtain pointer-events: none) Coreografía (~0.9 s): 0.00 s el fondo transiciona desde negro profundo (0.6 s) 0.05 s logo: fade-in + leve ascenso de 14 px (0.65 s) 0.30 s "PRIMMATE" aparece gradualmente 0.42 s "VIP" 0.54 s "ESTUDIO" 0.66 s tagline 0.78 s CTA "Reservar turno" (fade-in sutil) 0.92 s hint de scroll Se activa solo cuando tiene la clase .intro (config/app.php → 'intro_animation' => true). ═══════════════════════════════════════════════════════════ */ /* ── Fondo: transición muy suave desde negro profundo ──────── */ .intro-curtain { position: fixed; inset: 0; z-index: 9999; background: #000; pointer-events: none; /* jamás bloquea clicks ni scroll */ animation: introCurtain 0.6s ease-out both; } @keyframes introCurtain { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } /* ── El .reveal genérico no debe pisar la coreografía ──────── */ html.intro .hero__content.reveal { opacity: 1; transform: none; transition: none; } /* ── Fondo fotográfico: asentamiento casi imperceptible ────── */ /* (.hero tiene overflow:hidden, el scale nunca se desborda) */ html.intro .hero__bg { animation: introBg 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @keyframes introBg { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } } /* ── Logo: fade-in con leve ascenso — sin caída ni rebote ──── */ html.intro .hero__logo-wrap { opacity: 0; animation: introLogo 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s both; } @keyframes introLogo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ── Texto y CTA: aparición gradual, casi solo opacidad ────── */ html.intro .hero__brand-name, html.intro .hero__brand-vip, html.intro .hero__brand-estudio, html.intro .hero__tagline, html.intro .hero__cta { opacity: 0; animation: introFade 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } html.intro .hero__brand-name { animation-delay: 0.30s; } html.intro .hero__brand-vip { animation-delay: 0.42s; } html.intro .hero__brand-estudio { animation-delay: 0.54s; } html.intro .hero__tagline { animation-delay: 0.66s; } html.intro .hero__cta { animation-delay: 0.78s; } @keyframes introFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Flecha de scroll: conserva su centrado translateX(-50%) ── */ html.intro .hero__scroll-hint { opacity: 0; animation: introFadeCentered 0.6s ease-out 0.92s both; } @keyframes introFadeCentered { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ── Post-animación (intro.js agrega .intro-done al final) ─── */ /* Devolver el bounce infinito de base a la flecha de scroll */ html.intro-done .hero__scroll-hint { opacity: 1; animation: bounce 2s infinite; } /* ── Accesibilidad: sin movimiento si el usuario lo pide ───── */ @media (prefers-reduced-motion: reduce) { .intro-curtain { display: none; } html.intro .hero__bg, html.intro .hero__logo-wrap, html.intro .hero__brand-name, html.intro .hero__brand-vip, html.intro .hero__brand-estudio, html.intro .hero__tagline, html.intro .hero__cta { animation: none; opacity: 1; transform: none; } /* La flecha conserva su centrado con translateX(-50%) */ html.intro .hero__scroll-hint { animation: none; opacity: 1; transform: translateX(-50%); } }