/* ============================================================ motion.css — brand motion layer for lifedesignbox landing pages Progressive enhancement: initial hidden states apply ONLY when is set (by the inline head guard, which respects prefers-reduced-motion and drops itself after a timeout so content can never stay hidden). No JS / reduced motion = full content, no flash. ============================================================ */ /* scroll progress bar (top hairline) */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(215, 181, 109, 0.2), var(--code) 60%, var(--rust)); box-shadow: 0 0 0.6rem rgba(240, 207, 130, 0.5); z-index: 300; pointer-events: none; opacity: 0.9; } /* elements the motion layer reveals get hidden up-front only under .motion */ html.motion [data-reveal], html.motion .lp-section > *, html.motion .band > *, html.motion .sites > div, html.motion .type-grid article, html.motion .steps article, html.motion .gets li, html.motion .flow li, html.motion .qlist li, html.motion .honesty li, html.motion .faq details, html.motion .founder, html.motion .vow, html.motion .quote, html.motion .os-card, html.motion .pull p { opacity: 0; will-change: transform, opacity; } /* the hero copy intro (children of the hero copy block) */ html.motion .lp-inner > *, html.motion .hero-copyblock > *, html.motion .hero-card { opacity: 0; } /* once motion.js has run its intro / created triggers it flips this on; any element the script explicitly finishes gets inline styles from GSAP. Safety net: if the ready flag is set but an element was never triggered (e.g. above-the-fold list), reveal it. */ html.motion-failed [data-reveal], html.motion-failed .lp-section > *, html.motion-failed .band > *, html.motion-failed .sites > div, html.motion-failed .type-grid article, html.motion-failed .steps article, html.motion-failed .gets li, html.motion-failed .flow li, html.motion-failed .qlist li, html.motion-failed .honesty li, html.motion-failed .faq details, html.motion-failed .founder, html.motion-failed .vow, html.motion-failed .quote, html.motion-failed .os-card, html.motion-failed .pull p, html.motion-failed .lp-inner > *, html.motion-failed .hero-copyblock > *, html.motion-failed .hero-card { opacity: 1 !important; transform: none !important; } /* split-headline word wrappers */ .word-line { display: inline-block; overflow: hidden; vertical-align: top; } .word-line > .word-inner { display: inline-block; } /* magnetic button wrapper keeps layout stable while inner translates */ .mag { display: inline-block; will-change: transform; } /* pull line accent gets a soft animated glow when revealed */ .pull p span { text-shadow: 0 0 1.4rem rgba(240, 207, 130, 0); transition: text-shadow 600ms var(--ease); } .pull.is-lit p span { text-shadow: 0 0 1.6rem rgba(240, 207, 130, 0.35); } /* cursor hover state (paired with existing pixel cursor) */ @media (pointer: fine) { .pixel-cursor.is-hover .pixel-cursor-dot { width: 1.15rem; height: 1.15rem; background: rgba(240, 207, 130, 0.18); box-shadow: 0 0 0 1.5px rgba(240, 207, 130, 0.9), 0 0 1rem rgba(240, 207, 130, 0.6), 0 0 2rem rgba(215, 99, 46, 0.4); } } /* respect reduced motion no matter what */ @media (prefers-reduced-motion: reduce) { html.motion [data-reveal], html.motion .lp-section > *, html.motion .band > *, html.motion .sites > div, html.motion .type-grid article, html.motion .steps article, html.motion .gets li, html.motion .flow li, html.motion .qlist li, html.motion .honesty li, html.motion .faq details, html.motion .founder, html.motion .vow, html.motion .quote, html.motion .os-card, html.motion .pull p, html.motion .lp-inner > *, html.motion .hero-copyblock > *, html.motion .hero-card { opacity: 1 !important; transform: none !important; } .scroll-progress { display: none; } }