/* ========================================================================= MOTION LAYER ------------------------------------------------------------------------- Reconstructs riangle.com's scroll + hover motion, plus a red animated hero logo and a custom cursor. - Hover micro-interactions live in components.css (link underlines, nav roll, image zoom, capability width-axis, button glow…). This file adds the SCROLL reveals, the HERO LOGO, and the CURSOR. - Everything is gated behind `html.js-anim` so with JS off / reduced motion the page renders fully visible (see base.css fallbacks). ========================================================================= */ /* ------------------------------------------------------------------------- 1. SCROLL REVEALS — removed. Content renders in its final, fully visible state immediately, with no fade/slide/clip-path wipe on load or on scroll-into-view. (js/animations.js still adds/tracks the .is-in class for these elements; it's harmless and simply has no visual effect now.) ------------------------------------------------------------------------- */ [data-reveal], [data-reveal-heading] > span, .reveal-media, .reveal-media img { opacity: 1; transform: none; clip-path: none; } /* ------------------------------------------------------------------------- 2. HERO LOGO (red ribbon mark — replaces the WebGL prism) ------------------------------------------------------------------------- */ .hero__logo { position: absolute; left: 50%; top: 34%; width: min(64cqw, 62cqh); height: auto; transform: translate(-50%, -50%); overflow: visible; /* pointer parallax (js sets --px / --py in the range -1..1) */ translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 12px); transition: translate 0.4s var(--ease-standard), opacity 0.2s linear; filter: drop-shadow(0 20px 48px color-mix(in srgb, #f43333 26%, transparent)); } @media (min-width: 768px) { .hero__logo { width: min(46cqw, 48cqh); } } @media (min-width: 992px) { .hero__logo { left: 74%; top: 50%; width: min(38cqw, 42cqh); } } .hero__logo .blade { transform-box: fill-box; transform-origin: 50% 62%; /* per-blade parallax depth */ translate: calc(var(--px, 0) * (var(--i) + 1) * 5px) calc(var(--py, 0) * (var(--i) + 1) * 4px); } .hero__logo .blade__float { transform-box: fill-box; transform-origin: 50% 50%; } /* entrance animation removed — blades render in their final position immediately; the idle float below (gated on .hero.is-in) is unchanged */ .hero__logo .blade { opacity: 1; transform: none; } /* idle: gentle out-of-phase float once the intro has played */ html.js-anim .hero.is-in .hero__logo .blade__float { animation: bladeFloat calc(5s + var(--i) * 0.7s) ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * -1.7s); } @keyframes bladeFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4.5%) rotate(1.1deg); } } @media (prefers-reduced-motion: reduce) { .hero__logo .blade { opacity: 1 !important; transform: none !important; animation: none !important; } .hero__logo .blade__float { animation: none !important; } .hero__logo { translate: none !important; } } /* ------------------------------------------------------------------------- 4. MOUSE GLOW — a soft red light that follows the cursor, painted into the BACKGROUND of each section/hero/footer (z-index: -1, inside that element's own stacking context) so real content — text, cards, images, buttons — renders on top of it and the glow only ever shows through the empty background, never over the page's actual "things". Position math: js/mouse-glow.js keeps one document-space cursor position on (--glow-x / --glow-y, updated every frame — cheap arithmetic, no layout reads) plus each host's own document offset (--gx / --gy, measured only on load/resize/FAQ-toggle). The gradient centre is just the calc() difference of the two, so nothing is re-measured on scroll or on every mousemove. */ .hero, .section, .site-footer { position: relative; isolation: isolate; /* traps the ::before's z-index:-1 locally — without this it escapes to the root context and sinks below every other section's own opaque background, i.e. becomes invisible */ --gx: 0px; --gy: 0px; } .hero::before, .section::before, .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; background: radial-gradient( 420px circle at calc(var(--glow-x, 50vw) - var(--gx)) calc(var(--glow-y, 50vh) - var(--gy)), color-mix(in srgb, #f43333 9%, transparent) 0%, color-mix(in srgb, #f43333 3%, transparent) 45%, transparent 80% ); } html.js-mouse-glow .hero::before, html.js-mouse-glow .section::before, html.js-mouse-glow .site-footer::before { opacity: 1; } @media (pointer: coarse), (prefers-reduced-motion: reduce) { .hero::before, .section::before, .site-footer::before { display: none !important; } }