/* ─── SOLAR SYSTEM — Boot experience ────────────────────────────────────────── * Styles for the boot overlays: mobile gate (this commit), load screen + intro * (later commits). All scoped/prefixed so nothing collides with the app CSS. */ /* ===== Mobile gate (light-only, terminal) =================================== * Shown INSTEAD of booting the app on phones / small or touch devices. The app * modules never load on mobile, so this is the only thing on screen. Ported * 1:1 from SOLAR_SYSTEM_mobile.html (preview chrome stripped); .gate → the * #ss-mobile-gate id, inner classes renamed .ssg-* to avoid colliding with the * app's generic .logo/.copy/.footer. SVGs are external (gate is fixed-color). */ #ss-mobile-gate { position: fixed; inset: 0; z-index: 2147483000; container-type: inline-size; display: none; /* shown only when html.ss-mobile (see below) */ flex-direction: column; align-items: center; justify-content: center; padding-bottom: 38%; background: #fcfbfa; overflow: hidden; --ink: #060606; } html.ss-mobile #ss-mobile-gate { display: flex; } html.ss-mobile, html.ss-mobile body { overflow: hidden; } #ss-mobile-gate .ssg-logo { position: relative; width: 84%; transform: translateX(2%); aspect-ratio: 1 / 1; } #ss-mobile-gate .ssg-logo > .ssg-wm, #ss-mobile-gate .ssg-logo > .ssg-sunwrap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #ss-mobile-gate .ssg-wm { z-index: 1; } #ss-mobile-gate .ssg-sunwrap { z-index: 2; transform-origin: 47.8% 35.3%; } #ss-mobile-gate .ssg-sun { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 47.8% 35.3%; } #ss-mobile-gate .ssg-copy { position: relative; z-index: 2; /* sits ABOVE the footer so its text is never covered */ width: 80%; margin-top: 7%; display: flex; flex-direction: column; gap: 0.9em; text-align: center; text-transform: uppercase; color: var(--ink); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(13px, 5.8cqw, 30px); line-height: 1.34; letter-spacing: 0.015em; } #ss-mobile-gate .ssg-copy p { margin: 0; } #ss-mobile-gate .ssg-footer { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 80%; display: block; z-index: 1; /* below the copy */ -webkit-tap-highlight-color: transparent; } #ss-mobile-gate .ssg-footer img { width: 100%; display: block; } /* motion: idle slow sun rotation (110s) + "Unified" entrance (plays once on mount) */ #ss-mobile-gate.play .ssg-sun { animation: ssg-spin 110s linear infinite; } #ss-mobile-gate.play .ssg-sunwrap { animation: ssg-bloomSoft 1.6s cubic-bezier(.12,.85,.22,1) both; } #ss-mobile-gate.play .ssg-wm { animation: ssg-focus 1.6s ease-out both; } #ss-mobile-gate.play .ssg-copy { animation: ssg-focusUp 1.1s ease-out .52s both; } #ss-mobile-gate.play .ssg-footer { animation: ssg-focusFoot 1.1s ease-out .7s both; } @keyframes ssg-spin { to { transform: rotate(360deg); } } @keyframes ssg-bloomSoft { from { opacity: 0; transform: scale(.84); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes ssg-focus { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } } @keyframes ssg-focusUp { from { opacity: 0; filter: blur(10px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @keyframes ssg-focusFoot { from { opacity: 0; filter: blur(10px); transform: translateX(-50%) translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(0); } } @media (prefers-reduced-motion: reduce) { #ss-mobile-gate.play * { animation: none !important; } } /* ===== General load screen (opaque cover, theme-reactive) =================== * Ported 1:1 from SOLAR_SYSTEM_loadscreen_HANDOFF.html (boot v28), preview * chrome dropped, scoped under #ss-load and made a full-viewport opaque cover * (the asset's framed 16:9 plaque becomes edge-to-edge). Theme follows the * persisted app mode via html.ss-light (set in the boot script, no flash): * eclipse → dark (default), light mode → near-white. --p (0..1) drives the wave * fill + scan head; .pct .num shows the %. */ @property --logo-sun { syntax: ''; inherits: true; initial-value: #ff6a13; } #ss-load { position: fixed; inset: 0; z-index: 2147482000; /* above the app, below the mobile gate */ --orange: #ff6a13; --stage-bg: #000; --line: #f3f0ea; --dim: rgba(243,240,234,0.5); background: var(--stage-bg); opacity: 1; transition: opacity 300ms ease; } html.ss-light #ss-load { --stage-bg: #fcfbfa; --line: #0a0a0a; --dim: rgba(10,10,10,0.45); } html.ss-mobile #ss-load { display: none; } /* mobile shows the gate instead */ html.ss-introload #ss-load { display: none; } /* intro stands in for the load screen this load */ #ss-load.ss-hidden { opacity: 0; pointer-events: none; } #ss-load .ss-screen { position: absolute; inset: 0; background: var(--stage-bg); overflow: hidden; transition: background 0.4s; } #ss-load .ss-screen path { vector-effect: non-scaling-stroke; } #ss-load .plaque { position: absolute; inset: 0; width: 100%; height: 100%; } #ss-load .rg { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; } #ss-load .trackline { opacity: 0.12; } #ss-load .activeline { opacity: 0.92; } #ss-load .active { clip-path: inset(0 calc((1 - var(--p,0)) * 100%) 0 0); } #ss-load .scan { position: absolute; top: 64%; bottom: 6%; width: 1px; background: var(--orange); left: calc(var(--p,0) * 100%); opacity: 0.85; box-shadow: 0 0 9px var(--orange); } #ss-load .logo { position: absolute; left: 50%; top: 44%; width: 40%; transform: translate(-50%,-50%); --logo-sun: var(--orange); --logo-text: var(--line); pointer-events: none; } #ss-load .logo svg { width: 100%; height: auto; display: block; animation: ssLogoPop 1s cubic-bezier(0.4,0,0.2,1) 0.2s both; } @keyframes ssLogoPop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } #ss-load .alpha { position: absolute; left: 42.16%; top: 56.85%; width: 25.0%; display: flex; justify-content: space-between; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 200; font-size: 20px; color: var(--line); white-space: nowrap; opacity: 0; animation: ssFadeIn 0.8s ease-out 1.1s forwards; } #ss-load .alpha .sp { flex: 0 0 0.6em; } @keyframes ssFadeIn { to { opacity: 0.92; } } #ss-load .pctline { position: absolute; left: 14px; top: 12px; display: flex; align-items: baseline; opacity: 0; animation: ssFadeIn 0.6s ease-out 1.3s forwards; } #ss-load .pct { display: inline-flex; align-items: baseline; color: var(--orange); font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; font-variant-numeric: tabular-nums; } #ss-load .pct .sym { margin-left: 1px; } @media (prefers-reduced-motion: reduce) { #ss-load .logo svg, #ss-load .alpha, #ss-load .pctline { animation: none !important; opacity: 1 !important; } } /* ===== Canonical intro — Option A / CLEAN (mockups v33) ===================== * Ported 1:1 from SOLAR_SYSTEM_intro_optionA.html (base option only; B/C + * preview chrome dropped). Scoped under #ss-intro; animations run ONCE (the * preview loops infinite) and only while .ss-playing is set, so playIntro() can * (re)start them. Theme-reactive via html.ss-light. Reuses #ss-logo (already in * the DOM from the load screen); the sun uses #ss-sun-only (added near #ss-load). */ @property --logo-text { syntax: ''; inherits: true; initial-value: #f3f0ea; } #ss-intro { position: fixed; inset: 0; z-index: 2147481000; /* above app, below the load screen */ --orange:#ff6a13; --bone:#f3f0ea; --ink:#060606; --dim:rgba(243,240,234,0.40); --p-sources:#03ff74; --p-seq:#FF4040; --p-mod:#5B7FFF; --p-proc:#ff7cae; --p-accent:#fdff56; --p-worm:#9b6bff; background: var(--ink); overflow: hidden; display: none; opacity: 1; transition: opacity 300ms ease; } html.ss-light #ss-intro { --ink:#fcfbfa; --bone:#060606; --dim:rgba(10,10,10,0.40); } html.ss-introload #ss-intro { display: block; } /* opaque intro cover up from first paint (no load screen first) */ #ss-intro.ss-hidden { opacity: 0; pointer-events: none; } /* ONE sun, larger, vertically centered, left half */ #ss-intro .giant-sun { position:absolute; left:27%; top:50%; transform:translate(-50%,-50%); width:40%; z-index:5; opacity:0; } #ss-intro.ss-playing .giant-sun { animation:ssSunSpinIn 4s cubic-bezier(0.33,1.18,0.4,1) both; } #ss-intro .giant-sun svg { width:100%; height:auto; display:block; --logo-sun:var(--orange); } #ss-intro.ss-playing .giant-sun svg { animation:ssSunCycle 4s steps(1,end); } @keyframes ssSunSpinIn { 0%,26%{opacity:0; transform:translate(-50%,-50%) scale(0.6) rotate(-150deg);} 34%{opacity:1; transform:translate(-50%,-50%) scale(1.04) rotate(6deg);} 40%{transform:translate(-50%,-50%) scale(1) rotate(0);} 90%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0);} 100%{opacity:0;} } @keyframes ssSunCycle { 0%,10%{--logo-sun:var(--orange);} 11%,20%{--logo-sun:#03ff74;} 21%,31%{--logo-sun:#5B7FFF;} 32%,42%{--logo-sun:#fdff56;} 43%,53%{--logo-sun:#FF4040;} 54%,64%{--logo-sun:#ff7cae;} 65%,75%{--logo-sun:#9b6bff;} 76%,100%{--logo-sun:var(--orange);} } /* right-column lockup: wordmark / version / module list */ #ss-intro .rightcol { position:absolute; right:5.5%; top:53%; transform:translateY(-50%); width:39%; z-index:6; display:flex; flex-direction:column; } #ss-intro .wordmark { width:100%; opacity:0; } #ss-intro.ss-playing .wordmark { animation:ssFadeCycle 4s steps(1,end); } #ss-intro .wordmark svg { width:100%; height:auto; display:block; --logo-text:var(--bone); } @keyframes ssFadeCycle { 0%,30%{opacity:0;} 36%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } #ss-intro .verline { margin-top:14px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:100; font-size:15px; letter-spacing:0.42em; text-transform:uppercase; color:var(--bone); opacity:0; } #ss-intro.ss-playing .verline { animation:ssFadeCycle 4s steps(1,end) 0.16s; } #ss-intro .modules { margin-top:24px; font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; line-height:1.72; color:var(--bone); } #ss-intro .mod { display:flex; gap:16px; align-items:center; opacity:0; } #ss-intro .mod-num { width:28px; color:var(--mc); } #ss-intro .mod-name { flex:1; } #ss-intro .mod-dot { width:7px; height:7px; border-radius:50%; background:var(--mc); } #ss-intro .mod:nth-child(1){--mc:var(--p-sources);} #ss-intro .mod:nth-child(2){--mc:var(--p-mod);} #ss-intro .mod:nth-child(3){--mc:var(--p-accent);} #ss-intro .mod:nth-child(4){--mc:var(--p-seq);} #ss-intro .mod:nth-child(5){--mc:var(--p-proc);} #ss-intro .mod:nth-child(6){--mc:var(--p-worm);} #ss-intro .mod:nth-child(7){--mc:var(--orange);} #ss-intro.ss-playing .mod:nth-child(1){animation:ssModA1 4s steps(1,end);} #ss-intro.ss-playing .mod:nth-child(2){animation:ssModA2 4s steps(1,end);} #ss-intro.ss-playing .mod:nth-child(3){animation:ssModA3 4s steps(1,end);} #ss-intro.ss-playing .mod:nth-child(4){animation:ssModA4 4s steps(1,end);} #ss-intro.ss-playing .mod:nth-child(5){animation:ssModA5 4s steps(1,end);} #ss-intro.ss-playing .mod:nth-child(6){animation:ssModA6 4s steps(1,end);} #ss-intro.ss-playing .mod:nth-child(7){animation:ssModA7 4s steps(1,end);} @keyframes ssModA1 { 0%,33%{opacity:0;} 36%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } @keyframes ssModA2 { 0%,35%{opacity:0;} 38%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } @keyframes ssModA3 { 0%,37%{opacity:0;} 40%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } @keyframes ssModA4 { 0%,39%{opacity:0;} 42%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } @keyframes ssModA5 { 0%,41%{opacity:0;} 44%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } @keyframes ssModA6 { 0%,43%{opacity:0;} 46%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } @keyframes ssModA7 { 0%,45%{opacity:0;} 48%{opacity:1;} 90%{opacity:1;} 95%{opacity:0;} 100%{opacity:0;} } /* sweep panes — colored bars wipe across in sequence */ #ss-intro .sweep { position:absolute; inset:0; z-index:2; } #ss-intro .pane { position:absolute; inset:0; transform:translateX(-100%); } #ss-intro .pane:nth-child(1){background:var(--p-sources);} #ss-intro .pane:nth-child(2){background:var(--p-mod);} #ss-intro .pane:nth-child(3){background:var(--p-accent);} #ss-intro .pane:nth-child(4){background:var(--p-seq);} #ss-intro .pane:nth-child(5){background:var(--p-proc);} #ss-intro .pane:nth-child(6){background:var(--p-worm);} #ss-intro .pane:nth-child(7){background:var(--ink);} #ss-intro.ss-playing .pane{animation:ssPaneSweep 4s cubic-bezier(0.7,0,0.3,1);} #ss-intro.ss-playing .pane:nth-child(1){animation-delay:0.10s;} #ss-intro.ss-playing .pane:nth-child(2){animation-delay:0.17s;} #ss-intro.ss-playing .pane:nth-child(3){animation-delay:0.24s;} #ss-intro.ss-playing .pane:nth-child(4){animation-delay:0.31s;} #ss-intro.ss-playing .pane:nth-child(5){animation-delay:0.38s;} #ss-intro.ss-playing .pane:nth-child(6){animation-delay:0.45s;} #ss-intro.ss-playing .pane:nth-child(7){animation-delay:0.52s;} @keyframes ssPaneSweep { 0%{transform:translateX(-100%);} 11%{transform:translateX(0);} 16%{transform:translateX(0);} 27%{transform:translateX(100%);} 100%{transform:translateX(100%);} } @media (prefers-reduced-motion: reduce) { #ss-intro.ss-playing * { animation: none !important; } } /* ===== Intro text crawl (FIRST-RUN only) ==================================== * Plays between the Option A intro and the onboarding panels. Blade-Runner-style: * a left-justified column whose blocks fade in (blur→focus) one after another and * ACCUMULATE (full layout reserved up front — nothing shifts), then the real * #ss-logo lockup blooms in orange. Dark by default (it runs in the forced-dark * first run); theme-reactive via html.ss-light. All timings are CSS vars below * for tuning. z below #ss-intro so the intro fades OVER it (both dark → seamless). */ #ss-crawl { position: fixed; inset: 0; z-index: 2147480500; /* above app/panels, below #ss-intro (2147481000) */ --orange: #ff6a13; --bone: #f3f0ea; --ink: #060606; --ss-crawl-block-fade: 900ms; /* each block's fade-in duration */ --ss-crawl-block-gap: 900ms; /* delay between one block starting and the next */ --ss-crawl-lockup-delay: 450ms; /* pause after the last block before the lockup blooms */ --ss-crawl-lockup-bloom: 2300ms;/* lockup bloom-in duration */ --ss-crawl-fade-out: 1100ms;/* slow dissolve from the crawl to the onboarding panels */ background: var(--ink); display: none; /* shown by playCrawl() */ align-items: center; /* the whole column centered as a unit */ opacity: 1; transition: opacity var(--ss-crawl-fade-out) ease-in-out; } html.ss-light #ss-crawl { --ink: #fcfbfa; --bone: #060606; } #ss-crawl.ss-hidden { opacity: 0; pointer-events: none; } #ss-crawl .ss-crawl-col { margin-left: 16vw; width: min(64vw, 900px); display: flex; flex-direction: column; gap: 1.7em; } #ss-crawl .ss-crawl-block { color: var(--bone); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: clamp(17px, 1.7vw, 23px); line-height: 1.55; letter-spacing: 0.01em; text-align: left; opacity: 0; filter: blur(6px); transition: opacity var(--ss-crawl-block-fade) ease, filter var(--ss-crawl-block-fade) ease; } #ss-crawl .ss-crawl-block.visible { opacity: 1; filter: blur(0); } /* Lockup = plain inline signature (glyph + wordmark + ™) on one short line — the * first color in the otherwise monochrome crawl. Blooms (opacity + blur) with a * soft orange glow on the glyph. */ #ss-crawl .ss-crawl-lockup { display: flex; align-items: baseline; gap: 0.32em; margin-top: 0.6em; opacity: 0; filter: blur(12px); transition: opacity var(--ss-crawl-lockup-bloom) cubic-bezier(.2,.7,.2,1), filter var(--ss-crawl-lockup-bloom) cubic-bezier(.2,.7,.2,1); } #ss-crawl .ss-crawl-lockup.visible { opacity: 1; filter: blur(0); } #ss-crawl .ss-crawl-glyph { font-size: clamp(30px, 3.4vw, 46px); color: var(--orange); line-height: 1; text-shadow: 0 0 0 rgba(255, 106, 19, 0); transition: text-shadow var(--ss-crawl-lockup-bloom) ease; } #ss-crawl .ss-crawl-lockup.visible .ss-crawl-glyph { text-shadow: 0 0 34px rgba(255, 106, 19, 0.4); } #ss-crawl .ss-crawl-wordmark { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; color: var(--bone); font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 0.035em; text-transform: uppercase; } #ss-crawl .ss-crawl-wordmark sup { font-size: 0.34em; vertical-align: top; letter-spacing: 0; margin-left: 0.03em; line-height: 1; position: relative; top: 0.48em; } @media (prefers-reduced-motion: reduce) { #ss-crawl .ss-crawl-block, #ss-crawl .ss-crawl-lockup, #ss-crawl .ss-crawl-glyph { transition-duration: 1ms; } }