/* ========================================================================== CANACO Tonalá — UI Motion (Fase 3) Animaciones de interfaz del sitio público: aparición al hacer scroll, títulos, micro-interacciones de menú y botones, contadores. SEGURIDAD: los elementos solo se ocultan si el motor JS está activo (clase .has-motion en , que agrega ui-motion.js). Si el JS falla, NADA queda oculto — el contenido se ve normal. Respeta prefers-reduced-motion. ========================================================================== */ /* -------------------- Aparición al hacer scroll --------------------- */ .has-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rev-i, 0) * 90ms); will-change: opacity, transform; } .has-motion [data-reveal].is-visible { opacity: 1; transform: none; } /* Variantes de dirección (data-reveal="left|right|zoom") */ .has-motion [data-reveal="left"] { transform: translateX(-32px); } .has-motion [data-reveal="right"] { transform: translateX(32px); } .has-motion [data-reveal="zoom"] { transform: scale(.93); } .has-motion [data-reveal="left"].is-visible, .has-motion [data-reveal="right"].is-visible, .has-motion [data-reveal="zoom"].is-visible { transform: none; } /* -------------------- Títulos --------------------------------------- */ /* Revelado al cargar (sube y aparece) */ .title-reveal { animation: uiRise .9s cubic-bezier(.2, .7, .2, 1) both; } @keyframes uiRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* Degradado dorado en movimiento (aplicar a un H1/H2 simple sin spans de color) */ .title-sheen { background: linear-gradient(90deg, #5D4037, #D4AF37, #8a6a4f, #D4AF37); background-size: 280% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: uiSheen 6s linear infinite; } @keyframes uiSheen { to { background-position: 280% center; } } /* -------------------- Menú de navegación ---------------------------- */ /* Glow dorado en enlaces (se activa cuando el JS añade .menu-animated) */ .menu-animated .nav-link { transition: color .28s ease, transform .28s ease, text-shadow .3s ease; } .menu-animated .nav-link:hover { text-shadow: 0 0 16px rgba(212, 175, 55, .55); } /* Menú móvil: entrada escalonada de los enlaces al abrir (.menu-open) */ .menu-open .mobile-link { animation: uiMenuIn .42s ease both; animation-delay: calc(var(--m-i, 0) * 55ms); } @keyframes uiMenuIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } /* -------------------- Botones --------------------------------------- */ /* Barrido de brillo al hover (no toca transform, seguro con hover:scale) */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-130%); pointer-events: none; } .btn-shine:hover::after { animation: uiShine .9s ease 1; } @keyframes uiShine { to { transform: translateX(130%); } } /* Pulso sutil para un CTA (usar solo donde no haya hover:scale/translate) */ .cta-pulse { animation: uiPulse 2.6s ease-in-out infinite; } @keyframes uiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } .cta-pulse:hover { animation-play-state: paused; } /* Contadores */ .count-up { font-variant-numeric: tabular-nums; } /* -------------------- Accesibilidad --------------------------------- */ @media (prefers-reduced-motion: reduce) { .has-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .title-reveal, .menu-open .mobile-link, .cta-pulse { animation: none !important; } .btn-shine:hover::after { animation: none !important; } .title-sheen { animation: none !important; color: #5D4037 !important; -webkit-text-fill-color: #5D4037 !important; } }