/* ========================================================================== ÓRBITA — Capa de movimiento Cursor, preloader, cortinilla, marquesina, grano y revelados. Contrato de robustez: - .is-motion → el usuario NO pidió movimiento reducido (se añade en ). - .is-anim → además, se espera que GSAP cargue. Un watchdog la retira si el CDN falla, devolviendo el sitio a su estado legible. Todo lo que oculte contenido DEBE depender de .is-anim. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fondo de estrellas -------------------------------------------------------------------------- */ .starfield { position: fixed; inset: 0; z-index: var(--z-bg); width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-soft); } .starfield.is-ready { opacity: 1; } /* Segunda capa de partículas. Mismo z-index que el campo de estrellas: va después en el HTML, así que se pinta por encima sin abrir otra capa. */ .particles { position: fixed; inset: 0; z-index: var(--z-bg); width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease-soft); } .particles.is-ready { opacity: 1; } /* -------------------------------------------------------------------------- 2. Grano -------------------------------------------------------------------------- */ .grain { position: fixed; inset: -50%; z-index: var(--z-grain); width: 200%; height: 200%; pointer-events: none; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .is-motion .grain { animation: grain-shift 0.8s steps(3) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 33% { transform: translate(-2%, 1.5%); } 66% { transform: translate(1.5%, -1%); } 100% { transform: translate(0, 0); } } /* -------------------------------------------------------------------------- 3. Cursor personalizado -------------------------------------------------------------------------- */ .cursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; display: none; /* Arranca invisible: hasta el primer movimiento del ratón no sabemos dónde ponerlo, y sin posición asignada se quedaría en la esquina superior izquierda (su origen). Se notaba al cambiar de página. */ opacity: 0; transition: opacity 0.25s var(--ease); } .cursor.is-ready { opacity: 1; } /* Solo en dispositivos con puntero fino y sin movimiento reducido */ @media (pointer: fine) { .is-motion .cursor { display: block; } .is-motion body { cursor: none; } .is-motion a, .is-motion button, .is-motion [data-cursor] { cursor: none; } } /* Sin `translate` ni `scale` aquí: el navegador aplica esas propiedades ANTES que `transform`, y como la posición se calcula en JS con transform, la escala del clic multiplicaba también las coordenadas y mandaba el anillo hacia la esquina superior izquierda. Centrado y escala van en el transform. */ .cursor__dot, .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 50%; } .cursor__dot { width: 6px; height: 6px; background: var(--cyan); transition: opacity var(--t-fast) var(--ease), width var(--t-fast), height var(--t-fast); } .cursor__ring { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(77, 141, 255, 0.04); backdrop-filter: blur(1px); transition: width var(--t-med) var(--ease), height var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), opacity var(--t-fast) var(--ease); } .cursor__label { font-family: var(--font-display); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: #fff; opacity: 0; transform: scale(0.7); transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--ease); white-space: nowrap; } /* Estado sobre elemento interactivo */ .cursor.is-hover .cursor__ring { width: 62px; height: 62px; border-color: transparent; background: rgba(77, 141, 255, 0.24); backdrop-filter: blur(3px); } .cursor.is-hover .cursor__dot { opacity: 0; } /* Estado con etiqueta contextual */ .cursor.is-labelled .cursor__ring { width: 82px; height: 82px; background: var(--grad); border-color: transparent; } .cursor.is-labelled .cursor__label { opacity: 1; transform: scale(1); } /* El apretón del clic lo interpola main.js dentro del propio transform */ .cursor.is-hidden { opacity: 0; } /* -------------------------------------------------------------------------- 4. Preloader -------------------------------------------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: none; place-items: center; background: var(--bg); } /* Solo se muestra si de verdad vamos a animarlo */ .is-anim .preloader { display: grid; } .preloader__inner { display: grid; place-items: center; gap: 1.75rem; } .preloader__ring { width: clamp(90px, 16vw, 130px); aspect-ratio: 1; overflow: visible; } .preloader__ring circle { fill: none; stroke-width: 1.5; } .preloader__track { stroke: rgba(255, 255, 255, 0.09); } .preloader__arc { stroke: url(#preGrad); stroke-linecap: round; /* r=45 → circunferencia ≈ 282.74 */ stroke-dasharray: 282.74; stroke-dashoffset: 282.74; transform: rotate(-90deg); transform-origin: 50% 50%; } .preloader__meta { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-display); } .preloader__count { font-size: clamp(2.2rem, 6vw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .preloader__word { font-size: var(--fs-micro); letter-spacing: 0.32em; text-transform: uppercase; color: var(--text-mute); } /* -------------------------------------------------------------------------- 5. Cortinilla de transición entre páginas -------------------------------------------------------------------------- */ .curtain { position: fixed; inset: 0; z-index: var(--z-curtain); display: grid; place-items: center; background: linear-gradient(160deg, #070a12, #05060a); transform: translateY(100%); pointer-events: none; visibility: hidden; } /* Al llegar desde otra página la cortinilla ya debe estar puesta antes del primer pintado, si no se ve un parpadeo del contenido. El añade .is-navigating; depende de .is-anim para que el watchdog pueda retirarla si GSAP nunca llega y la cortinilla no se quede atascada cubriendo todo. */ .is-anim.is-navigating .curtain { transform: translateY(0); visibility: visible; } .curtain__mark { width: clamp(74px, 11vw, 112px); height: auto; opacity: 0; } /* -------------------------------------------------------------------------- 6. Marquesina de tecnologías -------------------------------------------------------------------------- */ .marquee { position: relative; z-index: var(--z-content); padding-block: clamp(2rem, 4vw, 3rem); border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); overflow: hidden; /* Difuminado en los extremos */ -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .marquee__row { display: flex; width: max-content; /* --dur lo ajusta el JS según la velocidad de scroll */ animation: marquee-left var(--dur, 44s) linear infinite; } .marquee__row + .marquee__row { margin-top: 0.9rem; animation-name: marquee-right; animation-duration: calc(var(--dur, 44s) * 1.25); } .marquee:hover .marquee__row { animation-play-state: paused; } /* Cada grupo se duplica en el HTML: desplazar el 50% del track es un bucle exacto */ .marquee__group { display: flex; align-items: center; flex-shrink: 0; } .marquee__item { display: inline-flex; align-items: center; gap: 0.7rem; padding-inline: clamp(1.1rem, 2.4vw, 2rem); font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -0.02em; color: var(--text-dim); white-space: nowrap; transition: color var(--t-fast) var(--ease); } .marquee__item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); opacity: 0.55; } .marquee__item:hover { color: var(--text); } @keyframes marquee-left { to { transform: translateX(-50%); } } @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* -------------------------------------------------------------------------- 7. Revelados Solo se ocultan bajo .is-anim; si GSAP no llega, todo queda visible. -------------------------------------------------------------------------- */ .is-anim [data-reveal] { opacity: 0; transform: translateY(28px); } .is-anim [data-reveal='fade'] { transform: none; } .is-anim [data-reveal='scale'] { transform: scale(0.96); } /* Los hijos directos se escalonan desde el contenedor */ .is-anim [data-reveal-group] > * { opacity: 0; transform: translateY(30px); } /* Máscara para el texto partido por SplitText */ .is-anim [data-reveal-text] { opacity: 0; } .is-anim [data-reveal-text].is-split { opacity: 1; } .split-line { overflow: hidden; padding-bottom: 0.08em; } /* -------------------------------------------------------------------------- 8. Tilt 3D -------------------------------------------------------------------------- */ @media (pointer: fine) { /* .card transiciona transform en 0.35s, demasiado lento para seguir al puntero: el tilt se sentiría pegajoso. Aquí se acorta. */ .is-motion [data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform 0.15s var(--ease-soft), border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease); } .is-motion [data-magnetic] { transition: transform 0.18s var(--ease-soft), box-shadow var(--t-med) var(--ease), background-position var(--t-med) var(--ease), background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), color var(--t-med) var(--ease); } } /* -------------------------------------------------------------------------- 9. Movimiento reducido — desactivación total -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cursor, .preloader, .curtain { display: none !important; } .marquee__row { animation: none; /* Sin animación, mostramos solo el primer grupo para que no desborde */ width: 100%; overflow: hidden; } .marquee { -webkit-mask-image: none; mask-image: none; } .grain { animation: none; } .starfield, .particles { opacity: 1; } [data-reveal], [data-reveal-group] > *, [data-reveal-text] { opacity: 1 !important; transform: none !important; } }