/* ─── Ambient layer (slow drift, no layout shift) ─── */ .page-aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } /* JS sets --motion-tier (cinematic|stable) and --motion-intensity (1|~0.78 on touch) on */ :root { --motion-tier: cinematic; --motion-intensity: 1; } .aurora { position: absolute; border-radius: 50%; filter: blur(94px); opacity: 0.4; animation: aurora-float 30s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } /* Mobile / touch / short viewports: calmer aurora (compositor + scroll stability) */ @media (max-width: 899px), (max-height: 540px), (hover: none) { .aurora { filter: blur(72px); opacity: 0.28; animation-duration: 38s; } } .aurora--1 { width: min(72vw, 520px); height: min(72vw, 520px); background: radial-gradient(circle, var(--sn-aurora-1-core, rgba(59, 130, 246, 0.35)) 0%, transparent 70%); top: -12%; right: -8%; animation-delay: 0s; } .aurora--2 { width: min(60vw, 420px); height: min(60vw, 420px); background: radial-gradient(circle, var(--sn-aurora-2-core, rgba(99, 102, 241, 0.22)) 0%, transparent 68%); bottom: 5%; left: -15%; animation-delay: -7s; animation-duration: 28s; } .aurora--3 { width: min(50vw, 360px); height: min(50vw, 360px); background: radial-gradient(circle, var(--sn-aurora-3-core, rgba(14, 165, 233, 0.2)) 0%, transparent 65%); top: 42%; left: 35%; animation-delay: -14s; animation-duration: 25s; } @keyframes aurora-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, 6%) scale(1.06); } 66% { transform: translate(-5%, -4%) scale(0.94); } } /* Stack content above aurora */ .site-header, .site-main, .site-footer { position: relative; z-index: 1; } /* ─── Header entrance (page open) — calm, no bounce ─── */ .motion-ready .site-header { animation: header-slide calc(var(--motion-reveal-duration) * 0.9) var(--motion-reveal-ease) both; } @keyframes header-slide { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .motion-ready .site-nav a { opacity: 0; animation: nav-pop var(--motion-reveal-duration) var(--motion-reveal-ease) both; } .motion-ready .site-nav a:nth-child(1) { animation-delay: 0s; } .motion-ready .site-nav a:nth-child(2) { animation-delay: 0.08s; } .motion-ready .site-nav a:nth-child(3) { animation-delay: 0.16s; } .motion-ready .site-nav a:nth-child(4) { animation-delay: 0.24s; } .motion-ready .site-nav a:nth-child(5) { animation-delay: 0.32s; } .motion-ready .site-nav a:nth-child(6) { animation-delay: 0.4s; } .motion-ready .site-nav a:nth-child(7) { animation-delay: 0.48s; } .motion-ready .site-nav a:nth-child(8) { animation-delay: 0.56s; } .motion-ready .site-nav a:nth-child(9) { animation-delay: 0.64s; } .motion-ready .site-nav a:nth-child(10) { animation-delay: 0.72s; } @keyframes nav-pop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Drawer links are display:none until open — nav-pop never finishes → stuck invisible */ @media (max-width: 879px) { .motion-ready .site-nav a, .motion-ready .site-nav .btn-nav { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; } /* * Header uses transform + filter in header-slide, and backdrop-filter in CSS. * Those create a containing block for position:fixed descendants (WebKit/Safari), * so the drawer’s bottom:0 was the header bottom → ~0 height. Reset on mobile. */ .motion-ready .site-header { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } .motion-ready .site-logo--img { opacity: 0; animation: logo-land var(--motion-reveal-duration) var(--motion-reveal-ease) 0.08s both; } /* Hero: hidden until boot finishes (no flash before animation) */ .motion-ready:not(.motion-booted) .hero [data-hero-item] { opacity: 0; } /* Hero media plate: scroll-driven (see motion.js) */ @keyframes logo-land { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ─── Hero stagger (after motion-booted) ─── */ .motion-booted .hero [data-hero-item] { animation: hero-piece var(--motion-reveal-duration) var(--motion-reveal-ease) both; } .motion-booted .hero [data-hero-item="1"] { animation-delay: 0s; } .motion-booted .hero [data-hero-item="2"] { animation-delay: var(--motion-stagger-step); } .motion-booted .hero [data-hero-item="3"] { animation-delay: calc(var(--motion-stagger-step) * 2); } .motion-booted .hero [data-hero-item="4"] { animation-delay: calc(var(--motion-stagger-step) * 3); } .motion-booted .hero [data-hero-item="5"] { animation-delay: calc(var(--motion-stagger-step) * 4); } @keyframes hero-piece { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Hero CTAs: same motion as [data-hero-item="5"] wrapper — avoid double-animating children */ /* ─── Scroll reveals (match Dreelio-style system: 20px / 600ms / stagger 100ms) ─── */ [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.992); transition: opacity var(--motion-reveal-duration) var(--motion-reveal-ease), transform var(--motion-reveal-duration) var(--motion-reveal-ease); will-change: transform, opacity; } [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } [data-reveal] [data-reveal-item] { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.994); transition: opacity var(--motion-reveal-duration) var(--motion-reveal-ease), transform var(--motion-reveal-duration) var(--motion-reveal-ease); transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger-step)); will-change: transform, opacity; } [data-reveal].is-revealed [data-reveal-item] { opacity: 1; transform: translate3d(0, 0, 0); } /* Typography enters in layers (headline before support copy). */ [data-reveal] > h2, [data-reveal] > .chapter-headline { transition-delay: 0.02s; } [data-reveal] > .section-intro, [data-reveal] > p[data-reveal-item] { transition-delay: 0.12s; } /* Card grids: same vertical reveal, no 3D tilt (smoother, less jitter) */ [data-reveal-cards] .feature-card[data-reveal-item], [data-reveal-cards] .process-card[data-reveal-item], [data-reveal-cards] .experience-card[data-reveal-item], [data-reveal-cards] .testimonial-card[data-reveal-item] { transform: translate3d(0, 20px, 0) scale(0.992); transform-origin: center center; } [data-reveal-cards].is-revealed .feature-card[data-reveal-item], [data-reveal-cards].is-revealed .process-card[data-reveal-item], [data-reveal-cards].is-revealed .experience-card[data-reveal-item], [data-reveal-cards].is-revealed .testimonial-card[data-reveal-item] { transform: translate3d(0, 0, 0) scale(1); } /* ─── Buttons: subtle lift (no sheen sweep — less visual noise) ─── */ .btn { position: relative; overflow: hidden; } .btn-primary:hover { transform: translateY(-3px); transition: transform var(--motion-btn-hover-duration) var(--motion-btn-hover-ease), box-shadow var(--motion-btn-hover-duration) var(--motion-btn-hover-ease); box-shadow: 0 12px 28px rgba(10, 15, 26, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; } .btn-secondary:hover { transform: translateY(-3px); transition: transform var(--motion-btn-hover-duration) var(--motion-btn-hover-ease), box-shadow var(--motion-btn-hover-duration) var(--motion-btn-hover-ease), border-color var(--motion-btn-hover-duration) var(--motion-btn-hover-ease); border-color: rgba(10, 15, 26, 0.16); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } .btn { transition: transform var(--motion-btn-hover-duration) var(--motion-btn-hover-ease), box-shadow var(--motion-btn-hover-duration) var(--motion-btn-hover-ease), border-color var(--motion-btn-hover-duration) var(--motion-btn-hover-ease); } .btn:active { transform: translateY(-1px) scale(0.98); } /* ─── Cards & blocks: unified −4px / 220ms (premium, calm) ─── */ .feature-card, .sudo-block, .cta-panel, .process-card, .experience-card, .testimonial-card { transition: transform var(--motion-card-hover-duration) var(--motion-reveal-ease), box-shadow var(--motion-card-hover-duration) var(--motion-reveal-ease), border-color var(--motion-card-hover-duration) var(--motion-reveal-ease); } .feature-card:hover { transform: translateY(-6px); border-color: var(--primary-border); box-shadow: 0 14px 34px rgba(59, 130, 246, 0.14); } .sudo-block:hover { transform: translateY(-6px); box-shadow: 0 16px 42px rgba(59, 130, 246, 0.11); } .cta-panel:hover { transform: translateY(-6px); box-shadow: 0 24px 54px rgba(59, 130, 246, 0.16); } .process-card:hover, .experience-card:hover, .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); } /* ─── Section headings: accent line draws on reveal ─── */ [data-reveal] > h2 { position: relative; padding-bottom: 0.55rem; } [data-reveal] > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.25rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--primary), rgba(59, 130, 246, 0.15)); transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-reveal-duration) var(--motion-reveal-ease); transition-delay: 0.12s; } [data-reveal].is-revealed > h2::after { transform: scaleX(1); } [data-reveal][data-cta-panel] > h2::after { left: 50%; right: auto; transform: translateX(-50%) scaleX(0); } [data-reveal][data-cta-panel].is-revealed > h2::after { transform: translateX(-50%) scaleX(1); } .features.three { perspective: 1400px; } /* ─── Reduced motion: instant state ─── */ .motion-reduced .aurora, .motion-reduced .site-header, .motion-reduced .site-nav a, .motion-reduced .site-logo--img, .motion-reduced .hero [data-hero-item], .motion-reduced .hero [data-hero-item], .motion-reduced .hero-v3__card-shell { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .motion-reduced [data-parallax] { transform: none !important; } .motion-reduced .icon-orb, .motion-reduced .icon-orb::after, .motion-reduced .scroll-hint__chev { animation: none !important; } /* Spin reveal should be disabled in reduced motion */ .motion-reduced [data-reveal].is-revealed .icon-orb svg { animation: none !important; transform: none !important; } .motion-reduced [data-reveal], .motion-reduced [data-reveal] [data-reveal-item] { opacity: 1 !important; transform: none !important; transition: none !important; } /* OS-level reduced motion: keep static aurora washes (no drift / no flashes). */ @media (prefers-reduced-motion: reduce) { .aurora { animation: none !important; } .aurora, body.landing-v2 .page-aurora .aurora { transform: translate(0, 0) scale(1) !important; } } .motion-reduced .feature-card:hover, .motion-reduced .sudo-block:hover, .motion-reduced .cta-panel:hover, .motion-reduced .process-card:hover, .motion-reduced .experience-card:hover, .motion-reduced .testimonial-card:hover { transform: none; } @media (hover: none) and (pointer: coarse) { .feature-card:hover, .sudo-block:hover, .cta-panel:hover, .process-card:hover, .experience-card:hover, .testimonial-card:hover { transform: none; } .feature-card:active { transform: translateY(-2px); } .sudo-block:active { transform: translateY(-2px); } .cta-panel:active { transform: translateY(-2px); } } @media (prefers-color-scheme: dark) { .aurora--1 { opacity: 0.35; } .aurora--2 { opacity: 0.28; } .aurora--3 { opacity: 0.22; } } /* * Touch / coarse-pointer choreography: not “smaller desktop,” compositor-safe timelines. * html classes set from js/lite-ui.js + js/motion.js (must match isCinematicMotion()). */ html.choreography-touch body.landing-v2 .section-global-intel .global-intel__globe-map--b { animation: none !important; opacity: 0.36; } html.choreography-touch body.landing-v2 .section-global-intel .global-intel__globe-map--a { animation-duration: 118s; } html.choreography-touch body.landing-v2 .iphone-showcase__pin, html.choreography-touch body.landing-v2 #app-preview .iphone-showcase__pin { min-height: calc(4.15 * 100dvh) !important; min-height: calc(4.15 * 100svh) !important; } html.choreography-touch body.landing-v2 .iphone-frame__slides { transition: none !important; } html.choreography-touch body.landing-v2 #app-story .app-story__pin { min-height: calc(2.82 * 100dvh) !important; min-height: calc(2.82 * 100svh) !important; } /* ============================================================ PREMIUM MOTION — v2 Cinematic Reveals ============================================================ */ /* Enhanced aurora */ .aurora { animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } /* Cinematic hero entrance — elements stagger in */ .motion-booted .hero-v3__inner [data-hero-item] { animation: hero-item-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; } .motion-booted [data-hero-item="1"] { animation-delay: 0.05s; } .motion-booted [data-hero-item="2"] { animation-delay: 0.15s; } .motion-booted [data-hero-item="3"] { animation-delay: 0.25s; } .motion-booted [data-hero-item="4"] { animation-delay: 0.38s; } .motion-booted [data-hero-item="5"] { animation-delay: 0.52s; } .motion-booted [data-hero-item="6"] { animation-delay: 0.65s; } @keyframes hero-item-in { from { opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(3px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* Smooth section entry */ [data-reveal] { transition: opacity 0.5s ease; } /* Premium stagger for cards */ [data-reveal-cards] .process-card:nth-child(1), [data-reveal-cards] .feature-card:nth-child(1), [data-reveal-cards] .experience-card:nth-child(1), [data-reveal-cards] .testimonial-card:nth-child(1) { --reveal-i: 0; } [data-reveal-cards] .process-card:nth-child(2), [data-reveal-cards] .feature-card:nth-child(2), [data-reveal-cards] .experience-card:nth-child(2), [data-reveal-cards] .testimonial-card:nth-child(2) { --reveal-i: 1; } [data-reveal-cards] .process-card:nth-child(3), [data-reveal-cards] .feature-card:nth-child(3), [data-reveal-cards] .experience-card:nth-child(3), [data-reveal-cards] .testimonial-card:nth-child(3) { --reveal-i: 2; } [data-reveal-cards] .process-card:nth-child(4), [data-reveal-cards] .feature-card:nth-child(4), [data-reveal-cards] .experience-card:nth-child(4) { --reveal-i: 3; } [data-reveal-cards] .feature-card:nth-child(5) { --reveal-i: 4; } [data-reveal-cards] .feature-card:nth-child(6) { --reveal-i: 5; } /* Focus ring accessibility */ :focus-visible { outline: 2px solid var(--sn-accent, #3b6fff); outline-offset: 3px; border-radius: 4px; } /* Skip to main content */ .skip-nav { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1rem; background: var(--sn-accent); color: white; border-radius: 0 0 8px 8px; font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: top 0.2s; } .skip-nav:focus { top: 0; }