/* ========================================================================== ALOFTZ — Cinematic Motion System (additive layer) Smooth inertia scroll, masked headline reveal, 3D card tilt, magnetic UI, frame-draw reveals, scroll-pinned process narrative, custom cursor, grain. This file is purely additive — it does not override style.css. It is safe to remove (just delete the in ) with zero side effects on the rest of the site. ========================================================================== */ /* ---- Lenis smooth-scroll housekeeping ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ---- Headline mask reveal ---- */ .split-mask { display: block; overflow: hidden; } /* ---- Film grain ambience ---- */ .grain { position: fixed; inset: -10%; width: 120%; height: 120%; z-index: 250; pointer-events: none; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px 220px; animation: grain-shift 8s steps(8) infinite; } @keyframes grain-shift { 0%, 100% { transform: translate(0,0); } 10% { transform: translate(-1%,-2%); } 20% { transform: translate(-3%,1%); } 30% { transform: translate(2%,-3%); } 40% { transform: translate(-2%,2%); } 50% { transform: translate(3%,1%); } 60% { transform: translate(-1%,3%); } 70% { transform: translate(1%,-1%); } 80% { transform: translate(-3%,-2%); } 90% { transform: translate(2%,2%); } } @media (prefers-reduced-motion: reduce) { .grain { animation: none; opacity: 0.02; } } /* ---- Homepage 3D scroll navigator ---- */ .scroll-3d-path { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 0.5s var(--ease-soft); } .scroll-3d-path.is-ready { opacity: 0.28; } .scroll-3d-path svg { width: 100%; height: 100%; display: block; } .scroll-3d-path-line { fill: none; stroke: url("#scroll3dGradient"); stroke-width: 0.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.72; filter: drop-shadow(0 0 16px rgba(0, 255, 100, 0.35)) drop-shadow(0 0 22px rgba(85, 76, 255, 0.35)); } .scroll-3d-stage { position: fixed; top: 0; left: 0; width: clamp(116px, 14vw, 190px); height: clamp(116px, 14vw, 190px); z-index: 7; pointer-events: none; opacity: 0; transform: translate3d(calc(100vw - 260px), 22vh, 0); transform-origin: 50% 50%; mix-blend-mode: normal; background: transparent; border: none; backdrop-filter: none; box-shadow: none; will-change: transform, opacity; } .scroll-3d-stage.is-ready { opacity: 1; } .scroll-3d-stage canvas { width: 100%; height: 100%; display: block; } .scroll-3d-fallback { position: absolute; inset: 16%; display: none; transform-style: preserve-3d; animation: fallback-3d-spin 8s linear infinite; } .scroll-3d-stage.has-fallback canvas { display: none; } .scroll-3d-stage.has-fallback .scroll-3d-fallback { display: block; } .scroll-3d-fallback span { position: absolute; inset: 0; border: 1px solid rgba(118, 90, 255, 0.78); border-radius: 50%; box-shadow: inset 0 0 32px rgba(0, 255, 148, 0.28), 0 0 32px rgba(116, 71, 255, 0.25); } .scroll-3d-fallback span:nth-child(1) { transform: rotateX(72deg); } .scroll-3d-fallback span:nth-child(2) { transform: rotateY(68deg); border-color: rgba(0, 255, 90, 0.72); } .scroll-3d-fallback span:nth-child(3) { transform: rotateZ(50deg) scale(0.72); border-color: rgba(203, 255, 78, 0.72); } @keyframes fallback-3d-spin { from { transform: rotateX(58deg) rotateY(0deg) rotateZ(20deg); } to { transform: rotateX(58deg) rotateY(360deg) rotateZ(20deg); } } /* ---- 3D tilt cards ---- */ [data-tilting] { transform-style: preserve-3d; } .card { position: relative; } .card .tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.10), transparent 60%); opacity: 0; transition: opacity 0.4s var(--ease-soft); z-index: 2; } .card.is-tilting .tilt-glare { opacity: 1; } /* ---- Frame-draw reveal (animated border on entrance) ---- */ .frame-reveal { position: relative; } .frame-reveal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--blue); pointer-events: none; z-index: 3; clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); } .frame-reveal.is-framed::before { clip-path: inset(0 0 0 0); } /* ---- Pinned process narrative ---- */ .process-rail.pin-active #process-fill { transition: none; } .process-step .pnum { transition: border-color 0.3s, color 0.3s; } .process-step.is-active .pnum { border-color: var(--blue); color: var(--blue); } .process-step h4, .process-step p { opacity: 0.4; transition: opacity 0.4s var(--ease-soft); } .process-step.is-active h4, .process-step.is-active p { opacity: 1; } /* ---- Disable touch/desktop-only effects everywhere they don't apply ---- */ @media (pointer: coarse), (prefers-reduced-motion: reduce) { } @media (max-width: 760px) { .scroll-3d-path { display: none; } .scroll-3d-stage { width: 104px; height: 104px; filter: drop-shadow(0 0 16px rgba(0, 255, 148, 0.22)) drop-shadow(0 0 28px rgba(129, 103, 255, 0.18)); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px) saturate(160%); } } @media (prefers-reduced-motion: reduce) { .scroll-3d-path, .scroll-3d-stage { display: none; } }