/* ============================================================================= DropDigitals — Capa cinemática (inspirada en Lusion/oryzo, adaptada al sitio) · Cursor propio (punto + anillo con inercia) · Botones magnéticos · Parallax del hero reactivo a scroll + cursor · Titular que sube palabra a palabra · Reveals con más cine (desenfoque + desplazamiento) Solo MEJORA lo existente. Se desactiva con prefers-reduced-motion y en táctil. ============================================================================= */ /* ---------------------------------------------------------- Cursor propio --- */ .has-cc, .has-cc * { cursor: none !important; } .cc-dot, .cc-ring { position: fixed; top: 0; left: 0; z-index: 700; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform; } .cc-dot { width: 7px; height: 7px; background: oklch(0.85 0.17 51); box-shadow: 0 0 10px oklch(0.8 0.17 51 / 0.7); transition: width .2s var(--ease-out), height .2s var(--ease-out), opacity .3s; } .cc-ring { width: 40px; height: 40px; border: 1.5px solid oklch(0.78 0.16 51 / 0.6); transition: width .28s var(--ease-out), height .28s var(--ease-out), border-color .28s, background-color .28s, opacity .3s; } .cc-hot .cc-ring { width: 66px; height: 66px; border-color: oklch(0.82 0.16 51 / 0.95); background: oklch(0.78 0.16 51 / 0.1); } .cc-hot .cc-dot { width: 0; height: 0; } .cc-down .cc-ring { width: 25px; height: 25px; border-color: oklch(0.85 0.17 51); } /* ------------------------------------------------------- Botones magnéticos --- */ [data-magnetic] { transition: transform .3s var(--ease-out); will-change: transform; } /* ------------------------------------------------ Titular palabra a palabra --- */ .split .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .split .word__in { display: inline-block; transform: translateY(115%); transition: transform .85s var(--ease-out); } .split.is-revealed .word__in { transform: translateY(0); } /* ============================================================================= APERTURA Y ENTRADAS — estilo Apple (27-jul-2026) Referencia: apple.com/la/mac. Su contenido NACE oculto (opacity 0 + translateY 30px) y entra en cascada tanto al abrir la página como al ir bajando. Tiempos y curva tomados de su propia hoja de estilos: opacity .4s cubic-bezier(0,0,.2,1) · transform .5s cubic-bezier(0,0,.2,1) y un escalonado de ~90ms entre elementos (ellos usan 80ms). Los valores viven en styles.css como --in-*. Dos estados sostienen lo mismo, en relevo: · html.si-intro … → lo pone el guion del , ANTES del primer pintado, para que nada se vea antes de entrar (si esperáramos a este archivo, el contenido ya estaría pintado y el fundido se vería como un parpadeo). · .has-reveal .r-up → lo pone cinematic.js al arrancar; releva a si-intro en el mismo fotograma, sin repintar en medio. La lista de selectores de abajo debe ser LA MISMA que IN_SEL en cinematic.js: si se toca una, se toca la otra. ============================================================================= */ html.si-intro .sec-head, html.si-intro .page-head, html.si-intro .catalog-head, html.si-intro .cat-tile, html.si-intro .flow__step, html.si-intro .deck, html.si-intro .deck-hero__more, html.si-intro .demo, html.si-intro .paypanel, html.si-intro .paysec__side, html.si-intro .support2__copy, html.si-intro .chat, html.si-intro .faq-aside, html.si-intro .faq details { opacity: 0; transform: translateY(var(--in-shift)); } .has-reveal .r-up { opacity: 0; transform: translateY(var(--in-shift)); transform-origin: 50% 100%; } /* Viniendo de ABAJO hacia arriba, la entrada baja desde arriba (la clase la pone cinematic.js según la dirección del scroll). */ .has-reveal .r-up.r-from-top { transform: translateY(calc(var(--in-shift) * -0.8)); } .has-reveal .r-up.is-in { opacity: 1; transform: none; transition: opacity var(--in-fade) var(--in-ease), transform var(--in-move) var(--in-ease); } /* ------------------------------------------- Tilt 3D que sigue al cursor ----- */ /* cinematic.js añade .is-tilt y pinta --mx/--my; el propio JS escribe el transform (perspectiva + inclinación). Aquí: respuesta inmediata + brillo. */ .is-tilt { position: relative; transition: transform .14s ease-out !important; } .is-tilt::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), oklch(1 0 0 / 0.22), transparent 55%); } /* Los logos permanecen estables: se eliminan animaciones infinitas para reducir trabajo continuo de composición en catálogo y detalle. */ .lic-card__glyph { animation: none; } /* ----------------------------------------------------------- Hero parallax --- */ .hero__stage { will-change: transform; } .hero__content { will-change: transform; } /* En táctil la distancia y el tiempo son menores: la pantalla es corta y el dedo va rápido, una entrada larga se sentiría lenta. */ @media (hover: none), (max-width: 960px) { :root { --in-shift: 20px; --in-fade: 0.32s; --in-move: 0.4s; --in-step: 70ms; } } @media (prefers-reduced-motion: reduce) { .split .word__in { transform: none; transition: none; } [data-magnetic] { transition: none; } .has-reveal .r-up { opacity: 1; transform: none; filter: none; } /* Red de seguridad: el guion del ya evita poner si-intro con movimiento reducido, pero si llegara a estar, nada queda oculto. */ html.si-intro * { opacity: 1 !important; transform: none !important; } .is-tilt::after { content: none; } .lic-card__glyph { animation: none !important; } } @media (hover: none), (pointer: coarse) { .has-cc, .has-cc * { cursor: auto !important; } .cc-dot, .cc-ring { display: none; } }