/* OKENTRA — Sistema de movimiento Reglas de Emil Kowalski (guidelines/motion/): propósito antes que decoración · solo transform y opacity · ease-out para entradas · UI por debajo de 300 ms · nunca scale(0) · hover solo en punteros reales · reduced-motion siempre. */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); } /* ---- Feedback de presión: todo lo presionable responde ---- */ button, [role="button"], .ok-press { transition: transform 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } button:active, [role="button"]:active, .ok-press:active { transform: scale(0.97); } a[href] { transition: color 140ms ease, opacity 140ms ease; } /* ---- Foco visible: nítido, sin movimiento ---- */ :focus-visible { outline: 2px solid var(--violet-500); outline-offset: 2px; border-radius: 4px; } /* ---- Menús con origen: crecen desde su disparador ---- */ .ok-menu { transform-origin: top left; animation: ok-menu-in 160ms var(--ease-out) both; } @keyframes ok-menu-in { from { opacity: 0; transform: scale(0.97) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ---- Modal: origen centrado, por debajo de 300 ms ---- */ .ok-modal { animation: ok-modal-in 220ms var(--ease-out) both; transform-origin: center; } .ok-modal-backdrop { animation: ok-fade-in 180ms ease both; } @keyframes ok-modal-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes ok-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---- Hover de tarjetas: gated a puntero real, transform y sombra ---- */ @media (hover: hover) and (pointer: fine) { .ok-lift { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out), border-color 200ms ease; } .ok-lift:hover { transform: translateY(-3px); } /* Iconos en tarjeta: la placa reacciona junto con la tarjeta, sin robar protagonismo */ .ok-lift .ok-icon-tile { transition: transform 220ms var(--ease-out), background-color 200ms ease; } .ok-lift:hover .ok-icon-tile { transform: scale(1.06); } /* Flecha de enlace: avanza al pasar el mouse */ .ok-arrow { transition: transform 180ms var(--ease-out); } a:hover .ok-arrow, button:hover .ok-arrow, .ok-lift:hover .ok-arrow { transform: translateX(3px); } } /* ---- Aparición al hacer scroll ---- El estado oculto solo aplica con .ok-motion en (lo pone reveal.js). Sin JS, o si algo falla, el contenido se ve normal. */ .ok-motion .ok-reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); } .ok-motion .ok-reveal.is-in { opacity: 1; transform: translateY(0); } .ok-motion .ok-reveal-group > * { opacity: 0; transform: translateY(10px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); } .ok-motion .ok-reveal-group.is-in > * { opacity: 1; transform: translateY(0); } .ok-motion .ok-reveal-group > *:nth-child(2) { transition-delay: 45ms; } .ok-motion .ok-reveal-group > *:nth-child(3) { transition-delay: 90ms; } .ok-motion .ok-reveal-group > *:nth-child(4) { transition-delay: 135ms; } .ok-motion .ok-reveal-group > *:nth-child(5) { transition-delay: 180ms; } .ok-motion .ok-reveal-group > *:nth-child(6) { transition-delay: 225ms; } /* ---- Entradas de una sola vez (hero) ---- */ .ok-rise { animation: ok-rise 300ms var(--ease-out) both; } @keyframes ok-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .ok-stagger > * { animation: ok-rise 300ms var(--ease-out) both; } .ok-stagger > *:nth-child(2) { animation-delay: 45ms; } .ok-stagger > *:nth-child(3) { animation-delay: 90ms; } .ok-stagger > *:nth-child(4) { animation-delay: 135ms; } .ok-stagger > *:nth-child(5) { animation-delay: 180ms; } .ok-stagger > *:nth-child(6) { animation-delay: 225ms; } /* ---- Marquesina de logos: movimiento constante, linear es correcto acá ---- */ .ok-marquee-track { animation: ok-marquee 46s linear infinite; } .ok-marquee:hover .ok-marquee-track { animation-play-state: paused; } @keyframes ok-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 34px)); } } /* ---- Escáner facial: barrido sobre la pantalla del equipo ---- Se mueve con transform (GPU), no con top. El track ocupa el alto útil de la pantalla. */ .tablet-scanner-effect { position: relative; --scan-x: 18%; --scan-top: 13%; --scan-bottom: 13%; --scan-color: #00E5FF; } .tablet-scanner-effect::after { content: ''; position: absolute; left: var(--scan-x); right: var(--scan-x); top: var(--scan-top); height: 2px; border-radius: 2px; pointer-events: none; background: linear-gradient(90deg, rgba(0,229,255,0) 0%, var(--scan-color) 18%, #fff 50%, var(--scan-color) 82%, rgba(0,229,255,0) 100%); box-shadow: 0 0 10px 1px var(--scan-color), 0 0 26px 4px rgba(0,229,255,0.45); will-change: top, opacity; animation: ok-tablet-scan 3.6s var(--ease-in-out) infinite alternate; } @keyframes ok-tablet-scan { from { top: var(--scan-top); opacity: 0.4; } 12% { opacity: 0.95; } 88% { opacity: 0.95; } to { top: calc(100% - var(--scan-bottom)); opacity: 0.4; } } /* ---- Acordeón: el signo gira, el panel abre sin saltos ---- */ .ok-acc-icon { transition: transform 200ms var(--ease-out); } .ok-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease-out); } .ok-acc-panel > * { overflow: hidden; } .ok-acc-panel.is-open { grid-template-rows: 1fr; } /* ---- Movimiento reducido: menos y más suave, no cero ---- */ @media (prefers-reduced-motion: reduce) { /* Marquesina detenida: se convierte en una grilla estática y se descarta el duplicado */ .ok-marquee-track { animation: none !important; flex-wrap: wrap !important; justify-content: center; width: 100% !important; gap: 34px !important; } .ok-marquee-dup { display: none !important; } .ok-menu, .ok-modal, .ok-rise, .ok-stagger > * { animation: ok-fade-in 200ms ease both; } .ok-motion .ok-reveal, .ok-motion .ok-reveal-group > * { transform: none; transition: opacity 220ms ease; } .ok-motion .ok-reveal.is-in, .ok-motion .ok-reveal-group.is-in > * { transform: none; } button:active, [role="button"]:active, .ok-press:active { transform: none; } .ok-lift:hover, .ok-lift:hover .ok-icon-tile, a:hover .ok-arrow { transform: none; } .tablet-scanner-effect::after { animation: none; opacity: 0.55; } }