/* * loona-motion.css — support styles for the Loona motion engine * Deploy to: wp-content/mu-plugins/loona-motion/motion.css * * CORE PRINCIPLE: progressive enhancement. * Nothing is hidden unless has BOTH the motion hint AND `.is-anim-ready` * (the latter is added by JS only when GSAP loaded AND reduced-motion is OFF). * If JS never runs, or reduced-motion is on, every element stays visible. * * Brand gold: #c9b798 */ /* ────────────────────────────────────────────────────────────── 1. ANTI-FOUC for reveals & split headlines These selectors require `.is-anim-ready` on , which JS only sets when it will actually animate. Without it, content is visible. ────────────────────────────────────────────────────────────── */ /* Reveals: hidden state lives in JS (gsap.set), but we also guard the very first paint so there's no flash before JS runs its set(). Kept minimal. */ html.is-anim-ready [data-reveal] { will-change: transform, opacity; } /* Split headline: hide until SplitText has measured & wrapped lines. JS flips visibility:visible per element after splitting. */ html.is-anim-ready [data-split] { visibility: hidden; /* FAILSAFE: si SplitText nunca corre, revelar a los 2.5s para que el H1 (LCP) jamás quede invisible. El gsap.set inline (visibility:visible) gana antes. */ animation: lnaSplitFailsafe 0.01s linear 2.5s forwards; } @keyframes lnaSplitFailsafe { to { visibility: visible; } } /* The line-mask wrappers SplitText creates with mask:'lines'. GSAP applies overflow:clip itself, but we harden it here. */ .lna-line { display: block; will-change: transform; } [data-split] .lna-line { /* the mask parent that SplitText injects gets overflow:hidden by GSAP; this keeps descenders from being clipped too tightly */ padding-bottom: 0.05em; } /* ────────────────────────────────────────────────────────────── 2. CUSTOM CURSOR (.lna-cursor) ────────────────────────────────────────────────────────────── */ .lna-cursor { position: fixed; top: 0; left: 0; z-index: 99999; pointer-events: none; opacity: 0; transition: opacity 0.25s ease; mix-blend-mode: normal; } .lna-cursor.is-visible { opacity: 1; } /* Dot + ring are positioned at 0,0 and moved with gsap transforms (translate). We center each on the pointer with a -50% translate baked into the element. */ .lna-cursor__dot, .lna-cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .lna-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; /* center origin so gsap x/y == cursor coords */ background: #c9b798; } .lna-cursor__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(201, 183, 152, 0.55); transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; } /* Hover state over interactive elements: ring grows, dot shrinks. */ .lna-cursor.is-hover .lna-cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(201, 183, 152, 0.10); border-color: rgba(201, 183, 152, 0.85); } .lna-cursor.is-hover .lna-cursor__dot { opacity: 0; } /* Hide the native cursor only when our custom one is active (desktop, motion on). */ html.lna-has-cursor, html.lna-has-cursor a, html.lna-has-cursor button, html.lna-has-cursor [data-magnetic] { cursor: none; } /* ────────────────────────────────────────────────────────────── 3. MAGNETIC BUTTONS ────────────────────────────────────────────────────────────── */ [data-magnetic] { will-change: transform; display: inline-flex; /* so transforms don't collapse layout */ } /* ────────────────────────────────────────────────────────────── 4. MARQUEE [data-marquee] ────────────────────────────────────────────────────────────── */ [data-marquee] { display: flex; flex-wrap: nowrap; overflow: hidden; width: 100%; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); mask-image: linear-gradient( to right, transparent, #000 8%, #000 92%, transparent ); } [data-marquee] [data-marquee-track], [data-marquee] > * { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-right: clamp(2rem, 5vw, 5rem); will-change: transform; } /* ────────────────────────────────────────────────────────────── 5. LENIS (smooth scroll plumbing) The lenis.css from CDN sets html.lenis html{scroll-behavior:auto}. These add Loona-specific hardening. ────────────────────────────────────────────────────────────── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ────────────────────────────────────────────────────────────── 6. REDUCED MOTION — kill switch for everything ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* Force every enhanceable element visible, regardless of JS state. */ [data-reveal], [data-split] { opacity: 1 !important; visibility: visible !important; transform: none !important; } .lna-line { transform: none !important; } /* No custom cursor, restore native pointer. */ .lna-cursor { display: none !important; } html.lna-has-cursor, html.lna-has-cursor a, html.lna-has-cursor button { cursor: auto !important; } /* No marquee motion. */ [data-marquee] [data-marquee-track] { transform: none !important; } }