@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap'); :root { --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { margin: 0; background: #ffffff; color: #000000; font-family: var(--font-sans); overflow-x: hidden; } ::selection { background: #000; color: #fff; } /* ============================================================ MOTION SYSTEM Entrance states only apply once has .js-anim, which is added by an inline script ONLY when the document is visible. When the page renders hidden (export/verify), elements show their final state instead of being stuck pre-animation. ============================================================ */ /* Reveal — blur-up */ .reveal { opacity: 1; transform: none; filter: none; } html.js-anim .reveal { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); will-change: opacity, transform, filter; } html.js-anim .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } /* Hero media fade + scale */ .hero-media { opacity: 1; transform: none; } html.js-anim .hero-media { opacity: 0; transform: scale(1.05); transition: opacity 1.8s ease, transform 1.8s ease; } html.js-anim .hero-media.is-in { opacity: 1; transform: scale(1); } /* Hero headline entrance */ .hero-text { opacity: 1; transform: none; } html.js-anim .hero-text { opacity: 0; transform: translateY(15px); transition: opacity 1.4s ease 0.2s, transform 1.4s ease 0.2s; } html.js-anim .hero-text.is-in { opacity: 1; transform: translateY(0); } /* Word-mask reveal (hero clip lines) */ .line-mask { overflow: hidden; } .line-mask > span { display: inline-block; transform: none; } html.js-anim .line-mask > span { transform: translateY(110%); transition: transform 1.1s var(--ease); } html.js-anim .line-mask.is-in > span { transform: translateY(0); } /* SVG path draw (hypnogram / sparkline) */ .draw-path { stroke-dashoffset: 0; } html.js-anim .draw-path { stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset 1.9s var(--ease); } html.js-anim .in .draw-path { stroke-dashoffset: 0; } /* Grow bar (sleep stages / breakdown) */ .grow-x { transform: scaleX(1); transform-origin: left; } html.js-anim .grow-x { transform: scaleX(0); transition: transform 1.3s var(--ease); } html.js-anim .in .grow-x { transform: scaleX(1); } /* ============================================================ CONTINUOUS / DECORATIVE ============================================================ */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marquee linear infinite; will-change: transform; } .marquee-wrap:hover .marquee-track { animation-play-state: paused; } @keyframes spinSlow { to { transform: rotate(360deg); } } .spin-slow { transform-box: fill-box; transform-origin: center; animation: spinSlow 40s linear infinite; } .spin-rev { transform-box: fill-box; transform-origin: center; animation: spinSlow 28s linear infinite reverse; } @keyframes pulseDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .pulse-dot { animation: pulseDot 2.2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; } @keyframes haloPulse { 0% { transform: scale(0.7); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } } .halo { transform-box: fill-box; transform-origin: center; animation: haloPulse 2.6s var(--ease) infinite; } @keyframes sheenSpin { to { transform: rotate(360deg); } } .sheen { animation: sheenSpin 9s linear infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .floaty { animation: floaty 7s ease-in-out infinite; } /* Scroll cue */ .scroll-cue-line { position: relative; overflow: hidden; } .scroll-cue-line::after { content: ""; position: absolute; inset: 0; background: #000; transform: translateY(-100%); animation: cueDrop 2.4s var(--ease) infinite; } @keyframes cueDrop { 0% { transform: translateY(-100%); } 45% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* Hover lift */ .lift { transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), opacity 0.4s var(--ease), color 0.4s var(--ease); } .lift:hover { transform: translateY(-2px); } .magnetic { transition: transform 0.45s var(--ease); } /* Accordion */ .acc-grid { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); } .acc-grid.open { grid-template-rows: 1fr; } .acc-inner { overflow: hidden; min-height: 0; } /* Tactile film grain */ .grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { html.js-anim .reveal, html.js-anim .hero-media, html.js-anim .hero-text, html.js-anim .line-mask > span, html.js-anim .draw-path, html.js-anim .grow-x { opacity: 1 !important; transform: none !important; filter: none !important; stroke-dashoffset: 0 !important; transition: none !important; } .spin-slow, .spin-rev, .pulse-dot, .halo, .sheen, .floaty, .marquee-track, .scroll-cue-line::after { animation: none !important; } }