/* ════════════════════════════════════════════════════════════════ MOTUSMOVES · The-Motus-Dream-Team Davara Distinct — neoglass over pure black. Cyan = the network. Violet = the signal. Mint = $TRUST / value. ═══════════════════════════════════════════════════════════════════ */ :root{ /* ── canvas ── */ --bg: #05060a; --bg-2: #080a14; --bg-3: #0b0e1c; /* ── ink ── */ --ink: #eef0f7; --ink-soft: #aeb4c8; --ink-mute: #767d96; --ink-faint: #4b5169; /* ── signal violet (the most important things) ── */ --violet: #b15cff; --violet-core: #a855f7; --violet-bright: #d6a8ff; --violet-deep: #7c3aed; /* ── network cyan ── */ --cyan: #3df2ff; --cyan-soft: #8af6ff; --cyan-deep: #1aa7c4; /* ── $TRUST / regeneration mint ── */ --trust: #5ff3c0; --trust-soft: #b6ffe6; /* ── glass ── */ --glass: rgba(255,255,255,.04); --glass-2: rgba(255,255,255,.06); --glass-3: rgba(255,255,255,.022); --glass-line: rgba(255,255,255,.09); --glass-hi: rgba(255,255,255,.2); --glass-blur: blur(12px) saturate(185%); /* saturate (the #1 premium tell) stays; blur radius trimmed 17→12 — invisible in motion, but re-blur cost is ~quadratic in radius, so this is a big GPU saving across every glass panel */ --glass-blur-sheet: blur(20px) saturate(175%); /* the big sheets stay the GLASSIEST surface (30→20) */ --glass-blur-bar: blur(10px) saturate(160%); --rim: inset 0 1px 0 rgba(255,255,255,.22);/* crisp top-edge rim-light = the pristine tell */ /* radius scale (was 9 ad-hoc values) */ --r-xs: 12px; --r-sm: 14px; --r-md: 18px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* elevation scale (ambient lift, soft + diffuse) */ --elev-1: 0 12px 34px -22px rgba(0,0,0,.8); --elev-2: 0 30px 70px -46px rgba(0,0,0,.9); --elev-sheet: 0 -26px 80px -38px rgba(0,0,0,.92); --shadow-glass: var(--rim), var(--elev-2); /* the canonical raised-glass recipe */ /* accent border lines */ --line-cyan: rgba(61,242,255,.28); --line-violet: rgba(177,92,255,.3); --line-trust: rgba(95,243,192,.32); /* ── glows ── */ --glow-violet: 0 0 28px rgba(177,92,255,.45), 0 0 64px rgba(124,58,237,.22); --glow-cyan: 0 0 24px rgba(61,242,255,.32); --glow-trust: 0 0 22px rgba(95,243,192,.32); /* ── type ── */ --display: "Space Grotesk", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --serif: "Sora", "Space Grotesk", system-ui, sans-serif; /* readable display — NEVER an artsy serif */ --mono: "JetBrains Mono", ui-monospace, monospace; /* ── rhythm ── */ --shell: 660px; --pad: clamp(20px, 6vw, 40px); --dock-h: 76px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* lighter blur kernels on phones — large blur is bandwidth-heavy on mobile GPUs; saturate stays high */ @media (max-width:760px){ :root{ --glass-blur: blur(11px) saturate(175%); --glass-blur-sheet: blur(18px) saturate(165%); --glass-blur-bar: blur(10px) saturate(155%); } } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; width:100%; max-width:100%; overscroll-behavior-x:none; touch-action:pan-y; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } /* ── PERF: desktop pays the most for blur (cost scales with screen area), so trim the glass blur radius further on wide viewports. The saturate (premium tell) stays; in motion this is imperceptible, but it sharply cuts the per-frame re-blur of every glass panel where it hurts most. */ @media (min-width: 1200px){ :root{ --glass-blur: blur(10px) saturate(182%); --glass-blur-sheet: blur(16px) saturate(172%); --glass-blur-bar: blur(8px) saturate(158%); } } /* ── PERF: when this tab is backgrounded, freeze ALL CSS animations (a 3-line JS hook toggles .tab-bg on ). Stops ~60 infinite glow/aura/pulse animations from burning GPU/CPU on an unfocused tab — a big part of "it slows my whole computer". No effect while the tab is visible. */ html.tab-bg *, html.tab-bg *::before, html.tab-bg *::after{ animation-play-state:paused !important; } /* ── PERF: while you're actively SCROLLING, drop the glass blur. The background slides behind every panel during a scroll, forcing a full backdrop re-blur each frame — the #1 cause of scroll jank. A 160ms-debounced .scrolling class removes the blur during the move and restores it the instant you settle. Pure cine-scroll: a glassy MOVE beats a busy one — and the eye never catches it. */ html.scrolling *, html.scrolling *::before, html.scrolling *::after{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ── PERF (the big MINDSET win): the vision manifesto is a ~20,000px scroll of 13 glass sections, each with glows + ~58 animations total — all held live even though only one screenful is ever visible. content-visibility:auto makes the browser SKIP rendering (layout, paint AND animation) for any section that's off-screen, so only what's on your screen costs anything — the long manifesto becomes as light as the lean MOVUS feed. The hero stays live; reveal-on-scroll still fires as each section enters. Generous intrinsic-size padding so glows never clip when visible. */ .movement{ content-visibility:auto; contain-intrinsic-size:auto 1200px; } /* ── PERF: when Davara's full-screen dashboard is open, the MINDSET page is completely COVERED — so freeze everything behind it (the field canvas already pauses via modalOpen; this stops the manifesto/hero CSS animations from rendering uselessly under the overlay). So Davara runs on a still page, not on top of a live one. (:has supported in all current browsers; ignored otherwise.) */ body:has(.davara__shell.open) #stage *, body:has(.davara__shell.open) #stage *::before, body:has(.davara__shell.open) #stage *::after{ animation-play-state:paused !important; } body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; position:relative; width:100%; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; min-height:100svh; letter-spacing:.002em; } img{ max-width:100%; display:block; } button{ font-family:inherit; color:inherit; cursor:pointer; } ::selection{ background:rgba(177,92,255,.32); color:#fff; } /* ════════ BACKGROUND LAYERS ════════ */ #field{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.62; } .aurora{ position:fixed; inset:-20% -10% auto -10%; height:120%; z-index:0; pointer-events:none; background: radial-gradient(40% 32% at 18% 8%, rgba(124,58,237,.18), transparent 70%), radial-gradient(38% 30% at 84% 18%, rgba(61,242,255,.10), transparent 72%), radial-gradient(50% 40% at 50% 108%, rgba(177,92,255,.14), transparent 70%); /* opacity-only drift — no blur, no scale/translate → no per-frame re-raster (cheap) */ animation:auroraDrift 30s ease-in-out infinite alternate; } @keyframes auroraDrift{ 0%{ opacity:.72; } 100%{ opacity:1; } } /* (removed) .auraglow cursor-follow light + .grain soft-light overlay — both were continuous full-screen mix-blend GPU composites for little visual gain. Hard-off. */ .auraglow{ display:none !important; } .grain{ display:none !important; } /* faint vignette to seat content over the field */ body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(5,6,10,.55) 100%); } /* ════════ TOPBAR ════════ */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:2px; padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 12px; background:linear-gradient(180deg, rgba(5,6,10,.78), rgba(5,6,10,0)); backdrop-filter:blur(6px); } .brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; } .brand__mark{ height:28px; width:auto; display:block; } .brand__word{ font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.12em; color:var(--ink); display:inline-flex; align-items:baseline; } .brand__motus{ color:var(--cyan-soft); animation:cyanGlow 2.6s ease-in-out infinite; } .brand__moves{ color:var(--ink); } .brand__us{ color:var(--cyan); font-size:1.12em; letter-spacing:0; margin-left:.04em; transform-origin:center 70%; animation:usPulse 3s ease-in-out infinite; } @keyframes cyanGlow{ 0%,100%{ text-shadow:0 0 12px rgba(61,242,255,.5), 0 0 26px rgba(61,242,255,.22); } 50%{ text-shadow:0 0 22px rgba(61,242,255,.82), 0 0 46px rgba(61,242,255,.42); } } @keyframes usPulse{ 0%,100%{ transform:scale(1); text-shadow:0 0 12px rgba(61,242,255,.85), 0 0 4px rgba(138,246,255,.85); } 50%{ transform:scale(1.16); text-shadow:0 0 26px rgba(61,242,255,1), 0 0 46px rgba(61,242,255,.7), 0 0 9px rgba(138,246,255,1); } } /* ════════ VIEWS ════════ */ .view{ position:relative; z-index:2; } .view[hidden]{ display:none; } .view.is-active{ animation:viewIn .55s var(--ease-out) both; } @keyframes viewIn{ from{ opacity:0; transform:translateY(14px) scale(.992); } to{ opacity:1; transform:none; } } .panelwrap{ max-width:var(--shell); margin:0 auto; padding:calc(env(safe-area-inset-top) + 84px) var(--pad) calc(var(--dock-h) + env(safe-area-inset-bottom) + 48px); } /* ════════ HERO / OVERTURE ════════ */ .hero{ position:relative; min-height:100svh; width:100%; max-width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:calc(env(safe-area-inset-top) + 78px) var(--pad) calc(var(--dock-h) + 70px); gap:14px; overflow:hidden; } .hero__rings{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:-1; overflow:hidden; } .hero__rings span{ position:absolute; border-radius:50%; border:1px solid rgba(177,92,255,.18); width:min(92vw,680px); aspect-ratio:1; animation:ringPulse 7s var(--ease-out) infinite; } .hero__rings span:nth-child(1){ animation-delay:0s; } .hero__rings span:nth-child(2){ animation-delay:1.75s; } .hero__rings span:nth-child(3){ animation-delay:3.5s; } .hero__rings span:nth-child(4){ animation-delay:5.25s; } @keyframes ringPulse{ 0%{ transform:scale(.18); opacity:0; border-color:rgba(177,92,255,.5); } 18%{ opacity:.55; } 100%{ transform:scale(1); opacity:0; border-color:rgba(61,242,255,.05); } } .hero__kicker{ font-size:clamp(1.5rem,6.5vw,2.15rem); --cd:-2.2s; margin:0; } .hero__kicker2{ font-size:clamp(1.5rem,6.5vw,2.15rem); --cd:-4.1s; margin:0 0 2px; } .hero__title{ font-family:var(--display); font-weight:700; margin:2px 0; line-height:1; letter-spacing:-.02em; font-size:clamp(2.1rem, 8.6vw, 4.6rem); } @keyframes flow{ to{ background-position:230% center; } } .hero__welcome{ font-size:clamp(1.55rem,7vw,2.5rem); letter-spacing:-.01em; --cd:0s; margin:0 0 3px; } .hero__wm{ display:inline-flex; align-items:baseline; justify-content:center; } .hm-motus{ color:var(--cyan-soft); animation:cyanGlow 2.6s ease-in-out infinite; } .hm-moves{ color:var(--ink); } .hm-us{ color:var(--cyan); font-size:1.1em; letter-spacing:0; margin-left:.03em; transform-origin:center 70%; animation:usPulse 3s ease-in-out infinite; } .hero__sub{ font-size:clamp(1.2rem,5vw,1.7rem); color:var(--ink); font-weight:600; margin:0; } .hero__goallin{ font-size:clamp(1.34rem,5.7vw,1.95rem); --cd:-5.6s; margin:0; } .hero__era{ font-size:clamp(1.5rem,6.5vw,2.18rem); --cd:-7.3s; margin:6px 0 0; } .hero__move{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,6vw,2.2rem); color:var(--ink); margin:4px 0 0; } /* ════════ LIVING CORE STATEMENTS — white titles, a breathing cyan↔violet aura ════════ The aura drifts cyan → blue → violet → blue → cyan on uneven beats with the glow radii expanding toward the violet peak (it breathes); each line carries its own phase (--cd) so the set feels alive and organic, never in lockstep. Soft + spread — never a hard highlight. */ .core-line{ font-family:var(--display); color:#fff; font-weight:700; line-height:1.14; letter-spacing:-.012em; margin:0; text-wrap:balance; text-shadow:0 0 13px rgba(61,242,255,.40), 0 0 32px rgba(61,242,255,.22), 0 0 60px rgba(140,150,255,.12); animation:coreAura 9.5s ease-in-out infinite; animation-delay:var(--cd,0s); will-change:text-shadow; } .core-line .k{ font-weight:800; } /* keyword: heavier, still white — the aura carries the colour */ @keyframes coreAura{ 0% { text-shadow:0 0 13px rgba(61,242,255,.42), 0 0 32px rgba(61,242,255,.24), 0 0 60px rgba(61,242,255,.12); } 30% { text-shadow:0 0 17px rgba(90,190,255,.46), 0 0 40px rgba(120,140,255,.26), 0 0 74px rgba(140,120,255,.14); } 55% { text-shadow:0 0 19px rgba(177,92,255,.48), 0 0 45px rgba(177,92,255,.27), 0 0 84px rgba(177,92,255,.15); } 80% { text-shadow:0 0 15px rgba(120,140,255,.44), 0 0 36px rgba(90,170,255,.25), 0 0 68px rgba(61,242,255,.13); } 100% { text-shadow:0 0 13px rgba(61,242,255,.42), 0 0 32px rgba(61,242,255,.24), 0 0 60px rgba(61,242,255,.12); } } @media (prefers-reduced-motion:reduce){ .core-line{ animation:none; text-shadow:0 0 15px rgba(61,242,255,.32), 0 0 40px rgba(177,92,255,.20); } } /* ── The Crew Creed — the welcome shown on every sign-in / sign-up card ── */ .crew-creed{ margin:6px auto 14px; padding:2px 12px 16px; max-width:330px; text-align:center; display:flex; flex-direction:column; gap:7px; border-bottom:1px solid rgba(138,246,255,.14); } .crew-creed__hi{ font-size:clamp(1.12rem,5.4vw,1.42rem); letter-spacing:-.01em; margin:0 0 1px; } .crew-creed__move{ font-family:var(--display); font-weight:600; font-size:.97rem; color:var(--ink); margin:0; letter-spacing:.005em; } .crew-creed__move b{ color:var(--violet-bright); font-weight:800; letter-spacing:.03em; text-shadow:0 0 14px rgba(177,92,255,.45); } .crew-creed__line{ font-size:.85rem; line-height:1.5; color:var(--ink-soft); margin:1px 0; } .crew-creed__true{ font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--cyan-soft); margin:3px 0; letter-spacing:.02em; text-shadow:0 0 14px rgba(61,242,255,.34); } .crew-creed__tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px 12px; margin:5px 0 0; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; } .crew-creed__tags span{ color:var(--cyan-soft); opacity:.92; } .crew-creed__sig{ font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; color:var(--ink-soft); margin:4px 0 0; } .crew-creed__sig .trust{ color:var(--cyan); font-weight:700; text-shadow:0 0 12px rgba(61,242,255,.4); } .crew-creed__a{ font-family:var(--display); font-size:.82rem; color:rgba(255,255,255,.42); margin:1px 0 2px; letter-spacing:.06em; } /* ════════ "MOTUSMOVES MADE SO FAR" · the living counter ════════ */ .counter{ display:flex; flex-direction:column; align-items:center; gap:4px; margin-bottom:8px; } .counter__label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan-soft); margin:0; opacity:.88; } .counter__numbtn{ position:relative; background:none; border:0; padding:8px 24px; cursor:pointer; display:inline-grid; place-items:center; } .counter__num{ position:relative; z-index:2; font-family:var(--display); font-weight:800; font-size:clamp(3rem,15vw,5.4rem); line-height:1; letter-spacing:-.02em; color:var(--cyan-soft); animation:counterBreath 4.2s ease-in-out infinite; } @keyframes counterBreath{ 0%,100%{ transform:scale(1); text-shadow:0 0 16px rgba(61,242,255,.55), 0 0 30px rgba(61,242,255,.25); } 50%{ transform:scale(1.07); text-shadow:0 0 30px rgba(61,242,255,.95), 0 0 64px rgba(61,242,255,.55), 0 0 100px rgba(124,58,237,.35); } } .counter__aura{ position:absolute; inset:-45% -25%; z-index:1; border-radius:50%; pointer-events:none; filter:blur(14px); opacity:.5; mix-blend-mode:screen; will-change:transform; /* perf: 30→14px blur — the hero's costliest paint; imperceptible in motion, big mobile GPU win */ background:conic-gradient(from 0deg, rgba(61,242,255,.6), rgba(124,58,237,.45), rgba(95,243,192,.55), rgba(61,242,255,.32), rgba(124,58,237,.55), rgba(61,242,255,.6)); animation:auroraSpin 11s linear infinite, auroraPulse 5s ease-in-out infinite; } @keyframes auroraSpin{ to{ transform:rotate(360deg); } } @keyframes auroraPulse{ 0%,100%{ opacity:.38; } 50%{ opacity:.62; } } /* once the hero is scrolled away, freeze its two costliest animations (blurred screen-blended conic aura + the big text-shadow breath) — imperceptible off-screen */ body.hero-off .counter__num, body.hero-off .counter__aura{ animation-play-state:paused; } .counter__numbtn:active .counter__num{ transform:scale(.95); } .counter__latest{ background:none; border:0; cursor:pointer; padding:4px 10px; margin-top:2px; font-family:var(--body); font-size:.8rem; color:var(--ink-soft); max-width:min(92vw, 470px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; border-bottom:1px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); } .counter__latest:hover{ color:var(--cyan-soft); border-color:rgba(61,242,255,.4); } .counter__latest:empty{ display:none; } .counter__latest-k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-soft); margin-right:5px; } .counter__latest-by{ color:var(--ink-mute); } @media (prefers-reduced-motion: reduce){ .counter__num{ animation:none; } .counter__aura{ animation:none; } } .hero__cta{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:340px; margin-top:8px; } .hero__scroll{ position:absolute; bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 18px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:9px; text-decoration:none; color:var(--ink-mute); opacity:0; animation:cueIn 1.1s var(--ease-out) .7s forwards; } @keyframes cueIn{ to{ opacity:1; } } .hero__scroll-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:var(--glow-cyan); animation:scrollFall 1.9s var(--ease) infinite; } @keyframes scrollFall{ 0%{ transform:translateY(-6px); opacity:0; } 40%{ opacity:1; } 100%{ transform:translateY(10px); opacity:0; } } .hero__scroll-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; } .moveword{ display:inline-block; color:var(--violet); font-weight:700; text-shadow:0 0 18px rgba(177,92,255,.55); animation:moveDrift 3.4s var(--ease) infinite alternate; } .moveword--xl{ font-size:1.15em; letter-spacing:.02em; } @keyframes moveDrift{ from{ transform:translateX(-4px); } to{ transform:translateX(5px); } } /* ════════ BUTTONS ════════ */ .btn{ appearance:none; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink); font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.01em; padding:15px 22px; border-radius:16px; backdrop-filter:var(--glass-blur); transition:transform .25s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); position:relative; overflow:hidden; } .btn:active{ transform:scale(.97); } .btn--signal{ background:linear-gradient(135deg, rgba(177,92,255,.92), rgba(124,58,237,.92)); border-color:rgba(214,168,255,.55); box-shadow:var(--glow-violet); color:#fff; } .btn--signal::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); transform:translateX(-130%); transition:transform .8s var(--ease); } .btn--signal:hover::after{ transform:translateX(130%); } .btn--signal:hover{ box-shadow:0 0 38px rgba(177,92,255,.6), 0 0 90px rgba(124,58,237,.3); } .btn--ghost{ background:var(--glass); } .btn--ghost:hover{ border-color:rgba(61,242,255,.5); box-shadow:var(--glow-cyan); } .btn--lg{ font-size:1.08rem; padding:17px 26px; } .btn--block{ width:100%; } .btn[disabled]{ opacity:.45; pointer-events:none; } /* ════════ MOVEMENTS (the manifesto) ════════ */ .movement{ position:relative; max-width:var(--shell); margin:0 auto; padding:clamp(64px,16vw,120px) var(--pad); display:flex; flex-direction:column; gap:24px; } .movement__numeral{ font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,11vw,4.2rem); letter-spacing:-.04em; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(174,180,200,.22); margin-bottom:-6px; } .movement__eyebrow{ font-family:var(--mono); font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--cyan-soft); opacity:.8; } .movement__title{ font-family:var(--display); font-weight:600; font-size:clamp(1.7rem,7vw,2.6rem); letter-spacing:-.02em; line-height:1.08; margin:18px 0 2px; color:var(--ink); } /* shared text atoms */ .body{ font-size:clamp(1.04rem,4.4vw,1.16rem); color:var(--ink-soft); margin:0; } .body--muted{ color:var(--ink-mute); } .body strong{ color:var(--ink); font-weight:600; } .serif{ font-family:var(--serif); font-style:normal; font-weight:600; letter-spacing:-.012em; } .mono{ font-family:var(--mono); font-size:.92em; letter-spacing:-.01em; } .glow-violet{ color:var(--violet-bright); text-shadow:0 0 18px rgba(177,92,255,.5); font-weight:inherit; } .glow-cyan{ color:var(--cyan-soft); text-shadow:0 0 16px rgba(61,242,255,.4); } .trust{ color:var(--trust); font-family:var(--mono); font-weight:600; text-shadow:var(--glow-trust); letter-spacing:-.02em; } .strength{ color:var(--cyan-soft); font-weight:700; letter-spacing:.01em; } .arrow{ color:var(--violet); font-weight:700; } .eyes{ font-size:1.1em; } .caps{ text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--violet-bright); } .link-tag{ font-family:var(--mono); font-size:.9em; color:var(--cyan-soft); padding:.05em .35em; border-radius:6px; background:rgba(61,242,255,.07); border:1px solid rgba(61,242,255,.16); white-space:nowrap; } .link-tag--lg{ font-size:1em; padding:.12em .5em; } .dash-tag{ font-family:var(--mono); font-size:.88em; color:var(--violet-bright); background:rgba(177,92,255,.1); border:1px solid rgba(177,92,255,.22); padding:.05em .35em; border-radius:6px; white-space:nowrap; } /* credits / invocation */ .movement--invocation{ align-items:flex-start; } .credits{ border-left:2px solid var(--violet); padding-left:18px; margin:6px 0; } .credits__title{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,6vw,2.1rem); margin:0 0 6px; letter-spacing:-.01em; } .credits__tilde{ color:var(--cyan-soft); font-weight:400; } .credits__sub{ color:var(--ink-soft); margin:0 0 4px; } .credits__by{ color:var(--ink-mute); margin:0; font-size:.98rem; } .lede{ font-size:clamp(1.18rem,5vw,1.45rem); line-height:1.58; color:var(--ink); font-weight:400; } .creed{ margin:8px 0 0; padding:0; border:0; } .creed p{ margin:0; } .creed__chant{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,6vw,2rem); line-height:1.28; margin-top:14px; letter-spacing:-.01em; background:linear-gradient(120deg, var(--violet-bright), var(--cyan-soft), var(--violet-bright)); background-size:230% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:flow 11s linear infinite; } /* mantras */ .movement--mantras{ align-items:center; text-align:center; } .wordmark-line{ margin:0 0 8px; } .mantras{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; width:100%; } .mantras li{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,7vw,2.4rem); letter-spacing:-.01em; color:var(--ink); } .mantra--hero span{ font-size:1.06em; } /* definition block */ .def{ background:var(--glass); border:1px solid var(--glass-line); border-radius:22px; padding:clamp(20px,5vw,30px); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi), 0 30px 60px -40px rgba(0,0,0,.8); display:flex; flex-direction:column; gap:16px; } .def__label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:var(--violet-bright); } .pullquote{ font-size:clamp(1.4rem,6vw,2rem); line-height:1.42; color:#f3f4fb; margin:8px 0; font-style:normal; font-weight:600; letter-spacing:-.012em; } .pullquote em{ color:var(--violet-bright); font-style:normal; } .chant{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,7vw,2.2rem); margin:4px 0; text-align:center; } .chant__sm{ color:var(--ink-soft); font-weight:500; } .enter{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,5.4vw,1.7rem); line-height:1.3; display:flex; flex-wrap:wrap; align-items:center; gap:.4em; } .enter__tag{ font-size:.66em; color:var(--ink-soft); font-weight:400; line-height:1.4; } .banner{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,5.6vw,1.9rem); line-height:1.3; text-align:center; margin:6px 0; padding:clamp(18px,5vw,28px); border-radius:20px; border:1px solid rgba(177,92,255,.28); background:linear-gradient(135deg, rgba(177,92,255,.1), rgba(61,242,255,.05)); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 50px -20px rgba(177,92,255,.5); } /* equation */ .movement--equation{ text-align:center; align-items:center; } .equation__open{ font-size:clamp(1.3rem,5.6vw,1.8rem); color:var(--ink-soft); margin:0 0 6px; } .equation{ list-style:none; counter-reset:eq; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; width:100%; } .equation li{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,4.8vw,1.5rem); padding:16px clamp(14px,4vw,22px); border-radius:18px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:var(--glass-blur); } .equation__q{ text-align:right; color:var(--ink-soft); } .equation__arrow{ color:var(--violet); font-size:1.3em; } .equation__a{ text-align:left; color:var(--ink); } /* soul / proclaim */ .proclaim{ font-family:var(--display); font-weight:500; font-size:clamp(1.18rem,5vw,1.55rem); line-height:1.36; color:var(--ink); margin:0; letter-spacing:-.005em; } .proclaim--em{ font-weight:700; font-size:clamp(1.5rem,6.4vw,2.1rem); text-align:center; background:linear-gradient(120deg,var(--violet-bright),var(--cyan-soft),var(--violet-bright)); background-size:230% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:flow 12s linear infinite; } /* effects */ .effects{ display:flex; flex-direction:column; gap:18px; } .effect{ margin:0; padding:clamp(20px,5vw,28px); border-radius:20px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:var(--glass-blur); } .effect--motus{ border-color:rgba(177,92,255,.32); box-shadow:0 0 50px -28px rgba(177,92,255,.7); background:linear-gradient(135deg, rgba(177,92,255,.08), transparent); } .effect__name{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,5vw,1.55rem); margin-bottom:10px; } .effect__text{ margin:0; padding:0; border:0; font-size:clamp(1.05rem,4.6vw,1.22rem); color:var(--ink-soft); line-height:1.45; } .effect--motus .effect__text{ color:var(--ink); } .signoff{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,8vw,2.6rem); text-align:center; margin:8px 0; letter-spacing:-.02em; } /* the call */ .movement--call{ text-align:center; align-items:center; } .duo{ display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:clamp(2rem,10vw,3.4rem); line-height:1; margin:0; } .duo__amp{ font-size:.5em; color:var(--ink-mute); font-weight:400; font-family:var(--serif); font-style:normal; } .ask{ font-size:clamp(1.6rem,7vw,2.4rem); color:var(--ink); margin:0; } .answer{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,5.2vw,1.6rem); color:var(--cyan-soft); margin:0; text-shadow:var(--glow-cyan); } /* mindset */ .movement--mindset{ text-align:center; align-items:center; } .title-line{ font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,7.4vw,2.6rem); letter-spacing:-.02em; margin:6px 0; } .title-line--xl{ font-size:clamp(2.2rem,11vw,3.6rem); } .leverage,.becoming{ list-style:none; margin:6px 0; padding:0; display:flex; flex-direction:column; gap:10px; } .leverage li,.becoming li{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,6vw,1.9rem); letter-spacing:-.01em; } .leverage li.glow-violet{ font-size:clamp(1.5rem,6.6vw,2.1rem); } .proof__label{ font-family:var(--mono); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--violet-bright); } .cite{ margin:0; font-family:var(--serif); font-style:normal; font-weight:600; font-size:clamp(1.5rem,6.6vw,2.2rem); color:var(--ink); } .cite cite{ display:block; font-size:.5em; font-style:normal; font-family:var(--mono); color:var(--ink-mute); margin-top:10px; letter-spacing:.06em; } .couplet{ font-family:var(--display); font-weight:500; font-size:clamp(1.18rem,5.2vw,1.6rem); color:var(--ink-soft); margin:0; } /* emergence */ .movement--emergence{ text-align:center; align-items:center; } .url-line{ margin:4px 0; } .urlbtn{ background:rgba(177,92,255,.08); border:1px solid rgba(177,92,255,.3); padding:12px 18px; border-radius:14px; font-size:clamp(.9rem,4vw,1.1rem); backdrop-filter:var(--glass-blur); transition:box-shadow .3s var(--ease), transform .2s var(--ease); } .urlbtn:hover{ box-shadow:var(--glow-violet); } .urlbtn:active{ transform:scale(.97); } .it-is-time{ font-family:var(--display); font-weight:700; font-size:clamp(2rem,10vw,3.2rem); letter-spacing:.02em; color:var(--violet-bright); text-shadow:var(--glow-violet); margin:6px 0; } .it-is-time--final{ font-size:clamp(1.6rem,7vw,2.4rem); color:var(--ink); text-shadow:none; } /* foundation */ .pillars{ display:flex; flex-direction:column; gap:14px; margin:6px 0; } .pillar{ padding:18px 20px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:var(--glass-blur); } .pillar__name{ display:block; font-size:1.05rem; color:var(--ink); margin-bottom:4px; } .pillar__role{ margin:0; color:var(--ink-soft); font-size:.98rem; } /* coda */ .movement--coda{ text-align:center; align-items:center; } .coda-quote{ margin:0; border:0; padding:0; } .coda-quote p{ font-family:var(--serif); font-style:normal; font-weight:600; font-size:clamp(1.4rem,6vw,2rem); line-height:1.36; color:var(--ink); margin:0; } .direction{ font-family:var(--display); font-weight:600; font-size:clamp(1.2rem,5.4vw,1.7rem); display:flex; flex-wrap:wrap; gap:.4em; justify-content:center; align-items:baseline; } .direction .gt{ color:var(--violet); } .strike{ color:var(--ink-mute); text-decoration:line-through; text-decoration-color:rgba(177,92,255,.5); } .coda__cta{ margin-top:14px; width:100%; max-width:360px; } /* vision footer */ .vfoot{ max-width:var(--shell); margin:0 auto; padding:40px var(--pad) calc(var(--dock-h) + env(safe-area-inset-bottom) + 56px); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; color:var(--ink-mute); font-size:.82rem; border-top:1px solid var(--glass-line); } .vfoot__mark{ opacity:.7; margin-bottom:4px; } .vfoot__by{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } /* ════════ REVEAL ════════ */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); } /* perf: dropped the blur filter — opacity+transform already convey the fade-in; removes up to 13 per-scroll blur recalcs on the manifesto */ .reveal.in{ opacity:1; transform:none; filter:none; } /* each Mindset line ignites with a soft glow as it arrives */ .movement .reveal.in{ animation:ignite 1.4s var(--ease-out); } @keyframes ignite{ 0%{ text-shadow:0 0 0 rgba(124,90,255,0); } 32%{ text-shadow:0 0 18px rgba(124,90,255,.3), 0 0 34px rgba(61,242,255,.13); } 100%{ text-shadow:0 0 0 rgba(124,90,255,0); } } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; filter:none; transition:none; } .movement .reveal.in{ animation:none; } .auraglow{ display:none; } .hero__scroll{ opacity:1; animation:none; } .moveword,.aurora,.hero__rings span,.brand__mark,.hero__scroll-dot{ animation:none !important; } } /* ════════ PANELS · shared for profile + news ════════ */ .panel{ background:var(--glass); border:1px solid var(--glass-line); border-radius:24px; padding:clamp(20px,5.5vw,30px); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi), 0 40px 80px -50px rgba(0,0,0,.9); margin-bottom:18px; } .panel__eyebrow{ font-family:var(--mono); font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--cyan-soft); margin:0 0 6px; } .panel__h{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,7vw,2.2rem); letter-spacing:-.02em; margin:0 0 8px; } .panel__sub{ color:var(--ink-soft); margin:0 0 4px; font-size:1rem; } .view-head{ margin-bottom:6px; } .view-head__title{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,9vw,2.8rem); letter-spacing:-.03em; margin:0; } .view-head__sub{ color:var(--ink-soft); margin:6px 0 0; } .view-head__rule{ height:1px; background:linear-gradient(90deg, var(--violet), transparent); margin:16px 0 22px; border:0; } /* forms */ .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; } .field__label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); } .field__hint{ font-size:.78rem; color:var(--ink-faint); } .input, textarea.input{ width:100%; font-family:var(--body); font-size:1rem; color:var(--ink); background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:13px; padding:14px 15px; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); } .input::placeholder{ color:var(--ink-faint); } .input:focus{ outline:none; border-color:rgba(177,92,255,.6); box-shadow:0 0 0 3px rgba(177,92,255,.14), var(--glow-violet); background:rgba(255,255,255,.06); } textarea.input{ resize:vertical; min-height:96px; line-height:1.5; } .input--mono{ font-family:var(--mono); font-size:.92rem; letter-spacing:-.01em; } .input-prefix{ display:flex; align-items:center; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:13px; overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .input-prefix:focus-within{ border-color:rgba(61,242,255,.5); box-shadow:0 0 0 3px rgba(61,242,255,.12); } .input-prefix__at{ padding:0 4px 0 14px; color:var(--cyan-soft); font-family:var(--mono); font-weight:600; } .input-prefix .input{ border:0; background:transparent; } .input-prefix .input:focus{ box-shadow:none; } .field__count{ align-self:flex-end; font-family:var(--mono); font-size:.7rem; color:var(--ink-faint); } .field__count.warn{ color:var(--violet-bright); } .form-actions{ display:flex; flex-direction:column; gap:10px; margin-top:6px; } .note{ font-size:.8rem; color:var(--ink-mute); text-align:center; margin:10px 0 0; } .note a, .linkish{ color:var(--cyan-soft); cursor:pointer; text-decoration:none; border-bottom:1px solid rgba(61,242,255,.3); } /* profile identity card */ .idcard{ position:relative; overflow:hidden; background:linear-gradient(150deg, rgba(177,92,255,.14), rgba(61,242,255,.06) 60%, transparent); border:1px solid rgba(177,92,255,.28); } .idcard__glow{ position:absolute; top:-40%; right:-20%; width:60%; aspect-ratio:1; background:radial-gradient(circle, rgba(177,92,255,.4), transparent 70%); filter:blur(9px); pointer-events:none; } /* perf: 20→9px blur — subtle glow, much cheaper on a narrow mobile card */ .idcard__top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; } .avatar{ width:58px; height:58px; border-radius:18px; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.5rem; color:#fff; background:linear-gradient(135deg, var(--violet-core), var(--cyan-deep)); box-shadow:var(--glow-violet); border:1px solid var(--glass-hi); } .idcard__name{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin:0; letter-spacing:-.01em; } .idcard__handle{ font-family:var(--mono); font-size:.82rem; color:var(--cyan-soft); margin:2px 0 0; } .idcard__bio{ color:var(--ink-soft); margin:0 0 16px; font-size:1rem; line-height:1.55; } .idmeta{ display:flex; flex-direction:column; gap:10px; } .idmeta__row{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid var(--glass-line); } .idmeta__k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); flex:none; width:78px; } .idmeta__v{ font-family:var(--mono); font-size:.82rem; color:var(--ink); word-break:break-all; } .idmeta__v .dash-tag{ font-size:.95em; } /* stat strip */ .statstrip{ display:flex; gap:10px; margin-top:2px; } .stat{ flex:1; text-align:center; padding:14px 8px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-line); } .stat__n{ font-family:var(--display); font-weight:700; font-size:1.4rem; display:block; line-height:1; } .stat__n.trust{ color:var(--trust); } .stat__l{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin-top:6px; display:block; } /* current move spotlight */ .spotlight{ position:relative; border:1px solid rgba(177,92,255,.36); border-radius:22px; padding:clamp(20px,5.5vw,28px); overflow:hidden; background:linear-gradient(160deg, rgba(177,92,255,.12), rgba(8,10,20,.6)); box-shadow:0 0 60px -28px rgba(177,92,255,.8); } .spotlight::before{ content:""; position:absolute; inset:0; border-radius:22px; padding:1px; background:linear-gradient(130deg, rgba(214,168,255,.7), transparent 40%, rgba(61,242,255,.4)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .spotlight__pulse{ position:absolute; top:18px; right:18px; width:10px; height:10px; border-radius:50%; background:var(--violet); box-shadow:var(--glow-violet); } .spotlight__pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(177,92,255,.6); animation:broadcast 2.4s var(--ease-out) infinite; } @keyframes broadcast{ to{ box-shadow:0 0 0 22px rgba(177,92,255,0); } } .spotlight__label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--violet-bright); margin:0 0 10px; } .spotlight__title{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,6vw,1.8rem); line-height:1.18; margin:0 0 10px; letter-spacing:-.01em; } .spotlight__text{ color:var(--ink); font-size:1.05rem; line-height:1.55; margin:0 0 14px; } .spotlight__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } /* move list items */ .moves-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:24px 2px 12px; } .moves-head h3{ font-family:var(--display); font-weight:600; font-size:1.15rem; margin:0; } .moves-head span{ font-family:var(--mono); font-size:.7rem; color:var(--ink-mute); } .movecard{ position:relative; padding:18px 18px 16px; border-radius:18px; margin-bottom:12px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:var(--glass-blur); transition:border-color .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease); } .movecard:hover{ border-color:rgba(255,255,255,.16); transform:translateY(-2px); } .movecard.is-active{ border-color:rgba(177,92,255,.5); box-shadow:0 0 40px -22px rgba(177,92,255,.8); background:linear-gradient(150deg, rgba(177,92,255,.1), var(--glass)); } .movecard__badge{ position:absolute; top:14px; right:14px; font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--violet-bright); padding:4px 8px; border-radius:99px; border:1px solid rgba(177,92,255,.4); background:rgba(177,92,255,.12); } .movecard__title{ font-family:var(--display); font-weight:600; font-size:1.1rem; margin:0 64px 6px 0; line-height:1.25; } .movecard__text{ color:var(--ink-soft); font-size:.97rem; line-height:1.5; margin:0 0 12px; } .movecard__meta{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:.68rem; color:var(--ink-mute); } .movecard__actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; } /* small pill buttons */ .pill{ font-family:var(--display); font-weight:500; font-size:.82rem; padding:8px 14px; border-radius:99px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-soft); transition:all .25s var(--ease); } .pill:active{ transform:scale(.95); } .pill--violet{ border-color:rgba(177,92,255,.4); color:var(--violet-bright); } .pill--violet:hover{ background:rgba(177,92,255,.14); box-shadow:var(--glow-violet); } .pill--cyan{ border-color:rgba(61,242,255,.34); color:var(--cyan-soft); } .pill--cyan:hover{ background:rgba(61,242,255,.1); box-shadow:var(--glow-cyan); } .pill--ghost:hover{ border-color:var(--glass-hi); } .pill--danger{ color:#ff8a9b; border-color:rgba(255,138,155,.3); } .pill--danger:hover{ background:rgba(255,138,155,.1); } .pill[disabled]{ opacity:.4; pointer-events:none; } /* trust signal control */ .trust-btn{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-weight:600; font-size:.82rem; padding:8px 14px; border-radius:99px; border:1px solid rgba(95,243,192,.32); background:rgba(95,243,192,.06); color:var(--trust); transition:all .25s var(--ease); } .trust-btn:hover{ background:rgba(95,243,192,.14); box-shadow:var(--glow-trust); } .trust-btn:active{ transform:scale(.94); } .trust-btn.signaled{ background:rgba(95,243,192,.2); border-color:var(--trust); } .trust-btn svg{ width:14px; height:14px; } /* compose chips + toggle */ .tagchips{ display:flex; flex-wrap:wrap; gap:8px; } .broadcast-toggle{ padding:14px 16px; border-radius:14px; background:rgba(177,92,255,.06); border:1px solid rgba(177,92,255,.2); } .broadcast-toggle input{ flex:none; } /* empty state */ .empty{ text-align:center; padding:40px 16px; color:var(--ink-mute); } .empty__mark{ height:66px; width:auto; margin:0 auto 18px; opacity:.9; display:block; transform-origin:50% 50%; animation:emptySpin 8s linear infinite; filter:drop-shadow(0 0 14px rgba(61,242,255,.35)); } @keyframes emptySpin{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .empty__mark{ animation:none; } } .empty h3{ font-family:var(--display); color:var(--ink-soft); margin:0 0 8px; } /* ════════ MOVUS — THE LIVING FEED ════════ */ .feedbar{ display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap; } .feedbar__live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--trust); padding:6px 12px; border-radius:99px; border:1px solid rgba(95,243,192,.3); background:rgba(95,243,192,.05); } .feedbar__dot{ width:7px; height:7px; border-radius:50%; background:var(--trust); box-shadow:var(--glow-trust); animation:livePulse 2s ease-in-out infinite; } @keyframes livePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .feedbar__count{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute); margin-left:auto; } .feedcard{ position:relative; padding:20px; border-radius:20px; margin-bottom:14px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi); transition:border-color .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease); animation:feedIn .6s var(--ease-out) both; } @keyframes feedIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } .feedcard:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.15); } .feedcard--mine{ border-color:rgba(177,92,255,.45); box-shadow:0 0 44px -26px rgba(177,92,255,.8), inset 0 1px 0 var(--glass-hi); } .feedcard--featured{ border-color:rgba(61,242,255,.34); background:linear-gradient(155deg, rgba(61,242,255,.06), var(--glass)); } .feedcard__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .feedcard__av{ width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.05rem; color:#fff; border:1px solid var(--glass-hi); } .feedcard__who{ min-width:0; flex:1; } .feedcard__name{ font-family:var(--display); font-weight:600; font-size:1rem; margin:0; display:flex; align-items:center; gap:6px; } .feedcard__verify{ color:var(--cyan); font-size:.8em; } .feedcard__handle{ font-family:var(--mono); font-size:.72rem; color:var(--ink-mute); margin:1px 0 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .feedcard__time{ font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); flex:none; } .feedcard__tag{ display:inline-block; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan-soft); padding:3px 9px; border-radius:99px; border:1px solid rgba(61,242,255,.24); background:rgba(61,242,255,.05); margin-bottom:10px; } .feedcard__tag--mine{ color:var(--violet-bright); border-color:rgba(177,92,255,.34); background:rgba(177,92,255,.08); } .feedcard__title{ font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,5vw,1.4rem); line-height:1.22; margin:0 0 8px; letter-spacing:-.01em; } .feedcard__text{ color:var(--ink-soft); font-size:1rem; line-height:1.55; margin:0 0 16px; } .feedcard__foot{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--glass-line); padding-top:14px; } .feedcard__spread{ margin-left:auto; font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); display:inline-flex; align-items:center; gap:6px; } /* ════════ COMPOSE MODAL ════════ */ .modal{ position:fixed; inset:0; z-index:60; display:none; } .modal.open{ display:block; } .modal__scrim{ position:absolute; inset:0; background:rgba(2,3,8,.7); backdrop-filter:blur(5px); animation:fade .3s var(--ease); } /* perf: 8→5px — the .7 dark scrim masks it; smoother compose typing on mobile */ @keyframes fade{ from{ opacity:0; } to{ opacity:1; } } .modal__card{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:var(--shell); background:linear-gradient(180deg, rgba(14,16,28,.82), rgba(8,9,16,.9)); -webkit-backdrop-filter:var(--glass-blur-sheet); backdrop-filter:var(--glass-blur-sheet); /* the compose sheet is now real glass (dark-translucent → still legible) */ border:1px solid var(--glass-line); border-bottom:0; border-radius:28px 28px 0 0; padding:clamp(22px,6vw,32px) var(--pad) calc(env(safe-area-inset-bottom) + 28px); box-shadow:0 -30px 80px -30px rgba(177,92,255,.5), inset 0 1px 0 var(--glass-hi); animation:sheetUp .42s var(--ease-out); max-height:92svh; overflow-y:auto; } @keyframes sheetUp{ from{ transform:translate(-50%,100%); } to{ transform:translate(-50%,0); } } .modal__grab{ width:42px; height:4px; border-radius:99px; background:var(--glass-hi); margin:0 auto 18px; } .modal__title{ font-family:var(--display); font-weight:700; font-size:1.5rem; margin:0 0 4px; letter-spacing:-.01em; } .modal__sub{ color:var(--ink-soft); margin:0 0 20px; font-size:.95rem; } @media (min-width:680px){ .modal__card{ bottom:auto; top:50%; transform:translate(-50%,-50%); border-radius:28px; border-bottom:1px solid var(--glass-line); animation:sheetIn .4s var(--ease-out); } @keyframes sheetIn{ from{ transform:translate(-50%,-46%); opacity:0; } to{ transform:translate(-50%,-50%); opacity:1; } } } /* ════════ TOAST ════════ */ .toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 20px); z-index:80; background:linear-gradient(135deg, rgba(177,92,255,.95), rgba(124,58,237,.95)); color:#fff; font-family:var(--display); font-weight:500; font-size:.9rem; padding:13px 20px; border-radius:14px; border:1px solid var(--glass-hi); box-shadow:var(--glow-violet); opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); max-width:calc(100% - 32px); text-align:center; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } .toast--cyan{ background:linear-gradient(135deg, rgba(61,242,255,.92), rgba(26,167,196,.92)); box-shadow:var(--glow-cyan); color:#04141a; } .toast--trust{ background:linear-gradient(135deg, rgba(95,243,192,.95), rgba(40,200,150,.95)); box-shadow:var(--glow-trust); color:#03150f; } /* ════════ BOTTOM DOCK ════════ */ .dock{ position:fixed; left:50%; transform:translateX(-50%); z-index:50; bottom:calc(env(safe-area-inset-bottom) + 12px); width:min(calc(100% - 24px), 480px); height:var(--dock-h); display:grid; grid-template-columns:repeat(5,1fr); align-items:center; /* sleeker + more see-through — the lattice breathes through the bar */ background:linear-gradient(180deg, rgba(16,20,33,.5), rgba(7,9,17,.4)); border:1px solid var(--glass-line); border-radius:24px; -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); /* a crisp cyan rim-EDGE on top + an inner glow + a little bottom depth */ box-shadow:0 24px 60px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(150,232,255,.26), inset 0 0 22px -16px rgba(61,242,255,.5), inset 0 -20px 34px -28px rgba(0,0,0,.55); padding:0 6px; } /* a sleek glowing STREAK rides the top edge, fading to nothing at the ends (absolute → stays out of the grid) */ .dock::before{ content:""; position:absolute; left:14%; right:14%; top:-0.5px; height:1.5px; z-index:2; pointer-events:none; border-radius:2px; background:linear-gradient(90deg, transparent, rgba(61,242,255,.6) 28%, rgba(177,92,255,.5) 72%, transparent); } @media (prefers-reduced-motion:reduce){ .dock::before{ opacity:.8; } } .dock__btn{ background:none; border:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; color:var(--ink-mute); transition:color .25s var(--ease); } .dock__ico{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* Nav labels (Mindset + MOVUS) — display font, bolder, brighter + a soft glow so they read as clearly as Initium/MOTUS. Color is set explicitly here (not inherited) so resting labels stay legible; the .active rule below restores the cyan glow. */ .dock__lbl{ font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.012em; text-transform:uppercase; color:var(--ink-soft); text-shadow:0 0 10px rgba(160,180,220,.22); } .dock__emoji{ font-size:25px; line-height:25px; display:block; } .dock__btn--initium .dock__lbl{ font-family:var(--display); font-weight:800; font-size:.78rem; letter-spacing:.04em; } .dock__btn--initium.conduct-osc .dock__lbl{ animation:initiumOscillate 4.4s ease-in-out; } /* conducted — one oscillation at a time, not constant */ .dock__btn--initium .dock__emoji{ animation:emojiPop .5s var(--ease-out); } @keyframes initiumOscillate{ 0%,100%{ color:var(--cyan-soft); text-shadow:0 0 16px rgba(61,242,255,.32), 0 0 30px rgba(61,242,255,.16); } 50%{ color:var(--violet-bright); text-shadow:0 0 18px rgba(177,92,255,.36), 0 0 34px rgba(177,92,255,.18); } } @keyframes emojiPop{ 0%{ transform:scale(.6) rotate(-12deg); opacity:.3; } 60%{ transform:scale(1.18) rotate(6deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } } .dock__btn.active{ color:var(--cyan-soft); } .dock__btn.active .dock__ico{ filter:drop-shadow(0 0 7px rgba(61,242,255,.6)); } .dock__btn.has-move{ color:var(--violet-bright); } .dock__btn.has-move .dock__ico{ fill:rgba(177,92,255,.18); filter:drop-shadow(0 0 8px rgba(177,92,255,.85)); animation:starPulse 2.6s var(--ease) infinite; } @keyframes starPulse{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(177,92,255,.6)); } 50%{ filter:drop-shadow(0 0 12px rgba(177,92,255,1)); } } .dock__fab{ justify-self:center; width:66px; height:66px; border:0; padding:0; background:none; display:grid; place-items:center; margin-top:-22px; transition:transform .25s var(--ease); -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; } .dock__logo{ height:62px; width:auto; display:block; transform-origin:50% 50%; pointer-events:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-user-drag:none; } .dock__fab:active{ transform:scale(.92); } /* magical fast spin on tap → lands upright (3 turns) → opens Make A MotusMove */ .dock__fab.spinning .dock__logo{ animation:fabSpin 1.15s cubic-bezier(.2,.75,.2,1); } @keyframes fabSpin{ 0%{ transform:rotate(0) scale(1); } 60%{ transform:rotate(760deg) scale(1.18); } 100%{ transform:rotate(1080deg) scale(1); } } /* ════════ RESPONSIVE UP ════════ */ @media (min-width:680px){ .hero__cta{ flex-direction:row; max-width:none; justify-content:center; } .effects{ flex-direction:row; } .effect{ flex:1; } .pillars{ flex-direction:row; } .pillar{ flex:1; } .statstrip .stat{ padding:18px 10px; } .dock__lbl{ font-size:.88rem; } .dock__btn--initium .dock__lbl{ font-size:.84rem; } } @media (min-width:900px){ :root{ --shell:720px; } .movement{ gap:28px; } } /* keep the long manifesto from feeling cramped on very large screens but stay a single elegant column */ @media (min-width:1200px){ .hero__title{ font-size:8.5rem; } } /* ════════════════════════════════════════════════════════════════ ITERATION 2 · motion, kinetics, climax, a11y ═══════════════════════════════════════════════════════════════════ */ /* ── scroll signal-progress (top rail) ── */ .signalbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:45; background:transparent; pointer-events:none; opacity:0; transition:opacity .4s var(--ease); } .signalbar.show{ opacity:1; } .signalbar span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--violet), var(--cyan)); box-shadow:0 0 12px rgba(177,92,255,.7); transition:width .12s linear; } /* ── broadcast bloom (fires when a MotusMove goes out) ── */ .bloom{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; background:radial-gradient(50% 40% at 50% 42%, rgba(177,92,255,.34), rgba(124,58,237,.12) 45%, transparent 72%); } .bloom.fire{ animation:bloomFire 1.25s var(--ease-out); } @keyframes bloomFire{ 0%{ opacity:0; transform:scale(.6); } 18%{ opacity:1; } 100%{ opacity:0; transform:scale(1.25); } } /* ── staggered group reveals (emergence) ── */ .stagger > *:nth-child(1){ transition-delay:0s; } .stagger > *:nth-child(2){ transition-delay:.08s; } .stagger > *:nth-child(3){ transition-delay:.16s; } .stagger > *:nth-child(4){ transition-delay:.24s; } .stagger > *:nth-child(5){ transition-delay:.32s; } .stagger > *:nth-child(6){ transition-delay:.40s; } /* ── cinematic hero cascade on load ── */ .hero__kicker{ transition-delay:.05s; } .hero__title{ transition-delay:.16s; } .hero__sub{ transition-delay:.34s; } .hero__cta{ transition-delay:.48s; } /* a signal-line sweeps beneath the headline */ .hero__title{ position:relative; } .hero__title.in::after{ content:""; position:absolute; left:50%; bottom:-14px; height:2px; width:0; transform:translateX(-50%); background:linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); box-shadow:0 0 14px rgba(177,92,255,.7); animation:sweep 1.1s var(--ease-out) .9s forwards; } @keyframes sweep{ to{ width:min(72vw,420px); } } /* ── climactic moments ── */ .it-is-time{ animation:timeGlow 3.2s var(--ease) infinite alternate; } @keyframes timeGlow{ from{ text-shadow:0 0 18px rgba(177,92,255,.4), 0 0 44px rgba(124,58,237,.2); } to{ text-shadow:0 0 30px rgba(177,92,255,.75), 0 0 80px rgba(124,58,237,.45); } } .duo{ font-size:clamp(2.2rem,11vw,3.8rem); } .signoff{ position:relative; } /* ── focus-visible accessibility ── */ :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px; } .btn:focus-visible, .dock__fab:focus-visible{ outline-color:var(--violet-bright); } .input:focus-visible{ outline:none; } /* ── identity → atom bridge (Dash → Intuition) ── */ .bridge{ display:flex; align-items:center; justify-content:center; gap:18px; margin:16px 0 6px; padding:24px 18px; border-radius:20px; border:1px solid var(--glass-line); background:linear-gradient(135deg, rgba(177,92,255,.07), rgba(61,242,255,.04)); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi); } .bridge__node{ display:flex; flex-direction:column; align-items:center; gap:11px; flex:none; } .bridge__chip{ font-size:.95rem; } .bridge__cap{ font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); } .bridge__link{ position:relative; flex:1; max-width:130px; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(177,92,255,.6), rgba(61,242,255,.6)); } .bridge__pulse{ position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 10px var(--violet-bright), 0 0 18px var(--violet); transform:translate(-50%,-50%); animation:bridgeTravel 2.6s var(--ease) infinite; } @keyframes bridgeTravel{ 0%{ left:0; opacity:0; } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ left:100%; opacity:0; } } .atom{ position:relative; width:66px; height:66px; display:inline-block; } .atom__nucleus{ position:absolute; top:50%; left:50%; width:13px; height:13px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 40% 35%, var(--violet-bright), var(--violet-deep)); box-shadow:var(--glow-violet); } .atom__orbit{ position:absolute; left:0; top:20px; width:66px; height:26px; border-radius:50%; border:1px solid rgba(61,242,255,.34); animation:spin 4.5s linear infinite; } .atom__orbit::before{ content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; transform:translateX(-50%); border-radius:50%; background:var(--cyan-soft); box-shadow:var(--glow-cyan); } .atom__orbit--b{ animation-duration:6.2s; animation-direction:reverse; animation-delay:-2.1s; border-color:rgba(177,92,255,.34); } .atom__orbit--b::before{ background:var(--violet-bright); box-shadow:var(--glow-violet); } .atom__orbit--c{ animation-duration:7.6s; animation-delay:-1.1s; } @keyframes spin{ to{ transform:rotate(360deg); } } @media (min-width:680px){ .bridge{ gap:30px; } .bridge__link{ max-width:200px; } } /* ════════════════════════════════════════════════════════════════ PASS 5 · tactile animation layer ═══════════════════════════════════════════════════════════════════ */ /* sliding dock indicator */ .dock{ position:fixed; } /* (keeps fixed; relative containing-block via initial CB) */ .dock__pill{ position:absolute; top:9px; bottom:9px; left:0; width:62px; z-index:0; border-radius:16px; opacity:0; pointer-events:none; background:linear-gradient(180deg, rgba(61,242,255,.18), rgba(61,242,255,.04)); border:1px solid rgba(61,242,255,.28); box-shadow:0 0 18px rgba(61,242,255,.28), inset 0 1px 0 rgba(255,255,255,.14); transform:translateX(0); transition:transform .42s var(--ease-out), width .42s var(--ease-out), opacity .3s var(--ease); } .dock__btn, .dock__fab{ position:relative; z-index:1; } .dock__btn{ transition:color .25s var(--ease), transform .2s var(--ease); } .dock__btn:active{ transform:scale(.9); } .dock__btn.active .dock__lbl{ color:var(--cyan-soft); text-shadow:0 0 12px rgba(61,242,255,.55); } /* tactile pills */ .pill{ transition:all .22s var(--ease), transform .14s var(--ease); } .pill:active{ transform:scale(.93); } /* dynamic content entrances */ @keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } .rise{ animation:rise .62s var(--ease-out) both; } /* count-up stat shimmer on settle */ .stat__n.counting{ color:var(--cyan-soft); } /* $TRUST burst */ .trust-pop{ position:fixed; pointer-events:none; z-index:90; font-family:var(--mono); font-weight:700; font-size:.95rem; color:var(--trust); text-shadow:var(--glow-trust); transform:translate(-50%,-50%); animation:trustPop 1s var(--ease-out) forwards; } @keyframes trustPop{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.7); } 22%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-180%) scale(1.15); } } .trust-ring{ position:fixed; pointer-events:none; z-index:89; border-radius:50%; border:2px solid var(--trust); transform:translate(-50%,-50%); animation:trustRing .75s var(--ease-out) forwards; } @keyframes trustRing{ from{ opacity:.85; width:10px; height:10px; } to{ opacity:0; width:92px; height:92px; } } .trust-btn.signaled svg{ animation:starPop .5s var(--ease-out); } @keyframes starPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.5) rotate(20deg); } 100%{ transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .bloom.fire{ animation:none; } .hero__title.in::after{ animation:none; width:min(72vw,420px); } .it-is-time{ animation:none; } .signalbar span{ transition:none; } .stagger > *{ transition-delay:0s !important; } .bridge__pulse{ animation:none; left:50%; } .dock__btn.has-move .dock__ico{ animation:none; } .atom__orbit{ animation:none; } .atom__orbit--b{ transform:rotate(60deg); } .atom__orbit--c{ transform:rotate(120deg); } .rise{ animation:none; } .dock__pill{ transition:opacity .2s; } .trust-pop,.trust-ring,.trust-btn.signaled svg{ animation:none; } .feedcard{ animation:none; } .hero__line--em,.creed__chant,.proclaim--em{ animation:none; } .movement.seen .movement__numeral{ animation:none; } .equation__arrow{ animation:none; } } /* ════════════════════════════════════════════════════════════════ PASS 7 · scroll choreography ═══════════════════════════════════════════════════════════════════ */ .movement.seen .movement__numeral{ animation:numeralIn 1s var(--ease-out) both; } @keyframes numeralIn{ 0%{ opacity:0; transform:translateY(16px) scale(.88); -webkit-text-stroke-color:rgba(177,92,255,.7); } 60%{ -webkit-text-stroke-color:rgba(61,242,255,.4); } 100%{ opacity:1; transform:none; -webkit-text-stroke-color:rgba(174,180,200,.22); } } .equation__arrow{ animation:nudge 2.2s var(--ease) infinite alternate; } @keyframes nudge{ from{ transform:translateX(-3px); } to{ transform:translateX(3px); } } .topbar{ transition:padding .35s var(--ease), background .35s var(--ease); } body.scrolled .topbar{ padding-top:calc(env(safe-area-inset-top) + 8px); padding-bottom:8px; background:linear-gradient(180deg, rgba(5,6,10,.94), rgba(5,6,10,.45)); } /* ════════════════════════════════════════════════════════════════ PASS 8 · compose & feed delight ═══════════════════════════════════════════════════════════════════ */ .feedcard.just-posted{ animation:justPosted 2.6s var(--ease-out); } @keyframes justPosted{ 0%{ box-shadow:0 0 0 2px rgba(214,168,255,.9), 0 0 60px -8px rgba(177,92,255,.95); transform:scale(1.012); } 100%{ box-shadow:0 0 44px -26px rgba(177,92,255,.8), inset 0 1px 0 var(--glass-hi); transform:scale(1); } } .tagchips .pill--violet{ animation:chipPop .32s var(--ease-out); } @keyframes chipPop{ 0%{ transform:scale(.88); } 55%{ transform:scale(1.09); } 100%{ transform:scale(1); } } .broadcast-toggle{ transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .broadcast-toggle:has(input:checked){ border-color:rgba(177,92,255,.55); box-shadow:0 0 26px -12px rgba(177,92,255,.95); background:rgba(177,92,255,.1); } .feedbar__live.pulse{ animation:livePulseHit .85s var(--ease-out); } @keyframes livePulseHit{ 0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(95,243,192,.55); } 40%{ transform:scale(1.09); } 100%{ transform:scale(1); box-shadow:0 0 0 16px rgba(95,243,192,0); } } @media (prefers-reduced-motion: reduce){ .feedcard.just-posted{ animation:none; } .tagchips .pill--violet{ animation:none; } .feedbar__live.pulse{ animation:none; } } /* ════════════════════════════════════════════════════════════════ PASS 9 · entrances, CTA breath, final cohesion ═══════════════════════════════════════════════════════════════════ */ /* app-view entrance choreography */ .view--profile.is-active .view-head{ animation:rise .55s var(--ease-out) both; } .view--profile.is-active .idcard{ animation:rise .62s var(--ease-out) .08s both; } .view--profile.is-active .statstrip{ animation:rise .62s var(--ease-out) .16s both; } .view--profile.is-active .spotlight{ animation:rise .62s var(--ease-out) .22s both; } .view--news.is-active .view-head{ animation:rise .55s var(--ease-out) both; } .view--news.is-active .feedbar{ animation:rise .55s var(--ease-out) .1s both; } /* breathing primary call-to-action — the signal that draws you in */ .hero__cta .btn--signal, .coda__cta .btn--signal{ animation:ctaBreath 3.6s var(--ease) infinite; } @keyframes ctaBreath{ 0%,100%{ box-shadow:var(--glow-violet); } 50%{ box-shadow:0 0 40px rgba(177,92,255,.7), 0 0 110px rgba(124,58,237,.42); } } /* the FAB lifts a touch when compose is open */ .modal.open ~ .dock .dock__fab{ transform:scale(1.04); } /* ── dock label protection + cycling MOTUS label ── */ .dock__btn{ min-width:0; overflow:hidden; } .dock__lbl{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:clip; } /* the cycling call-to-action — bigger, bolder, glowing CYAN, magical */ .dock__btn--cycle{ overflow:visible; } .dock__btn--mindset{ overflow:visible; } /* let the spirit transitions (streak/rise/ember/spark) render past the 30px slot */ .dock__lbl--cycle{ display:inline-block; font-family:var(--display); font-weight:800; font-size:.66rem; letter-spacing:.03em; transition:opacity .28s var(--ease-out), transform .36s var(--ease-out), filter .28s var(--ease-out), font-size .2s var(--ease); will-change:opacity, transform, filter; color:var(--cyan-soft); /* soft glow / aura ONLY — wide blur, no tight bright layer, no brightening pulse (never a highlight) */ text-shadow:0 0 18px rgba(61,242,255,.34), 0 0 34px rgba(61,242,255,.16); } .dock__btn--cycle .dock__ico{ color:var(--cyan); filter:drop-shadow(0 0 6px rgba(61,242,255,.85)); } .dock__btn--cycle .dock__lbl--cycle{ color:var(--cyan-soft); } /* ════ LIVING NAV ICONS ════ MOVUS = infinity (the endless move): breathes (grows/shrinks) + glows on its own, always. MOTUS = our music: beamed notes that sway like they keep time, with little notes drifting up. */ /* MOVUS infinity — glowing cyan, grows/shrinks (movusBreath) + pulses cyan↔near-white with a swelling cyan aura (movusPulse). Two periods → organic, never-mechanical. */ .dock__ico--infinity{ transform-origin:50% 50%; color:var(--cyan); stroke-width:1.7; filter:drop-shadow(0 0 4px rgba(61,242,255,.5)); will-change:transform, color, filter; } /* still by default — the conductor breathes it one at a time */ .dock__btn--movus.conduct-breath .dock__ico--infinity{ animation:movusBreath 3.6s ease-in-out, movusPulse 2.4s ease-in-out; } @keyframes movusBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } } @keyframes movusPulse{ 0%,100%{ color:var(--cyan); filter:drop-shadow(0 0 4px rgba(61,242,255,.55)) drop-shadow(0 0 9px rgba(61,242,255,.3)); } 40% { color:#bfeaff; filter:drop-shadow(0 0 7px rgba(138,246,255,.85)) drop-shadow(0 0 15px rgba(61,242,255,.45)); } 50% { color:#f4fdff; filter:drop-shadow(0 0 9px rgba(207,247,255,1)) drop-shadow(0 0 20px rgba(61,242,255,.6)) drop-shadow(0 0 30px rgba(61,242,255,.28)); } } /* don't let the generic .active drop-shadow flatten the richer aura */ .dock__btn--movus.active .dock__ico--infinity{ filter:none; } .dock__ico--notes{ transform-origin:50% 85%; animation:notesBob 2.4s ease-in-out infinite; } @keyframes notesBob{ 0%,100%{ transform:translateY(0) rotate(-5deg); } 50%{ transform:translateY(-1.5px) rotate(5deg); } } .dock__notes{ position:absolute; left:50%; top:1px; width:0; height:0; pointer-events:none; z-index:2; } .dock__note{ position:absolute; left:0; top:0; font-style:normal; font-size:11px; line-height:1; color:var(--cyan-soft); text-shadow:0 0 8px rgba(61,242,255,.75); opacity:0; will-change:transform, opacity; } .dock__note--1{ --nx:-7px; --nr:-16deg; animation:noteFloat 3.6s ease-in-out infinite; } .dock__note--2{ --nx:8px; --nr:14deg; animation:noteFloat 3.6s ease-in-out infinite 1.2s; } .dock__note--3{ --nx:1px; --nr:-7deg; animation:noteFloat 3.6s ease-in-out infinite 2.4s; } @keyframes noteFloat{ 0% { opacity:0; transform:translate(-50%,2px) scale(.65) rotate(0deg); } 18% { opacity:.95; } 60% { opacity:.5; } 100%{ opacity:0; transform:translate(calc(-50% + var(--nx)),-21px) scale(1) rotate(var(--nr)); } } @media (prefers-reduced-motion: reduce){ .brand__motus, .brand__us, .dock__lbl--cycle, .hm-motus, .hm-us, .dock__btn--initium .dock__lbl, .dock__btn--initium .dock__emoji, .dock__ico--infinity, .dock__ico--notes, .dock__note{ animation:none; } .dock__note{ display:none; } } /* ════════════════════════════════════════════════════════════════ MINDSET SPIRIT — the cycling mindset symbols (driven by mindset-spirit.js) The glyph is TRUE colour; the cyan futurism is a glow AURA behind it + motion. Two layers stack; on each swap a random fx-* runs the OUT on the old + IN on the new. ═══════════════════════════════════════════════════════════════════ */ .dock__spirit{ position:relative; display:grid; place-items:center; width:30px; height:30px; font-size:25px; line-height:1; isolation:isolate; -webkit-tap-highlight-color:transparent; } .dock__spirit::before{ content:""; position:absolute; z-index:0; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(61,242,255,.5) 0%, rgba(61,242,255,.26) 42%, rgba(138,246,255,.12) 66%, transparent 78%); filter:blur(5px); animation:spiritAura 5.2s ease-in-out infinite; will-change:transform, opacity; } @keyframes spiritAura{ 0%,100%{ transform:translate(-50%,-50%) scale(.92); opacity:.55; } 50%{ transform:translate(-50%,-50%) scale(1.18); opacity:.95; } } .spirit__layer{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; font-size:inherit; line-height:1; transform-origin:50% 50%; backface-visibility:hidden; -webkit-backface-visibility:hidden; pointer-events:none; will-change:transform, opacity, filter, clip-path; filter:drop-shadow(0 0 5px rgba(61,242,255,.45)) drop-shadow(0 0 10px rgba(61,242,255,.26)); } .spirit__layer--in{ z-index:2; } /* a brief cyan spark flares behind the slot on each swap */ .dock__spirit.is-swapping::after{ content:""; position:absolute; z-index:0; inset:-6px; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(138,246,255,.7), rgba(61,242,255,.25) 55%, transparent 75%); animation:spiritSpark .6s cubic-bezier(.16,1,.3,1) forwards; } @keyframes spiritSpark{ 0%{ opacity:0; transform:scale(.4); } 35%{ opacity:1; } 100%{ opacity:0; transform:scale(1.5); } } /* ════ MOTUS SPIRIT — the energy of the move (motus-spirit.js) ════ the living emoji sits in the MOTUS icon slot (reuses .dock__spirit/.spirit__layer); ⚡ crackles; an electric ARC fires across the dock to CHARGE a neighbor. */ .dock__btn--cycle .dock__spirit.motus-spirit{ margin:0 auto; } .spirit__layer.is-bolt{ animation:motusBoltCrackle .72s ease-in-out; } @keyframes motusBoltCrackle{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(61,242,255,.6)) drop-shadow(0 0 11px rgba(138,246,255,.4)); transform:scale(1) rotate(0); } 20%{ filter:drop-shadow(0 0 9px rgba(207,247,255,1)) drop-shadow(0 0 20px rgba(61,242,255,.7)); transform:scale(1.13) rotate(-5deg); } 45%{ transform:scale(1.04) rotate(4deg); } 70%{ filter:drop-shadow(0 0 12px rgba(255,255,255,.95)) drop-shadow(0 0 24px rgba(61,242,255,.6)); transform:scale(1.1) rotate(-2deg); } } /* the electric arc — a crackling cyan/white filament shot across the dock */ .motus-arc{ position:fixed; z-index:46; height:2px; transform-origin:0 50%; pointer-events:none; border-radius:2px; transform:rotate(var(--a,0deg)) scaleX(0); background:linear-gradient(90deg, rgba(138,246,255,0), rgba(207,247,255,.95) 18%, rgba(61,242,255,1) 50%, rgba(207,247,255,.95) 82%, rgba(138,246,255,0)); box-shadow:0 0 8px rgba(61,242,255,.9), 0 0 16px rgba(138,246,255,.5); animation:motusArc .52s cubic-bezier(.2,.8,.3,1) forwards; } @keyframes motusArc{ 0%{ opacity:0; transform:rotate(var(--a,0deg)) scaleX(0); } 16%{ opacity:1; } 38%{ transform:rotate(var(--a,0deg)) scaleX(1); filter:brightness(1.5); } 55%{ filter:brightness(.65); } 72%{ filter:brightness(1.6); } 100%{ opacity:0; transform:rotate(var(--a,0deg)) scaleX(1); filter:brightness(1); } } /* the neighbor lights up when MOTUS charges it — but NEVER override the MOVUS infinity's own perpetual breath/pulse (that would freeze + re-seed it = a visible jump) */ .dock__btn.motus-charged > .dock__ico:not(.dock__ico--infinity), .dock__btn.motus-charged > .dock__emoji, .dock__btn.motus-charged > .dock__spirit, .dock__btn.motus-charged > .dock__notes, .dock__fab.motus-charged > .dock__logo{ animation:motusCharge .66s ease-out; } @keyframes motusCharge{ 0%,100%{ filter:none; transform:translateY(0); } 28%{ filter:drop-shadow(0 0 11px rgba(61,242,255,.95)) drop-shadow(0 0 20px rgba(138,246,255,.5)) brightness(1.22); transform:translateY(-1.5px) scale(1.06); } 55%{ filter:drop-shadow(0 0 6px rgba(138,246,255,.7)); transform:translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce){ .spirit__layer.is-bolt, .motus-arc, .dock__btn.motus-charged > *, .dock__fab.motus-charged > *{ animation:none !important; } .motus-arc{ display:none !important; } } /* ════ MINDSET → DAVARA morph (mindset-davara.js) — the spirit becomes Davara's avatar ════ */ .dock__spirit .spirit__davara{ position:absolute; inset:0; z-index:3; width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; opacity:0; transform:scale(.45) rotate(-14deg); transition:opacity .34s var(--ease-out), transform .44s var(--ease-out); filter:drop-shadow(0 0 8px rgba(61,242,255,.8)) drop-shadow(0 0 16px rgba(138,246,255,.45)); } .dock__spirit .spirit__davara.on{ opacity:1; transform:scale(1.02) rotate(0); } .dock__spirit.is-davara .spirit__layer{ opacity:0; transform:scale(.55); transition:opacity .3s var(--ease-out), transform .34s var(--ease-out); } .dock__spirit.is-davara::before{ animation:spiritAuraThrob 1.05s ease-in-out infinite; } /* the aura quickens — Davara is awakening */ @media (prefers-reduced-motion: reduce){ .dock__spirit .spirit__davara{ transition:opacity .2s ease; transform:none; } .dock__spirit.is-davara .spirit__layer{ transition:none; } } /* ════ FAB LIFE — the heart of the dock is alive (fab-life.js) ════ */ /* alive beats: spin / grow / electric charge (the logo, never the hit-box) */ .dock__fab.fab-alive-spin .dock__logo{ animation:fabSpin 1.2s cubic-bezier(.2,.75,.2,1); } .dock__fab.fab-alive-grow .dock__logo{ animation:fabAliveGrow 1.25s ease-in-out; } @keyframes fabAliveGrow{ 0%,100%{ transform:scale(1); } 32%{ transform:scale(1.17); } 58%{ transform:scale(.95); } 80%{ transform:scale(1.05); } } .dock__fab.fab-alive-charge .dock__logo{ animation:fabAliveCharge 1.35s ease-in-out; } @keyframes fabAliveCharge{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(61,242,255,.5)); transform:scale(1); } 22%{ filter:drop-shadow(0 0 13px rgba(207,247,255,.95)) drop-shadow(0 0 26px rgba(61,242,255,.6)); transform:scale(1.07); } 44%{ filter:drop-shadow(0 0 5px rgba(61,242,255,.4)); transform:scale(.99); } 68%{ filter:drop-shadow(0 0 15px rgba(255,255,255,.92)) drop-shadow(0 0 30px rgba(61,242,255,.55)); transform:scale(1.05); } } /* the rare 👀 peek — the logo dims, the eyes look out, then back */ .dock__fab .fab-eyes{ position:absolute; left:50%; top:50%; font-size:21px; line-height:1; z-index:3; pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.4); transition:opacity .3s var(--ease-out), transform .42s var(--ease-out); filter:drop-shadow(0 0 7px rgba(61,242,255,.6)); } .dock__fab .fab-eyes.on{ opacity:1; transform:translate(-50%,-50%) scale(1); } .dock__fab.is-eyes .dock__logo{ opacity:.1; transition:opacity .3s var(--ease-out); } /* an emoji pulled into the center "+" */ .fab-suck{ position:fixed; left:0; top:0; z-index:47; font-size:18px; line-height:1; pointer-events:none; will-change:transform,opacity; filter:drop-shadow(0 0 6px rgba(61,242,255,.6)); } /* …absorbed: a bright flash blooms at the core */ .dock__fab .fab-absorb-flash{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; z-index:4; pointer-events:none; background:radial-gradient(closest-side, rgba(207,247,255,.96), rgba(61,242,255,.42) 55%, transparent 75%); animation:fabAbsorb .62s cubic-bezier(.16,1,.3,1) forwards; } @keyframes fabAbsorb{ 0%{ opacity:0; transform:scale(.3); } 35%{ opacity:1; transform:scale(1.45); } 100%{ opacity:0; transform:scale(2.3); } } /* reciprocity — a tab GIVES a spark of energy as the heart pulls a glyph from it */ .dock__btn .dock-give-spark, .dock__fab .dock-give-spark{ position:absolute; left:50%; top:46%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; z-index:4; pointer-events:none; background:radial-gradient(closest-side, rgba(207,247,255,.92), rgba(61,242,255,.34) 60%, transparent 78%); animation:dockGive .56s cubic-bezier(.16,1,.3,1) forwards; } @keyframes dockGive{ 0%{ opacity:0; transform:scale(.35); } 30%{ opacity:.95; transform:scale(1.3); } 100%{ opacity:0; transform:scale(.18); } } @media (prefers-reduced-motion: reduce){ .dock__fab.fab-alive-spin .dock__logo, .dock__fab.fab-alive-grow .dock__logo, .dock__fab.fab-alive-charge .dock__logo, .dock__fab .fab-eyes, .fab-suck, .dock__fab .fab-absorb-flash, .dock-give-spark{ animation:none !important; transition:none !important; } } /* ── the symbolic transition library (one picked at random per swap) ── */ /* 1 · particle dissolve / reform */ @keyframes spiritOut_dissolve{ 0%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32)) blur(0);} 55%{opacity:.85;transform:scale(1.06);filter:drop-shadow(0 0 14px rgba(61,242,255,.7)) blur(.4px);} 100%{opacity:0;transform:scale(1.34);filter:drop-shadow(0 0 22px rgba(138,246,255,.9)) blur(3.5px);} } .spirit__layer--out.fx-dissolve{ animation:spiritOut_dissolve .42s cubic-bezier(.4,0,.9,.2) forwards; -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 70%); mask-image:radial-gradient(circle,#000 38%,transparent 70%); } @keyframes spiritIn_dissolve{ 0%{opacity:0;transform:scale(1.32);filter:drop-shadow(0 0 22px rgba(138,246,255,.9)) blur(3.5px);} 45%{opacity:.7;transform:scale(.96);filter:drop-shadow(0 0 14px rgba(61,242,255,.7)) blur(.6px);} 100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32)) blur(0);} } .spirit__layer--in.fx-dissolve{ animation:spiritIn_dissolve .58s cubic-bezier(.16,1,.3,1) .34s forwards; } /* 2 · 3D coin flip */ @keyframes spiritOut_coin{ 0%{opacity:1;transform:perspective(420px) rotateY(0deg) scale(1);} 60%{opacity:1;transform:perspective(420px) rotateY(-84deg) scale(.92);} 100%{opacity:0;transform:perspective(420px) rotateY(-90deg) scale(.9);} } .spirit__layer--out.fx-coin{ animation:spiritOut_coin .36s cubic-bezier(.62,.04,.78,.27) forwards; } @keyframes spiritIn_coin{ 0%{opacity:0;transform:perspective(420px) rotateY(90deg) scale(.9);} 40%{opacity:1;transform:perspective(420px) rotateY(84deg) scale(.92);} 72%{opacity:1;transform:perspective(420px) rotateY(-8deg) scale(1.05);} 100%{opacity:1;transform:perspective(420px) rotateY(0deg) scale(1);} } .spirit__layer--in.fx-coin{ animation:spiritIn_coin .42s cubic-bezier(.18,.9,.28,1.2) .3s forwards; } /* 3 · iris portal collapse + bloom */ @keyframes spiritOut_iris{ 0%{opacity:1;clip-path:circle(72% at 50% 50%);transform:scale(1);} 100%{opacity:1;clip-path:circle(0% at 50% 50%);transform:scale(.82);} } .spirit__layer--out.fx-iris{ animation:spiritOut_iris .4s cubic-bezier(.7,0,.84,0) forwards; } @keyframes spiritIn_iris{ 0%{opacity:1;clip-path:circle(0% at 50% 50%);transform:scale(1.12);} 62%{opacity:1;clip-path:circle(64% at 50% 50%);transform:scale(.98);} 100%{opacity:1;clip-path:circle(80% at 50% 50%);transform:scale(1);} } .spirit__layer--in.fx-iris{ animation:spiritIn_iris .46s cubic-bezier(.16,1,.3,1) .38s forwards; } /* 4 · digital glitch / scanline */ @keyframes spiritOut_glitch{ 0%{opacity:1;transform:translate3d(0,0,0) skewX(0);clip-path:inset(0 0 0 0);} 20%{opacity:1;transform:translate3d(-2px,1px,0) skewX(-8deg);clip-path:inset(0 0 64% 0);} 40%{opacity:.9;transform:translate3d(3px,-1px,0) skewX(6deg);clip-path:inset(58% 0 0 0);} 62%{opacity:.8;transform:translate3d(-3px,0,0) skewX(-4deg);clip-path:inset(30% 0 34% 0);} 100%{opacity:0;transform:translate3d(5px,0,0) skewX(10deg);clip-path:inset(46% 0 46% 0);} } .spirit__layer--out.fx-glitch{ animation:spiritOut_glitch .3s steps(6,jump-none) forwards; filter:drop-shadow(2px 0 4px rgba(61,242,255,.7)) drop-shadow(-2px 0 4px rgba(177,92,255,.4)); } @keyframes spiritIn_glitch{ 0%{opacity:0;transform:translate3d(-5px,0,0) skewX(-10deg);clip-path:inset(46% 0 46% 0);} 30%{opacity:.85;transform:translate3d(3px,0,0) skewX(6deg);clip-path:inset(20% 0 22% 0);} 55%{opacity:1;transform:translate3d(-2px,0,0) skewX(-3deg);clip-path:inset(0 0 0 0);} 72%{opacity:.9;transform:translate3d(1px,0,0) skewX(2deg);clip-path:inset(0 0 0 0);} 100%{opacity:1;transform:translate3d(0,0,0) skewX(0);clip-path:inset(0 0 0 0);} } .spirit__layer--in.fx-glitch{ animation:spiritIn_glitch .34s steps(7,jump-none) .22s forwards; } /* 5 · orbital spin swap */ @keyframes spiritOut_orbit{ 0%{opacity:1;transform:rotate(0deg) translateX(0) rotate(0deg) scale(1);} 100%{opacity:0;transform:rotate(150deg) translateX(11px) rotate(-150deg) scale(.7);} } .spirit__layer--out.fx-orbit{ animation:spiritOut_orbit .44s cubic-bezier(.45,0,.55,1) forwards; } @keyframes spiritIn_orbit{ 0%{opacity:0;transform:rotate(-160deg) translateX(11px) rotate(160deg) scale(.7);} 60%{opacity:1;transform:rotate(-20deg) translateX(5px) rotate(20deg) scale(1.04);} 100%{opacity:1;transform:rotate(0deg) translateX(0) rotate(0deg) scale(1);} } .spirit__layer--in.fx-orbit{ animation:spiritIn_orbit .5s cubic-bezier(.2,.9,.3,1.1) .3s forwards; } /* 6 · water ripple */ @keyframes spiritOut_ripple{ 0%{opacity:1;transform:scale(1) translateY(0);filter:drop-shadow(0 0 6px rgba(61,242,255,.32)) blur(0);} 45%{opacity:.7;transform:scaleX(1.25) scaleY(.8) translateY(1px);filter:drop-shadow(0 0 12px rgba(61,242,255,.6)) blur(1px);} 100%{opacity:0;transform:scaleX(1.7) scaleY(.55) translateY(2px);filter:drop-shadow(0 0 18px rgba(138,246,255,.8)) blur(3px);} } .spirit__layer--out.fx-ripple{ animation:spiritOut_ripple .46s cubic-bezier(.33,0,.67,1) forwards; } @keyframes spiritIn_ripple{ 0%{opacity:0;transform:scaleX(1.6) scaleY(.5) translateY(2px);filter:blur(3px);} 40%{opacity:.8;transform:scaleX(.86) scaleY(1.16) translateY(-1px);filter:blur(.6px);} 68%{opacity:1;transform:scaleX(1.06) scaleY(.96);filter:blur(0);} 100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-ripple{ animation:spiritIn_ripple .56s cubic-bezier(.22,1,.36,1) .42s forwards; } /* 7 · vertical rise / sink (horizon) */ @keyframes spiritOut_sink{ 0%{opacity:1;transform:translateY(0) scale(1);} 100%{opacity:0;transform:translateY(120%) scale(.9);} } .spirit__layer--out.fx-rise{ animation:spiritOut_sink .36s cubic-bezier(.55,0,.85,.25) forwards; -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 60%,transparent 100%); } @keyframes spiritIn_rise{ 0%{opacity:0;transform:translateY(-120%) scale(.9);} 55%{opacity:1;transform:translateY(6%) scale(1.03);} 100%{opacity:1;transform:translateY(0) scale(1);} } .spirit__layer--in.fx-rise{ animation:spiritIn_rise .42s cubic-bezier(.18,.95,.3,1.1) .26s forwards; -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%); mask-image:linear-gradient(180deg,#000 40%,transparent 100%); } /* 8 · lightspeed streak */ @keyframes spiritOut_streak{ 0%{opacity:1;transform:translateX(0) scaleX(1) scaleY(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.4));} 35%{opacity:1;transform:translateX(2px) scaleX(.7) scaleY(1.05);filter:drop-shadow(6px 0 10px rgba(138,246,255,.8));} 100%{opacity:0;transform:translateX(95%) scaleX(2) scaleY(.5);filter:drop-shadow(16px 0 16px rgba(138,246,255,.95));} } .spirit__layer--out.fx-streak{ animation:spiritOut_streak .32s cubic-bezier(.6,0,.9,.1) forwards; } @keyframes spiritIn_streak{ 0%{opacity:0;transform:translateX(-105%) scaleX(2) scaleY(.5);filter:drop-shadow(-16px 0 16px rgba(138,246,255,.95));} 55%{opacity:1;transform:translateX(-3px) scaleX(.78) scaleY(1.06);filter:drop-shadow(-6px 0 10px rgba(61,242,255,.7));} 78%{opacity:1;transform:translateX(2px) scaleX(1.08) scaleY(.97);} 100%{opacity:1;transform:translateX(0) scaleX(1) scaleY(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-streak{ animation:spiritIn_streak .4s cubic-bezier(.16,.9,.28,1.05) .24s forwards; } /* 9 · origami fold */ @keyframes spiritOut_fold{ 0%{opacity:1;transform:perspective(360px) rotateX(0deg) scaleY(1);} 55%{opacity:1;transform:perspective(360px) rotateX(72deg) scaleY(.62);} 100%{opacity:0;transform:perspective(360px) rotateX(96deg) scaleY(.5);} } .spirit__layer--out.fx-fold{ animation:spiritOut_fold .38s cubic-bezier(.66,0,.34,1) forwards; transform-origin:50% 100%; } @keyframes spiritIn_fold{ 0%{opacity:0;transform:perspective(360px) rotateX(-96deg) scaleY(.5);} 48%{opacity:1;transform:perspective(360px) rotateX(-64deg) scaleY(.64);} 78%{opacity:1;transform:perspective(360px) rotateX(10deg) scaleY(1.04);} 100%{opacity:1;transform:perspective(360px) rotateX(0deg) scaleY(1);} } .spirit__layer--in.fx-fold{ animation:spiritIn_fold .44s cubic-bezier(.2,.9,.28,1.08) .3s forwards; transform-origin:50% 0%; } /* 10 · ember burn → ignite */ @keyframes spiritOut_ember{ 0%{opacity:1;transform:translateY(0) scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} 50%{opacity:.9;transform:translateY(-3px) scale(1.02);filter:drop-shadow(0 -3px 12px rgba(138,246,255,.85));} 100%{opacity:0;transform:translateY(-12px) scale(.86);filter:drop-shadow(0 -10px 16px rgba(138,246,255,.95));} } .spirit__layer--out.fx-ember{ animation:spiritOut_ember .46s cubic-bezier(.42,0,.78,.3) forwards; -webkit-mask-image:linear-gradient(0deg,transparent 0%,#000 28%,#000 100%); mask-image:linear-gradient(0deg,transparent 0%,#000 28%,#000 100%); } @keyframes spiritIn_ember{ 0%{opacity:0;transform:translateY(7px) scale(.4);filter:brightness(2.2) drop-shadow(0 0 14px rgba(138,246,255,.95));} 45%{opacity:1;transform:translateY(0) scale(1.06);filter:brightness(1.3) drop-shadow(0 0 10px rgba(61,242,255,.7));} 100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1) drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-ember{ animation:spiritIn_ember .56s cubic-bezier(.16,1,.3,1) .36s forwards; } /* ════ THE SHOWPIECE — a spirit comes alive, walks the dock, nudges another icon ════ The ghost + its trail are position:fixed, pointer-events:none, z-index 58–59 (above the dock bar, below modals) — they can NEVER block a tap or shift layout. */ .spirit-ghost{ position:fixed; left:0; top:0; width:34px; height:34px; display:grid; place-items:center; font-size:26px; line-height:1; z-index:59; /* above the dock (50), below modals (60) */ pointer-events:none; will-change:transform; transform:translate3d(-200px,-200px,0); -webkit-user-select:none; user-select:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); } .spirit-aura{ position:absolute; inset:-10px; border-radius:50%; pointer-events:none; z-index:-1; background:radial-gradient(circle, rgba(61,242,255,.55) 0%, rgba(61,242,255,.28) 38%, rgba(138,246,255,.1) 62%, transparent 78%); filter:blur(4px); animation:spiritGhostAura 1.8s ease-in-out infinite; } @keyframes spiritGhostAura{ 0%,100%{ opacity:.85; transform:scale(1); } 50%{ opacity:1; transform:scale(1.14); } } .spirit-trail{ position:fixed; left:0; top:0; width:8px; height:8px; border-radius:50%; z-index:58; pointer-events:none; background:radial-gradient(circle, rgba(138,246,255,.9), rgba(61,242,255,.35) 55%, transparent 75%); animation:spiritTrailFade .47s ease-out forwards; will-change:transform, opacity; } @keyframes spiritTrailFade{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(.4); } } /* the target's reaction — a soft cyan "signal received" wobble + expanding ring (no layout shift) */ .dock__btn.spirit-nudged > .dock__ico, .dock__btn.spirit-nudged > .dock__emoji, .dock__btn.spirit-nudged > .dock__spirit, .dock__btn.spirit-nudged > .dock__notes, .dock__fab.spirit-nudged > .dock__logo{ animation:spiritWobble .62s cubic-bezier(.22,.61,.36,1); } @keyframes spiritWobble{ 0%{ transform:scale(1) rotate(0); } 30%{ transform:scale(1.14) rotate(6deg); } 55%{ transform:scale(.97) rotate(-4deg); } 78%{ transform:scale(1.06) rotate(2deg); } 100%{ transform:scale(1) rotate(0); } } .dock__btn.spirit-nudged::after, .dock__fab.spirit-nudged::after{ content:""; position:absolute; left:50%; top:42%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; pointer-events:none; z-index:0; border:1.5px solid rgba(61,242,255,.85); box-shadow:0 0 14px rgba(61,242,255,.5); animation:spiritRing .6s ease-out forwards; } @keyframes spiritRing{ 0%{ opacity:.9; transform:scale(.4); } 70%{ opacity:.5; } 100%{ opacity:0; transform:scale(3.4); } } @media (prefers-reduced-motion: reduce){ .dock__spirit::before{ animation:none; } .spirit__layer{ animation:none !important; filter:drop-shadow(0 0 5px rgba(61,242,255,.45)); } .spirit__layer--out{ opacity:0; } .spirit__layer--in{ opacity:1; transform:none; } .dock__spirit.is-swapping::after{ display:none; } .spirit-ghost, .spirit-trail{ display:none !important; } .dock__btn.spirit-nudged > *, .dock__fab.spirit-nudged > *{ animation:none !important; } .dock__btn.spirit-nudged::after, .dock__fab.spirit-nudged::after{ display:none !important; } } /* ════════ GITHUB · build in public ════════ */ .gh-ico{ width:14px; height:14px; fill:currentColor; flex:none; vertical-align:-2px; } .gh-link{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; } .gh-link:hover{ color:var(--cyan-soft); } .gh-link .gh-ico{ color:var(--ink-soft); } .input-prefix__at.gh{ color:var(--ink-soft); } .repos-panel{ padding:18px; margin-bottom:18px; } .repo-add{ display:flex; gap:8px; margin-bottom:14px; } .repo-add .input{ flex:1; min-width:0; } .repo-add .pill{ flex:none; white-space:nowrap; } .repos{ display:flex; flex-direction:column; gap:9px; } .repo-card{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); transition:border-color .25s var(--ease), transform .2s var(--ease); } .repo-card:hover{ border-color:rgba(61,242,255,.35); transform:translateX(2px); } .repo-card .gh-ico{ width:16px; height:16px; color:var(--cyan-soft); } .repo-card__name{ flex:1; font-family:var(--mono); font-size:.88rem; color:var(--ink); text-decoration:none; word-break:break-all; } .repo-card__name:hover{ color:var(--cyan-soft); } .repo-card__x{ flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--glass-line); background:none; color:var(--ink-mute); font-size:1.1rem; line-height:1; transition:all .2s var(--ease); } .repo-card__x:hover{ color:#ff8a9b; border-color:rgba(255,138,155,.4); } .gh-mini{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.68rem; color:var(--ink-mute); text-decoration:none; } .gh-mini:hover{ color:var(--cyan-soft); } .gh-mini .gh-ico{ width:13px; height:13px; } /* ════════ AVATARS · IMAGES · LINK CHIPS ════════ */ .avatar{ position:relative; overflow:hidden; } .avatar__img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; } .idcard__avbtn{ border:1px solid var(--glass-hi); cursor:pointer; position:relative; } .idcard__avbtn .avatar__cam{ position:absolute; right:-3px; bottom:-3px; width:23px; height:23px; border-radius:50%; background:linear-gradient(135deg,var(--violet-core),var(--violet-deep)); display:grid; place-items:center; border:2px solid var(--bg-2); box-shadow:var(--glow-violet); } .avatar__cam svg{ width:11px; height:11px; color:#fff; } .feedcard__av{ overflow:hidden; } .feedcard__img, .movecard__img{ width:100%; border-radius:14px; margin:2px 0 14px; display:block; border:1px solid var(--glass-line); max-height:400px; object-fit:cover; } .movelinks{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; } .movelink{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.72rem; color:var(--cyan-soft); text-decoration:none; padding:6px 11px; border-radius:99px; border:1px solid rgba(61,242,255,.28); background:rgba(61,242,255,.05); transition:all .2s var(--ease); max-width:100%; overflow:hidden; white-space:nowrap; } .movelink svg{ width:13px; height:13px; flex:none; } .movelink:hover{ background:rgba(61,242,255,.12); box-shadow:var(--glow-cyan); } /* MOVUS search */ .searchbar{ display:flex; align-items:center; gap:10px; padding:0 14px; margin-bottom:14px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .searchbar:focus-within{ border-color:rgba(61,242,255,.5); box-shadow:0 0 0 3px rgba(61,242,255,.1); } .searchbar__ico{ width:18px; height:18px; color:var(--ink-mute); flex:none; } .searchbar__input{ flex:1; min-width:0; background:none; border:0; outline:none; color:var(--ink); font-family:var(--body); font-size:1rem; padding:13px 0; } .searchbar__input::placeholder{ color:var(--ink-faint); } .searchbar__input::-webkit-search-cancel-button{ -webkit-appearance:none; } .feedcard__loc{ display:inline-block; font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; color:var(--ink-soft); margin-left:8px; vertical-align:middle; } /* MOVUS time filter */ .timefilter{ display:flex; align-items:center; gap:7px; margin-bottom:16px; flex-wrap:wrap; } .timechip{ font-family:var(--display); font-weight:600; font-size:.78rem; padding:7px 13px; border-radius:99px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-soft); cursor:pointer; transition:all .2s var(--ease); } .timechip:hover{ border-color:rgba(61,242,255,.3); } .timechip.on{ background:rgba(61,242,255,.12); border-color:rgba(61,242,255,.45); color:var(--cyan-soft); box-shadow:var(--glow-cyan); } .timemonth{ margin-left:auto; font-family:var(--mono); font-size:.76rem; color:var(--ink-soft); background:var(--glass); border:1px solid var(--glass-line); border-radius:10px; padding:7px 10px; color-scheme:dark; cursor:pointer; } .timemonth::-webkit-calendar-picker-indicator{ filter:invert(.75); cursor:pointer; } /* compose image picker */ .moveimg-drop{ display:flex; align-items:center; justify-content:center; padding:16px; border-radius:13px; border:1px dashed var(--glass-line); background:rgba(255,255,255,.03); color:var(--ink-soft); font-family:var(--display); font-weight:500; font-size:.92rem; cursor:pointer; transition:all .25s var(--ease); } .moveimg-drop:hover{ border-color:rgba(61,242,255,.45); color:var(--cyan-soft); } .moveimg-preview{ position:relative; margin-top:10px; } .moveimg-preview img{ width:100%; border-radius:13px; display:block; border:1px solid var(--glass-line); max-height:280px; object-fit:cover; } .moveimg-x{ position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(2,3,8,.72); color:#fff; font-size:1.2rem; line-height:1; cursor:pointer; } /* ════════ PHOTO CROP MODAL ════════ */ .cropwrap{ position:relative; width:280px; max-width:100%; height:280px; margin:6px auto 16px; border-radius:18px; overflow:hidden; background:#05060a; touch-action:none; } .crop-canvas{ display:block; width:280px; height:280px; cursor:grab; } .crop-canvas:active{ cursor:grabbing; } .crop-ring{ position:absolute; inset:0; pointer-events:none; box-shadow:0 0 0 9999px rgba(5,6,10,.62); border-radius:50%; } .crop-ring::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(61,242,255,.55); box-shadow:0 0 22px rgba(61,242,255,.3); } .crop-empty{ position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-mute); font-family:var(--mono); font-size:.78rem; text-align:center; padding:20px; } .crop-empty img{ width:100%; height:100%; object-fit:cover; } .crop-zoom{ display:block; width:280px; max-width:100%; margin:0 auto 16px; accent-color:var(--cyan); cursor:pointer; } .crop-zoom:disabled{ opacity:.4; cursor:default; } .photo-actions{ display:flex; flex-direction:column; gap:10px; } .photo-file{ cursor:pointer; } .photo-status{ text-align:center; font-size:.82rem; color:var(--cyan-soft); margin:12px 0 0; min-height:1em; } /* ════════ SETTINGS ════════ */ .set-section{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); margin:22px 0 12px; padding-top:16px; border-top:1px solid var(--glass-line); display:flex; align-items:center; gap:10px; } .set-section:first-of-type{ border-top:0; padding-top:0; margin-top:2px; } .set-private{ font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-soft); padding:3px 8px; border-radius:99px; border:1px solid rgba(61,242,255,.24); background:rgba(61,242,255,.05); } .set-status{ display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--trust); padding:10px 13px; border-radius:12px; background:rgba(95,243,192,.06); border:1px solid rgba(95,243,192,.28); } .totp-key{ font-family:var(--mono); font-size:1rem; letter-spacing:.1em; color:var(--cyan-soft); background:rgba(61,242,255,.07); border:1px solid rgba(61,242,255,.24); border-radius:12px; padding:13px; text-align:center; user-select:all; word-break:break-all; } .totp-qr{ display:grid; place-items:center; padding:12px; min-height:130px; background:#fff; border-radius:14px; } .totp-qr img{ display:block; border-radius:6px; } /* ════════ LOCK SCREEN ════════ */ .lock{ position:fixed; inset:0; z-index:100; display:none; } .lock.open{ display:grid; place-items:center; } .lock::before{ content:""; position:absolute; inset:0; background:rgba(3,4,9,.93); backdrop-filter:blur(6px); } /* perf: 18→6px (matches the topbar) — the .93 overlay is near-opaque, so the blur is imperceptible but was re-blurring the whole field every frame */ .lock__card{ position:relative; z-index:2; width:min(420px, calc(100vw - 36px)); text-align:center; padding:30px 26px calc(env(safe-area-inset-bottom) + 26px); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .lock__logo{ height:62px; width:auto; margin:0 auto 14px; display:block; } .lock__title{ font-family:var(--display); font-weight:700; font-size:1.7rem; margin:0 0 6px; } .lock__sub{ color:var(--ink-soft); margin:0 0 22px; font-size:.95rem; } #lock-form, #rec-form{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; } .lock__err{ color:#ff8a9b; font-size:.85rem; min-height:1.1em; margin:0 0 10px; } .lock__card--auth{ text-align:center; } .authtabs{ display:flex; gap:6px; background:rgba(255,255,255,.04); border:1px solid var(--glass-line); border-radius:14px; padding:4px; margin:4px 0 16px; } .authtab{ flex:1; padding:11px; border-radius:11px; border:0; background:none; color:var(--ink-mute); font-family:var(--display); font-weight:600; font-size:.95rem; cursor:pointer; transition:all .2s var(--ease); } .authtab.on{ background:linear-gradient(135deg, rgba(177,92,255,.92), rgba(124,58,237,.92)); color:#fff; box-shadow:var(--glow-violet); } #auth-form{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; } .auth-foot{ margin:16px 0 0; } /* ════════ EASTER EGG · supernova → Intuition docs ════════ */ .dock__fab.charging .dock__logo{ animation:fabCharge 4s ease-in forwards; } @keyframes fabCharge{ 0%{ transform:scale(1) rotate(0); filter:none; } 60%{ transform:scale(1.1) rotate(220deg); filter:drop-shadow(0 0 10px rgba(61,242,255,.7)); } 100%{ transform:scale(1.22) rotate(540deg); filter:drop-shadow(0 0 20px rgba(61,242,255,1)) brightness(1.4); } } .egg{ position:fixed; inset:0; z-index:120; display:none; place-items:center; background:radial-gradient(circle at center, rgba(8,12,24,.5), rgba(3,4,9,.97)); } .egg.active{ display:grid; } .egg__nova{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; } .egg__logo{ position:relative; z-index:2; height:120px; width:auto; opacity:0; transform-origin:center; } .egg.run .egg__logo{ animation:eggSpin 4.6s cubic-bezier(.55,0,.85,1) forwards; } @keyframes eggSpin{ 0%{ transform:rotate(0) scale(.85); opacity:0; filter:drop-shadow(0 0 8px rgba(61,242,255,.7)); } 8%{ opacity:1; } 28%{ transform:rotate(800deg) scale(1.5); filter:drop-shadow(0 0 26px rgba(61,242,255,.95)); } 52%{ transform:rotate(2600deg) scale(2.7); filter:drop-shadow(0 0 50px rgba(61,242,255,1)); } 76%{ transform:rotate(5400deg) scale(4); filter:drop-shadow(0 0 80px rgba(138,246,255,1)); } 90%{ transform:rotate(8200deg) scale(4.8); opacity:1; } 100%{ transform:rotate(9200deg) scale(.05); opacity:0; } } .docsview{ position:fixed; inset:0; z-index:118; display:none; flex-direction:column; background:var(--bg); } .docsview.open{ display:flex; animation:fade .45s var(--ease); } .docsview__bar{ display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 11px) 14px 11px; background:rgba(8,10,18,.92); border-bottom:1px solid var(--glass-line); backdrop-filter:blur(12px); } .docsview__brand{ display:inline-flex; align-items:center; gap:8px; flex:1; min-width:0; font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--ink); } .docsview__logo{ height:24px; width:auto; flex:none; display:block; } .docsview__name{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; } .docsview__dot{ color:var(--cyan-soft); } .docsview__exit{ flex:none; font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--violet-bright); padding:9px 14px; border-radius:99px; border:1px solid rgba(177,92,255,.4); background:rgba(177,92,255,.1); cursor:pointer; transition:all .2s var(--ease); } .docsview__exit:hover{ background:rgba(177,92,255,.2); box-shadow:var(--glow-violet); } .docsview__loading{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; display:flex; align-items:center; gap:9px; color:var(--ink-soft); font-family:var(--mono); font-size:.8rem; } .docsview__frame{ position:relative; z-index:2; flex:1; width:100%; border:0; background:#fff; } @media (prefers-reduced-motion: reduce){ .dock__fab.charging .dock__logo{ animation:none; } .egg.run .egg__logo{ animation:eggSpin 1.2s ease forwards; } } @media (prefers-reduced-motion: reduce){ .view--profile.is-active .view-head, .view--profile.is-active .idcard, .view--profile.is-active .statstrip, .view--profile.is-active .spotlight, .view--news.is-active .view-head, .view--news.is-active .feedbar{ animation:none; } .hero__cta .btn--signal, .coda__cta .btn--signal{ animation:none; } .view.is-active{ animation:none; } } /* ════════ MANTRA · PUBLIC LINK · SHARE (profile & onboarding) ════════ */ .idcard__mantra{ font-family:var(--serif); font-weight:600; font-size:1.06rem; line-height:1.45; color:var(--violet-bright); margin:0 0 14px; letter-spacing:.005em; text-shadow:0 0 22px rgba(177,92,255,.32), 0 0 46px rgba(124,58,237,.16); } .idcard__mantra--empty{ color:var(--ink-faint); font-weight:500; font-size:.92rem; text-shadow:none; font-family:var(--body); } .idcard__quote{ color:var(--cyan-soft); opacity:.7; font-size:1.2em; padding:0 .12em; } /* onboarding photo */ .onb-photo{ display:flex; align-items:center; gap:16px; margin-bottom:22px; } .onb-av{ position:relative; width:76px; height:76px; border-radius:24px; cursor:pointer; overflow:hidden; display:grid; place-items:center; border:1px solid var(--glass-hi); box-shadow:var(--glow-violet); transition:transform .25s var(--ease), box-shadow .3s var(--ease); } .onb-av:hover{ transform:translateY(-2px); box-shadow:0 0 34px rgba(177,92,255,.5); } .onb-av:active{ transform:scale(.97); } .onb-av__plus{ font-family:var(--display); font-weight:600; font-size:2rem; color:#fff; line-height:1; } .onb-av .avatar__img{ width:100%; height:100%; object-fit:cover; } .onb-photo__cap{ display:flex; flex-direction:column; gap:2px; } .onb-photo__cap strong{ font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--ink); } .onb-photo__cap span{ font-size:.8rem; color:var(--ink-mute); } /* the custom public link field */ .slug-field{ display:flex; align-items:stretch; border:1px solid var(--glass-line); border-radius:13px; overflow:hidden; background:rgba(255,255,255,.04); transition:border-color .25s var(--ease), box-shadow .25s var(--ease); } .slug-field:focus-within{ border-color:rgba(61,242,255,.5); box-shadow:var(--glow-cyan); } .slug-field__base{ display:flex; align-items:center; padding:0 4px 0 14px; font-family:var(--mono); font-size:.82rem; color:var(--ink-mute); white-space:nowrap; flex:none; } .slug-field__input{ border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding-left:2px !important; font-family:var(--mono) !important; color:var(--cyan-soft) !important; flex:1; min-width:0; } .slug-url{ font-family:var(--mono); color:var(--cyan-soft); } .field__hint .ok{ color:var(--trust); font-weight:600; } .field__hint .taken{ color:#ffce6b; font-weight:600; } /* share-your-page card */ .sharecard{ position:relative; overflow:hidden; background:linear-gradient(135deg, rgba(61,242,255,.08), rgba(177,92,255,.06) 70%, transparent); border:1px solid rgba(61,242,255,.26); margin-top:4px; } .sharecard__beam{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%); transform:translateX(-120%); animation:shareBeam 7s var(--ease) infinite; } @keyframes shareBeam{ 0%,72%{ transform:translateX(-120%); } 88%,100%{ transform:translateX(120%); } } .sharecard__label{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan-soft); margin:0 0 10px; } .sharecard__url{ display:block; font-family:var(--display); font-weight:600; font-size:clamp(1.02rem,4.6vw,1.32rem); letter-spacing:-.01em; text-decoration:none; word-break:break-all; line-height:1.25; margin-bottom:8px; } .sharecard__base{ color:var(--ink-soft); } .sharecard__slug{ color:var(--violet-bright); text-shadow:0 0 20px rgba(177,92,255,.4); } .sharecard__hint{ font-size:.82rem; color:var(--ink-mute); margin:0 0 14px; } .sharecard__row{ display:flex; flex-wrap:wrap; gap:9px; position:relative; z-index:1; } .sharecard__row .pill{ cursor:pointer; text-decoration:none; } /* feed-card author becomes a link to their public page */ .feedcard__id{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-decoration:none; color:inherit; border-radius:12px; transition:opacity .2s var(--ease); } a.feedcard__id:hover{ opacity:.86; } a.feedcard__id:hover .feedcard__name{ color:var(--cyan-soft); } a.feedcard__id:hover .feedcard__av{ box-shadow:var(--glow-cyan); } /* ════════ LIVE SITE STATS (home hero) ════════ */ .livestats{ display:flex; gap:10px; justify-content:center; margin:8px auto 20px; max-width:520px; } .livestat{ flex:1; position:relative; overflow:hidden; border-radius:16px; padding:14px 12px; text-align:center; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:var(--glass-blur); cursor:pointer; transition:transform .2s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease); } .livestat:hover{ transform:translateY(-2px); } .livestat:active{ transform:scale(.98); } .livestat--views{ border-color:rgba(61,242,255,.28); } .livestat--views:hover{ border-color:rgba(61,242,255,.52); box-shadow:var(--glow-cyan); } .livestat--live{ border-color:rgba(95,243,192,.26); } .livestat--live:hover{ border-color:rgba(95,243,192,.5); box-shadow:var(--glow-trust); } .livestat__aura{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(64% 64% at 50% 4%, rgba(61,242,255,.16), transparent 70%); opacity:.85; } .livestat__num{ position:relative; display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.45rem,6.4vw,2rem); line-height:1; color:var(--cyan-soft); text-shadow:0 0 22px rgba(61,242,255,.42); letter-spacing:-.01em; } .livestat__num--live{ color:var(--trust); text-shadow:0 0 22px rgba(95,243,192,.46); } .livestat__liverow{ display:flex; align-items:center; justify-content:center; gap:9px; } .livestat__dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); transition:background .3s; flex:none; } .livestat--live.islive .livestat__dot{ background:var(--trust); animation:liveDot 1.8s var(--ease) infinite; } @keyframes liveDot{ 0%{ box-shadow:0 0 0 0 rgba(95,243,192,.55);} 70%{ box-shadow:0 0 0 9px rgba(95,243,192,0);} 100%{ box-shadow:0 0 0 0 rgba(95,243,192,0);} } .livestat__label{ position:relative; display:block; font-family:var(--mono); font-size:.57rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin-top:7px; line-height:1.35; } .livestat__hint{ position:relative; display:block; font-family:var(--mono); font-size:.54rem; color:var(--cyan-deep); margin-top:4px; } /* ════════ MOTUSMOVE TRACTION CHIPS (share + MotusViews) ════════ */ .feedcard__foot{ flex-wrap:wrap; } .move-share{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-weight:600; font-size:.78rem; padding:8px 12px; border-radius:99px; border:1px solid rgba(177,92,255,.3); background:rgba(177,92,255,.06); color:var(--violet-bright); transition:all .25s var(--ease); cursor:pointer; } .move-share:hover{ background:rgba(177,92,255,.14); box-shadow:var(--glow-violet); } .move-share:active{ transform:scale(.94); } .move-share svg{ width:14px; height:14px; } .move-views{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.76rem; color:var(--ink-mute); } .move-views svg{ width:14px; height:14px; opacity:.8; } .feedcard__foot .gh-mini{ margin-left:auto; } .move-views--inline{ font-size:.72rem; color:var(--ink-mute); } .move-views--inline svg{ width:12px; height:12px; vertical-align:-2px; } /* ════════ YOUTUBE (profile + mover page) ════════ */ .ytpanel{ display:flex; flex-direction:column; gap:14px; } .yt-ico{ width:20px; height:20px; color:#ff3b30; vertical-align:-4px; margin-right:4px; } .yt-link{ font-family:var(--mono); font-size:.8rem; color:var(--cyan-soft); text-decoration:none; } .yt-link:hover{ text-shadow:var(--glow-cyan); } .yt-featured{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; cursor:pointer; border:1px solid var(--glass-line); background:#000; } .yt-featured__thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease), opacity .3s; } .yt-featured:hover .yt-featured__thumb{ transform:scale(1.04); opacity:.85; } .yt-play{ position:absolute; inset:0; margin:auto; width:64px; height:46px; border-radius:12px; background:rgba(255,0,0,.9); box-shadow:0 6px 30px rgba(255,0,0,.4); } .yt-play::after{ content:""; position:absolute; inset:0; margin:auto; width:0; height:0; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; } .yt-featured--on{ cursor:default; aspect-ratio:16/9; } .yt-featured--on iframe{ width:100%; height:100%; border:0; display:block; } .yt-uploads__h{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:2px 0 8px; } .yt-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; } .yt-vid{ text-decoration:none; color:var(--ink-soft); display:flex; flex-direction:column; gap:5px; } .yt-vid__thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px; border:1px solid var(--glass-line); } .yt-vid__t{ font-size:.66rem; line-height:1.3; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .yt-vid:hover .yt-vid__thumb{ border-color:rgba(61,242,255,.4); box-shadow:var(--glow-cyan); } @media (max-width:380px){ .yt-grid{ grid-template-columns:1fr 1fr; } } /* auth — prominent device-only fallback */ .auth-foot__or{ display:flex; align-items:center; gap:10px; margin:16px 0 10px; color:var(--ink-faint); font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; } .auth-foot__or span{ flex:none; } .auth-foot__or::before, .auth-foot__or::after{ content:""; flex:1; height:1px; background:var(--glass-line); } /* link favicons + full URLs */ .movelink__fav{ width:15px; height:15px; border-radius:3px; flex:none; object-fit:cover; } .movelink__u{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .repo-card__fav{ width:18px; height:18px; border-radius:5px; flex:none; object-fit:cover; } .repo-card__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ════════════════════════════════════════════════════════════════ COMPOSE · the neoglass MotusMove studio (creation screen) ════════════════════════════════════════════════════════════════ */ .compose__head{ margin-bottom:18px; } .compose__eyebrow{ display:inline-block; font-family:var(--mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--violet-bright); opacity:.9; margin-bottom:8px; } .compose__head .modal__title{ background:linear-gradient(118deg, #fff, var(--violet-bright) 78%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .field__opt{ color:var(--ink-faint); font-weight:400; } .input--head{ font-family:var(--display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; } /* grouped glass sub-panels keep the long form calm + sectioned */ .cgroup{ position:relative; padding:16px 16px 2px; margin:0 0 14px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.006)); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi); transition:border-color .35s var(--ease), box-shadow .35s var(--ease); } .cgroup:focus-within{ border-color:rgba(177,92,255,.26); box-shadow:inset 0 1px 0 var(--glass-hi), 0 0 38px -24px rgba(177,92,255,.75); } /* category chips + searchable "more categories" picker */ .tagmore{ display:inline-block; margin-top:9px; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--cyan-soft); background:rgba(61,242,255,.05); border:1px dashed rgba(61,242,255,.3); border-radius:99px; padding:7px 13px; cursor:pointer; transition:all .25s var(--ease); } .tagmore:hover{ background:rgba(61,242,255,.1); box-shadow:var(--glow-cyan); } .tagmore.is-open{ color:var(--violet-bright); border-color:rgba(177,92,255,.42); border-style:solid; background:rgba(177,92,255,.08); } .tagpicker{ margin-top:12px; border-radius:16px; border:1px solid var(--glass-line); background:rgba(5,6,12,.55); backdrop-filter:var(--glass-blur); box-shadow:inset 0 1px 0 var(--glass-hi); padding:12px; animation:tagPickIn .3s var(--ease-out); } @keyframes tagPickIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } } .tagpicker__search{ margin-bottom:10px; } .tagpicker__list{ display:flex; flex-wrap:wrap; gap:8px; max-height:230px; overflow-y:auto; padding:3px 1px; -webkit-overflow-scrolling:touch; } /* picker chips are visually identical to the quick-chips above */ .tagpicker__item{ font-family:var(--display); font-weight:500; font-size:.82rem; line-height:1; padding:9px 14px; border-radius:99px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-soft); cursor:pointer; transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease); } .tagpicker__item:hover{ border-color:rgba(177,92,255,.4); color:var(--violet-bright); background:rgba(177,92,255,.06); } .tagpicker__item.is-on{ border-color:rgba(177,92,255,.55); color:var(--violet-bright); background:rgba(177,92,255,.14); box-shadow:var(--glow-violet); } .tagpicker__empty{ color:var(--ink-faint); font-size:.82rem; padding:6px 4px; } /* image gallery (up to 7) */ .gallery{ display:flex; flex-wrap:wrap; gap:9px; } .gallery__cell{ position:relative; width:78px; height:78px; border-radius:13px; overflow:hidden; border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi); animation:chipPop .3s var(--ease-out); } .gallery__cell img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery__x{ position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(2,3,8,.72); color:#fff; font-size:1rem; line-height:1; cursor:pointer; backdrop-filter:blur(4px); display:grid; place-items:center; } .gallery__x:hover{ background:rgba(255,90,110,.85); } .gallery__add{ width:78px; height:78px; border-radius:13px; border:1px dashed rgba(177,92,255,.36); background:rgba(177,92,255,.05); color:var(--violet-bright); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; transition:all .25s var(--ease); } .gallery__add:hover{ background:rgba(177,92,255,.12); box-shadow:var(--glow-violet); transform:translateY(-1px); } .gallery__plus{ font-size:1.2rem; line-height:1; } .gallery__addn{ font-family:var(--mono); font-size:.54rem; letter-spacing:.06em; } .gallery__count{ font-family:var(--mono); font-size:.5rem; color:var(--ink-mute); } .gallery__full{ font-family:var(--mono); font-size:.68rem; color:var(--trust); align-self:center; } /* video: paste a link or upload a short clip. The action button is an attached, input-height control (rounded rect, not a floating pill) so it never reads as janky */ .vidrow{ display:flex; gap:8px; align-items:stretch; flex-wrap:nowrap; } .vidrow > .input, .locrow > .input{ flex:1 1 auto; min-width:0; width:auto; } .vidup, .locbtn{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap; cursor:pointer; border-radius:13px; padding:0 15px; font-weight:600; } .vidup{ font-family:var(--mono); font-size:.78rem; } .vidpreview{ margin-top:11px; } .vidpreview__media{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--glass-line); background:#000; aspect-ratio:16/9; } .vidframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; object-fit:cover; } .vidlink{ display:inline-flex; gap:6px; align-items:center; font-family:var(--mono); font-size:.8rem; color:var(--cyan-soft); padding:10px 12px; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); text-decoration:none; } .vidpreview__x{ margin-top:8px; font-family:var(--mono); font-size:.66rem; color:#ff8a9b; background:none; border:0; cursor:pointer; } .vidpreview__x:hover{ text-decoration:underline; } /* location row (shares the .locrow/.locbtn rules with the video row above) */ .locrow{ display:flex; gap:8px; align-items:stretch; flex-wrap:nowrap; } .locbtn[disabled]{ opacity:.6; } /* segmented "show as" (profile / anonymous) */ .seg{ display:flex; gap:6px; padding:5px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi); } .seg__opt{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:12px 10px; border-radius:10px; border:0; background:transparent; color:var(--ink-mute); font-family:var(--display); font-weight:600; font-size:.88rem; cursor:pointer; transition:color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); } .seg__opt:hover{ color:var(--ink); background:rgba(255,255,255,.045); } .seg__opt.is-on{ background:linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; box-shadow:0 8px 24px -10px rgba(124,58,237,.8); } .seg__opt.is-on:hover{ background:linear-gradient(135deg, var(--violet), var(--violet-deep)); } /* broadcast toggle (moved off inline styles) */ .broadcast-toggle{ display:flex; align-items:center; gap:12px; margin:4px 0; cursor:pointer; } .broadcast-toggle input{ width:20px; height:20px; accent-color:#b15cff; flex:none; } .broadcast-toggle span{ font-size:.92rem; color:var(--ink-soft); line-height:1.45; } /* feed card — media previews, tag-as-filter, anonymous builder */ .feedcard__tag--btn{ cursor:pointer; font-family:var(--mono); } .feedcard__tag--btn:hover{ background:rgba(61,242,255,.12); box-shadow:var(--glow-cyan); } .feedcard__tag--btn.feedcard__tag--mine:hover{ background:rgba(177,92,255,.14); box-shadow:var(--glow-violet); } .feedcard__imgwrap{ position:relative; margin:0 0 12px; border-radius:14px; overflow:hidden; } .feedcard__imgwrap .feedcard__img{ margin:0; display:block; } .feedcard__imgmore{ position:absolute; bottom:10px; right:10px; font-family:var(--mono); font-size:.62rem; color:#fff; background:rgba(2,3,8,.66); border:1px solid var(--glass-hi); padding:4px 9px; border-radius:99px; backdrop-filter:blur(4px); } .feedcard__imgwrap--vid .feedcard__play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:rgba(177,92,255,.85); color:#fff; font-size:1.3rem; box-shadow:0 6px 30px rgba(124,58,237,.5); } .feedcard__videochip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-soft); border:1px solid rgba(61,242,255,.24); background:rgba(61,242,255,.05); padding:4px 10px; border-radius:99px; margin:0 0 12px; } .feedcard__anon{ font-size:1.1rem; } /* ════════════════════════════════════════════════════════════════ VOTUS & MOVUS — the scarce community signals ════════════════════════════════════════════════════════════════ */ .votebudget{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 14px; font-family:var(--mono); font-size:.72rem; } .votebudget .vb{ display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:99px; border:1px solid var(--glass-line); background:var(--glass); } .votebudget .vb b{ font-weight:600; } .votebudget .vb--votus{ color:var(--violet-bright); border-color:rgba(177,92,255,.3); background:rgba(177,92,255,.07); } .votebudget .vb--movus{ color:var(--cyan-soft); border-color:rgba(61,242,255,.26); background:rgba(61,242,255,.06); } .votebudget .vb--ghost{ color:var(--ink-mute); } .votebudget .vb__hint{ color:var(--ink-faint); font-size:.66rem; } .feedcard__votes{ display:flex; gap:8px; margin:2px 0 14px; flex-wrap:wrap; } .votebtn{ flex:1 1 0; min-width:118px; display:inline-flex; align-items:center; justify-content:center; gap:6px; font-family:var(--display); font-weight:500; font-size:.84rem; padding:11px 12px; border-radius:13px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-soft); cursor:pointer; transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease), transform .12s var(--ease); } .votebtn b{ font-weight:600; letter-spacing:.02em; } .votebtn span{ font-variant-numeric:tabular-nums; } .votebtn--votus:hover{ border-color:rgba(177,92,255,.45); color:var(--violet-bright); } .votebtn--votus.is-on{ border-color:rgba(214,168,255,.55); color:#fff; background:linear-gradient(135deg, rgba(177,92,255,.92), rgba(124,58,237,.92)); box-shadow:var(--glow-violet); } .votebtn--movus:hover{ border-color:rgba(61,242,255,.45); color:var(--cyan-soft); } .votebtn--movus.is-on{ border-color:rgba(61,242,255,.6); color:#03242c; background:linear-gradient(135deg, var(--cyan), var(--cyan-deep)); box-shadow:var(--glow-cyan); } .votebtn:active{ transform:scale(.97); } /* your OWN move — VOTUS/MOVUS are read-only here (you back OTHER builders, never yourself) */ .votebtn.is-self{ opacity:.66; cursor:default; } .votebtn.is-self:hover{ border-color:var(--glass-line); color:var(--ink-soft); background:var(--glass); box-shadow:none; transform:none; } .votebtn.is-self:active{ transform:none; } .votebtn.is-self.votebtn--votus{ color:var(--violet-bright); } .votebtn.is-self.votebtn--movus{ color:var(--cyan-soft); } .feedcard__report{ margin-left:auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-mute); font-size:1.15rem; line-height:1; cursor:pointer; flex:none; } .feedcard__report:hover{ color:var(--ink); border-color:var(--glass-hi); } /* report / mute action sheet */ .rsheet{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; } .rsheet.on{ pointer-events:auto; } .rsheet__scrim{ position:absolute; inset:0; background:rgba(2,3,8,.6); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s var(--ease); } .rsheet.on .rsheet__scrim{ opacity:1; } .rsheet__card{ position:relative; width:100%; max-width:var(--shell); background:linear-gradient(180deg, rgba(14,16,28,.84), rgba(8,9,16,.92)); -webkit-backdrop-filter:var(--glass-blur-sheet); backdrop-filter:var(--glass-blur-sheet); border:1px solid var(--glass-line); border-bottom:0; border-radius:24px 24px 0 0; padding:14px var(--pad) calc(env(safe-area-inset-bottom) + 22px); box-shadow:0 -24px 70px -30px rgba(0,0,0,.9); transform:translateY(100%); transition:transform .32s var(--ease-out); } .rsheet.on .rsheet__card{ transform:none; } .rsheet__grip{ width:40px; height:4px; border-radius:99px; background:var(--glass-hi); margin:0 auto 14px; } .rsheet__title{ font-family:var(--display); font-weight:600; font-size:1.04rem; margin:0 0 12px; } .rsheet__reasons{ display:flex; flex-direction:column; gap:7px; margin-bottom:10px; } .rsheet__r{ text-align:left; padding:13px 15px; border-radius:12px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-soft); font-family:var(--body); font-size:.95rem; cursor:pointer; transition:border-color .2s var(--ease), color .2s var(--ease); } .rsheet__r:hover{ border-color:rgba(255,138,155,.4); color:#ffb4bf; } .rsheet__mute{ width:100%; padding:13px; border-radius:12px; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-soft); font-family:var(--display); font-weight:500; cursor:pointer; margin-bottom:8px; } .rsheet__mute:hover{ border-color:var(--glass-hi); color:var(--ink); } .rsheet__cancel{ width:100%; padding:13px; border-radius:12px; border:0; background:transparent; color:var(--ink-mute); font-family:var(--display); font-weight:600; cursor:pointer; } /* VOTUS / MOVUS display chips (public move + mover pages) */ .votechip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:500; font-size:.84rem; padding:9px 14px; border-radius:99px; border:1px solid var(--glass-line); background:var(--glass); text-decoration:none; transition:background .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .votechip b{ font-weight:700; font-variant-numeric:tabular-nums; } .votechip .vc__ico{ font-size:1rem; } .votechip--votus{ color:var(--violet-bright); border-color:rgba(177,92,255,.3); } .votechip--votus:hover{ background:rgba(177,92,255,.12); box-shadow:var(--glow-violet); } .votechip--movus{ color:var(--cyan-soft); border-color:rgba(61,242,255,.26); } .votechip--movus:hover{ background:rgba(61,242,255,.1); box-shadow:var(--glow-cyan); } /* signup legal consent */ .auth-legal{ font-family:var(--mono); font-size:.66rem; line-height:1.5; color:var(--ink-mute); text-align:center; margin:12px 0 0; } .auth-legal a{ color:var(--cyan-soft); } /* ════ Your VOTUS & MOVUS — the scarce signals, on your Initium ════ */ .signals-panel{ position:relative; overflow:hidden; } .signals-panel__beam{ position:absolute; inset:0; pointer-events:none; opacity:.55; background:radial-gradient(120% 80% at 0% 0%, rgba(177,92,255,.16), transparent 55%), radial-gradient(120% 80% at 100% 100%, rgba(61,242,255,.13), transparent 55%); } .signals-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 0; } .signal-stat{ position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 15px 13px 17px; border-radius:15px; background:var(--glass); border:1px solid var(--glass-line); overflow:hidden; } .signal-stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; } .signal-stat--votus::before{ background:linear-gradient(var(--violet,#b15cff),var(--violet-bright)); box-shadow:0 0 14px rgba(177,92,255,.55); } .signal-stat--movus::before{ background:linear-gradient(var(--cyan),var(--cyan-soft)); box-shadow:0 0 14px rgba(61,242,255,.5); } .signal-stat__n{ font-family:var(--display); font-weight:800; font-size:1.65rem; line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; } .signal-stat--votus .signal-stat__n{ color:var(--violet-bright); text-shadow:0 0 18px rgba(177,92,255,.42); } .signal-stat--movus .signal-stat__n{ color:var(--cyan-soft); text-shadow:0 0 18px rgba(61,242,255,.4); } .signal-stat__l{ font-family:var(--mono); font-size:.57rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; } .signal-stat__s{ font-size:.68rem; color:var(--ink-mute); } .signals-panel__hint{ position:relative; z-index:1; margin:13px 0 0; font-size:.8rem; line-height:1.55; color:var(--ink-mute); } .signals-panel__hint strong{ color:var(--cyan-soft); font-weight:600; } /* ════════════════════════════════════════════════════════════════ THE FLYWHEEL — INITIUM → MOTUS → MINDSET → MOVUS → (back to INITIUM) Loop pulse, forward accents, richer spirit motion, and the whisper insight surface. ALL additive + namespaced (.flywheel-/.whisper/fx-*), every moving overlay is fixed + pointer-events:none + z<60 so it can NEVER block a dock tap. Reduced-motion handled in one block at the end. (driven by flywheel.js / whisper.js / mindset-spirit.js) ═══════════════════════════════════════════════════════════════════ */ /* ── the return pulse: conviction travels MOVUS → INITIUM and re-ignites the start ── */ .flywheel-pulse{ position:fixed; left:0; top:0; width:34px; height:34px; display:grid; place-items:center; font-size:26px; line-height:1; z-index:59; pointer-events:none; will-change:transform,opacity; transform:translate3d(-200px,-200px,0); user-select:none; -webkit-user-select:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); } .flywheel-pulse::before{ content:""; position:absolute; inset:-8px; border-radius:50%; z-index:-1; pointer-events:none; background:radial-gradient(circle,rgba(61,242,255,.6),rgba(61,242,255,.3) 38%,rgba(138,246,255,.08) 62%,transparent 78%); filter:blur(3px); opacity:.85; } .flywheel-pulse.is-violet::before{ background:radial-gradient(circle,rgba(214,168,255,.6),rgba(177,92,255,.3) 38%,rgba(214,168,255,.08) 62%,transparent 78%); } .flywheel-trail{ position:fixed; left:0; top:0; width:6px; height:6px; border-radius:50%; z-index:57; pointer-events:none; background:radial-gradient(circle,rgba(138,246,255,.95),rgba(61,242,255,.4) 55%,transparent 75%); will-change:transform,opacity; animation:flywheelTrailFade 440ms ease-out forwards; } .flywheel-trail.is-violet{ background:radial-gradient(circle,rgba(214,168,255,.95),rgba(177,92,255,.4) 55%,transparent 75%); } .flywheel-trail.is-warm{ background:radial-gradient(circle,rgba(182,255,230,.95),rgba(95,243,192,.4) 55%,transparent 75%); } @keyframes flywheelTrailFade{ 0%{ opacity:.9; transform:scale(1); } 100%{ opacity:0; transform:scale(.35); } } .flywheel-sphere{ position:fixed; left:0; top:0; width:14px; height:14px; border-radius:50%; z-index:57; pointer-events:none; background:radial-gradient(circle,rgba(138,246,255,.95),rgba(61,242,255,.5) 55%,transparent 78%); will-change:transform,opacity; filter:drop-shadow(0 0 10px rgba(61,242,255,.8)); } /* INITIUM re-ignites when the loop closes (pure class toggle on the existing emoji) */ @keyframes initiumReIgnite{ 0%{ transform:scale(1); filter:drop-shadow(0 0 8px rgba(61,242,255,.4)); } 25%{ transform:scale(1.2); filter:drop-shadow(0 0 16px rgba(61,242,255,.8)); } 55%{ transform:scale(.95); filter:drop-shadow(0 0 12px rgba(61,242,255,.5)); } 100%{ transform:scale(1); filter:drop-shadow(0 0 8px rgba(61,242,255,.4)); } } .dock__btn--initium.ignited .dock__emoji{ animation:initiumReIgnite 620ms var(--ease) 1; } @keyframes initiumSparkFlare{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.3); } 35%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.7); } } .dock__btn .spark-flare{ position:absolute; left:50%; top:46%; width:30px; height:30px; margin:0; border-radius:50%; pointer-events:none; z-index:0; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(138,246,255,.85),rgba(61,242,255,.36) 55%,transparent 75%); animation:initiumSparkFlare 520ms cubic-bezier(.16,1,.3,1) 1; } /* MOTUS forward accent on broadcast (a violet "→" rises beneath the notes) */ @keyframes forwardArrowPulse{ 0%{ opacity:0; transform:translateX(-50%) translateY(4px) scale(.7); } 35%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1.1); } 100%{ opacity:0; transform:translateX(-50%) translateY(-10px) scale(.7); } } .dock__btn--cycle .forward-arrow{ position:absolute; left:50%; top:16px; font-size:12px; line-height:1; color:var(--violet-bright); text-shadow:0 0 10px rgba(177,92,255,.6); pointer-events:none; z-index:2; animation:forwardArrowPulse 460ms var(--ease) 1; } /* ── 6 NEW spirit transitions (pool 10→16) — same OUT/IN pattern as the originals ── */ /* 11 · shatter — breakthrough */ @keyframes spiritOut_shatter{ 0%{opacity:1;transform:translate3d(0,0,0) scale(1) skewX(0);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} 30%{opacity:1;transform:translate3d(-2px,1px,0) scale(1.05) skewX(-7deg);} 60%{opacity:.7;transform:translate3d(3px,-2px,0) scale(.9) skewX(6deg);filter:drop-shadow(2px 0 10px rgba(138,246,255,.7)) drop-shadow(-2px 0 8px rgba(177,92,255,.4));} 100%{opacity:0;transform:translate3d(6px,3px,0) scale(.66) skewX(12deg);filter:blur(2px);} } .spirit__layer--out.fx-shatter{ animation:spiritOut_shatter .36s cubic-bezier(.5,0,.85,.3) forwards; } @keyframes spiritIn_shatter{ 0%{opacity:0;transform:translate3d(-6px,-3px,0) scale(1.4) skewX(-12deg);filter:blur(2.5px) brightness(1.6);} 45%{opacity:1;transform:translate3d(2px,1px,0) scale(.96) skewX(4deg);filter:blur(.4px);} 72%{opacity:1;transform:translate3d(-1px,0,0) scale(1.04) skewX(-2deg);} 100%{opacity:1;transform:translate3d(0,0,0) scale(1) skewX(0);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-shatter{ animation:spiritIn_shatter .52s cubic-bezier(.16,1,.3,1) .3s forwards; } /* 12 · pulse-bloom — emergence */ @keyframes spiritOut_bloom{ 0%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} 100%{opacity:0;transform:scale(.18);filter:brightness(2) drop-shadow(0 0 16px rgba(138,246,255,.95));} } .spirit__layer--out.fx-pulse-bloom{ animation:spiritOut_bloom .34s cubic-bezier(.6,0,.9,.2) forwards; } @keyframes spiritIn_bloom{ 0%{opacity:0;transform:scale(.18);filter:brightness(2.2) drop-shadow(0 0 18px rgba(138,246,255,.95));} 50%{opacity:1;transform:scale(1.16);filter:brightness(1.3);} 78%{opacity:1;transform:scale(.96);} 100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-pulse-bloom{ animation:spiritIn_bloom .56s cubic-bezier(.16,1,.3,1) .3s forwards; } /* 13 · warp-tunnel — new perspective */ @keyframes spiritOut_warp{ 0%{opacity:1;transform:perspective(300px) translateZ(0) scale(1);filter:blur(0);} 100%{opacity:0;transform:perspective(300px) translateZ(-160px) scale(.3);filter:blur(3px);} } .spirit__layer--out.fx-warp-tunnel{ animation:spiritOut_warp .4s cubic-bezier(.55,0,.85,.25) forwards; } @keyframes spiritIn_warp{ 0%{opacity:0;transform:perspective(300px) translateZ(180px) scale(1.6);filter:blur(3.5px) brightness(1.5);} 55%{opacity:1;transform:perspective(300px) translateZ(10px) scale(1.04);filter:blur(.4px);} 100%{opacity:1;transform:perspective(300px) translateZ(0) scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-warp-tunnel{ animation:spiritIn_warp .52s cubic-bezier(.16,1,.3,1) .34s forwards; } /* 14 · spiral-ascend — rising momentum */ @keyframes spiritOut_spiral{ 0%{opacity:1;transform:rotate(0) translateY(0) scale(1);} 100%{opacity:0;transform:rotate(220deg) translateY(-16px) scale(.5);filter:drop-shadow(0 -6px 12px rgba(138,246,255,.8));} } .spirit__layer--out.fx-spiral-ascend{ animation:spiritOut_spiral .42s cubic-bezier(.5,0,.75,.3) forwards; } @keyframes spiritIn_spiral{ 0%{opacity:0;transform:rotate(-240deg) translateY(14px) scale(.5);} 60%{opacity:1;transform:rotate(-30deg) translateY(-2px) scale(1.06);} 100%{opacity:1;transform:rotate(0) translateY(0) scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-spiral-ascend{ animation:spiritIn_spiral .5s cubic-bezier(.18,.92,.3,1.08) .3s forwards; } /* 15 · refract — seeing hidden dimensions */ @keyframes spiritOut_refract{ 0%{opacity:1;transform:translateX(0) scaleX(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} 50%{opacity:.85;transform:translateX(0) scaleX(1.04);filter:drop-shadow(3px 0 6px rgba(61,242,255,.7)) drop-shadow(-3px 0 6px rgba(177,92,255,.6));} 100%{opacity:0;transform:translateX(0) scaleX(.7);filter:drop-shadow(7px 0 10px rgba(61,242,255,.8)) drop-shadow(-7px 0 10px rgba(177,92,255,.8)) blur(1px);} } .spirit__layer--out.fx-refract{ animation:spiritOut_refract .4s cubic-bezier(.45,0,.7,.3) forwards; } @keyframes spiritIn_refract{ 0%{opacity:0;transform:scaleX(.7);filter:drop-shadow(-7px 0 10px rgba(61,242,255,.8)) drop-shadow(7px 0 10px rgba(177,92,255,.8)) blur(1px);} 55%{opacity:1;transform:scaleX(1.05);filter:drop-shadow(-2px 0 6px rgba(61,242,255,.6)) drop-shadow(2px 0 6px rgba(177,92,255,.5));} 100%{opacity:1;transform:scaleX(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-refract{ animation:spiritIn_refract .5s cubic-bezier(.16,1,.3,1) .34s forwards; } /* 16 · echo-cascade — signal amplification */ @keyframes spiritOut_echo{ 0%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} 100%{opacity:0;transform:scale(1.5);filter:drop-shadow(0 0 6px rgba(138,246,255,.9)) drop-shadow(0 0 16px rgba(61,242,255,.6)) drop-shadow(0 0 30px rgba(61,242,255,.3));} } .spirit__layer--out.fx-echo-cascade{ animation:spiritOut_echo .44s cubic-bezier(.33,0,.67,1) forwards; } @keyframes spiritIn_echo{ 0%{opacity:0;transform:scale(1.5);filter:drop-shadow(0 0 30px rgba(61,242,255,.3));} 50%{opacity:1;transform:scale(.92);filter:drop-shadow(0 0 10px rgba(61,242,255,.6));} 78%{opacity:1;transform:scale(1.05);} 100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(61,242,255,.32));} } .spirit__layer--in.fx-echo-cascade{ animation:spiritIn_echo .6s cubic-bezier(.16,1,.3,1) .38s forwards; } /* ── spirit idle micro-motions (resting is never static) + neighbor reactions ── */ @keyframes spiritIdleBreath{ 0%,100%{ transform:scale(1); opacity:.94; } 50%{ transform:scale(1.07); opacity:1; } } @keyframes spiritIdleOrbit{ 0%{ transform:translate(-1px,0); } 25%{ transform:translate(0,-1.5px); } 50%{ transform:translate(1px,0); } 75%{ transform:translate(0,1.5px); } 100%{ transform:translate(-1px,0); } } @keyframes spiritAuraThrob{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } } @keyframes spiritGlimmer{ 0%,100%{ filter:drop-shadow(0 0 5px rgba(61,242,255,.45)); } 50%{ filter:drop-shadow(0 0 11px rgba(138,246,255,.85)); } } @keyframes spiritDriftForward{ 0%{ opacity:0; transform:translate3d(-30px,-2px,0) scale(.9); } 10%{ opacity:.32; } 50%{ opacity:.36; } 90%{ opacity:.3; } 100%{ opacity:0; transform:translate3d(62px,-2px,0) scale(1.1); } } @keyframes fabGreetSpin{ to{ transform:rotate(180deg); } } @keyframes movusCharged{ 0%,100%{ filter:none; } 50%{ filter:drop-shadow(0 0 10px rgba(61,242,255,.9)); } } /* base resting breath — gated so it never fights an in-flight swap fx */ .dock__spirit:not(.is-swapping) .spirit__layer--in{ animation:spiritIdleBreath 4.2s ease-in-out infinite; } .dock__spirit.idle-long{ animation:spiritIdleOrbit 6s ease-in-out infinite; } .dock__spirit.is-viewing-mindset::before{ animation:spiritAuraThrob 3.2s ease-in-out infinite; } .dock__btn--mindset:hover .spirit__layer--in{ animation:spiritGlimmer 1.4s ease-in-out infinite; } .spirit-drift{ position:fixed; left:0; top:0; z-index:57; pointer-events:none; font-size:20px; line-height:1; filter:drop-shadow(0 0 6px rgba(61,242,255,.5)); will-change:transform,opacity; animation:spiritDriftForward 8s ease-in-out forwards; } .dock__fab.fab-greet .dock__logo{ animation:fabGreetSpin 500ms var(--ease) 1; } .dock__btn--movus.movus-charged .dock__ico--infinity{ animation:movusCharged 600ms ease-in-out 1; } .dock__btn.spirit-passing > *{ animation:spiritWobble .5s var(--ease); } /* ── the WHISPER — the MINDSET speaking: rare, earned, contextual guidance ── */ .whisper{ position:fixed; left:50%; bottom:calc(var(--dock-h,76px) + env(safe-area-inset-bottom) + 30px); transform:translateX(-50%) translateY(10px) scale(.98); width:max-content; max-width:min(90vw,440px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:11px 12px 11px 14px; border-radius:16px; background:linear-gradient(180deg,rgba(10,12,20,.66),rgba(10,12,20,.46)); border:1px solid var(--glass-line); box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); color:var(--ink-soft); opacity:0; filter:blur(3px); pointer-events:none; z-index:55; --w-accent:var(--cyan); transition:opacity .36s ease, transform .36s cubic-bezier(.16,1,.3,1), filter .36s ease; will-change:opacity,transform,filter; } .whisper.is-on{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); filter:blur(0); transition:opacity .52s ease, transform .52s cubic-bezier(.16,1,.3,1), filter .52s ease; } .whisper__glyph{ position:relative; width:26px; height:26px; display:grid; place-items:center; font-size:16px; line-height:1; isolation:isolate; } .whisper__glyph::before{ content:""; position:absolute; inset:-5px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--w-accent) 55%, transparent), transparent 70%); filter:blur(4px); z-index:-1; opacity:.85; animation:whisperAura 4s ease-in-out infinite; } .whisper.is-on .whisper__glyph{ animation:whisperGlyphIn .6s cubic-bezier(.16,1,.3,1) both; } .whisper__rule{ position:absolute; left:14px; right:12px; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--w-accent),transparent); opacity:.7; transform:scaleX(0); transform-origin:left center; border-radius:1px; } .whisper.is-on .whisper__rule{ animation:whisperRule .62s cubic-bezier(.16,1,.3,1) .06s both; } .whisper__text{ margin:0; font-family:var(--body); font-size:.9rem; line-height:1.34; color:var(--ink-soft); letter-spacing:.005em; pointer-events:auto; cursor:default; } .whisper__text .kick{ display:inline; margin-right:7px; font-family:var(--mono); font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--w-accent); opacity:.85; vertical-align:.04em; } .whisper__text b{ color:var(--w-accent); font-weight:600; text-shadow:0 0 14px color-mix(in srgb, var(--w-accent) 45%, transparent); } .whisper__x{ appearance:none; -webkit-appearance:none; pointer-events:auto; flex:none; width:24px; height:24px; border-radius:50%; border:1px solid var(--glass-line); background:var(--glass); color:var(--ink-mute); font-size:14px; line-height:1; display:grid; place-items:center; cursor:pointer; transition:color .2s, border-color .2s, background .2s; } .whisper__x:hover{ color:var(--ink); border-color:color-mix(in srgb, var(--w-accent) 40%, var(--glass-line)); background:var(--glass-2); } .whisper[data-stage="INITIUM"]{ --w-accent:var(--violet-bright); } .whisper[data-stage="MOTUS"]{ --w-accent:var(--cyan-soft); } .whisper[data-stage="MINDSET"]{ --w-accent:var(--cyan); } .whisper[data-stage="MOVUS"]{ --w-accent:var(--trust); } @keyframes whisperAura{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } } @keyframes whisperGlyphIn{ 0%{ transform:scale(1.18) rotate(-6deg); opacity:.4; } 60%{ opacity:1; } 100%{ transform:scale(1) rotate(0); opacity:1; } } @keyframes whisperRule{ 0%{ transform:scaleX(0); opacity:0; } 30%{ opacity:.9; } 100%{ transform:scaleX(1); opacity:.55; } } /* ── consolidated reduced-motion: kill all flywheel motion; whisper fades only (content stays) ── */ @media (prefers-reduced-motion: reduce){ .flywheel-pulse, .flywheel-trail, .flywheel-sphere, .spirit-drift, .dock__btn .spark-flare, .dock__btn--cycle .forward-arrow{ display:none !important; animation:none !important; } .dock__btn--initium.ignited .dock__emoji, .dock__spirit:not(.is-swapping) .spirit__layer--in, .dock__spirit.idle-long, .dock__spirit.is-viewing-mindset::before, .dock__btn--mindset:hover .spirit__layer--in, .dock__fab.fab-greet .dock__logo, .dock__btn--movus.movus-charged .dock__ico--infinity, .dock__btn.spirit-passing > *{ animation:none !important; } .whisper{ transition:opacity .16s linear; transform:translateX(-50%); filter:none; } .whisper.is-on{ transform:translateX(-50%); transition:opacity .16s linear; } .whisper__rule, .whisper.is-on .whisper__glyph, .whisper__glyph::before{ animation:none !important; } .whisper.is-on .whisper__rule{ transform:scaleX(1); } } /* ── MOVUS loop-phase cycle: on a loop close / vote / move / insight, the infinity GROWS, then breathes through the flywheel's states (🔂 repeats · 👀 witnessed · 1️⃣ the One move) and resets to the living ∞. The flywheel narrating itself. ── */ .dock__phase{ position:absolute; top:8px; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:24px; height:24px; font-size:19px; line-height:1; opacity:0; pointer-events:none; z-index:2; transition:opacity .3s ease; filter:drop-shadow(0 0 6px rgba(61,242,255,.5)); } .dock__phase.pop{ animation:movusPhasePop .82s var(--ease); } @keyframes movusPhasePop{ 0%{ opacity:0; transform:translateX(-50%) scale(.5) rotate(-8deg); } 30%{ opacity:1; transform:translateX(-50%) scale(1.18) rotate(0); } 100%{ opacity:1; transform:translateX(-50%) scale(1); } } .dock__btn--movus.is-cycling .dock__ico--infinity{ opacity:0; } @keyframes movusGrow{ 0%{ transform:scale(1); } 45%{ transform:scale(1.45); filter:drop-shadow(0 0 13px rgba(61,242,255,.95)) drop-shadow(0 0 24px rgba(61,242,255,.5)); } 100%{ transform:scale(1); } } .dock__btn--movus.movus-grow .dock__ico--infinity{ animation:movusGrow .52s var(--ease) !important; } @media (prefers-reduced-motion: reduce){ .dock__phase{ display:none !important; } .dock__btn--movus.movus-grow .dock__ico--infinity, .dock__btn--movus.is-cycling .dock__ico--infinity{ animation:none !important; opacity:1 !important; } } /* ── SystemsCortex · "Insights From Your SystemsCortex" (profile section) ── */ .cortex-panel{ position:relative; overflow:hidden; } .cortex-panel__beam{ position:absolute; inset:0; pointer-events:none; opacity:.5; background:radial-gradient(120% 80% at 0% 0%, rgba(61,242,255,.14), transparent 55%), radial-gradient(120% 80% at 100% 100%, rgba(177,92,255,.12), transparent 55%); } .cortex-panel__who{ color:var(--ink-soft); font-weight:500; } .cortex-panel__lead{ position:relative; z-index:1; margin:6px 0 14px; font-size:.86rem; line-height:1.5; color:var(--ink-mute); } .cortex-panel__lead b, .cortex-item__text b{ color:var(--cyan-soft); font-weight:600; } .cortex-list{ position:relative; z-index:1; display:flex; flex-direction:column; gap:11px; } .cortex-item{ display:flex; gap:12px; align-items:flex-start; padding:13px 14px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-line); } .cortex-item__glyph{ flex:none; width:30px; height:30px; display:grid; place-items:center; font-size:18px; line-height:1; border-radius:50%; background:rgba(61,242,255,.08); box-shadow:inset 0 0 16px -6px rgba(61,242,255,.6); } .cortex-item__body{ min-width:0; } .cortex-item__title{ margin:0 0 3px; font-family:var(--display); font-weight:600; font-size:.96rem; color:var(--ink); line-height:1.3; } .cortex-item__tag{ display:inline-block; margin-right:8px; font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-soft); opacity:.85; vertical-align:.1em; } .cortex-item__text{ margin:0; font-size:.84rem; line-height:1.5; color:var(--ink-soft); } .cortex-panel__manage{ position:relative; z-index:1; margin-top:13px; background:none; border:0; cursor:pointer; font-family:var(--body); font-size:.76rem; color:var(--ink-mute); padding:4px 0; } .cortex-panel__manage:hover{ color:var(--ink-soft); } .cortex-panel--off .pill{ position:relative; z-index:1; margin-top:4px; } .cortex-panel__consent{ position:relative; z-index:1; margin:12px 0 0; font-size:.72rem; line-height:1.5; color:var(--ink-faint); } .cortex-panel__consent b{ color:var(--ink-mute); } /* ════════════════════════════════════════════════════════════════ AUTH PRESENCE — one identity, painted everywhere (r38) ════════════════════════════════════════════════════════════════ */ .topbar{ justify-content:space-between; gap:12px; } .topbar__auth{ display:flex; align-items:center; gap:8px; flex:none; } .tb-login{ appearance:none; background:none; border:0; cursor:pointer; font-family:var(--display); font-weight:600; font-size:.8rem; letter-spacing:.02em; color:var(--ink-soft); padding:8px 10px; border-radius:99px; transition:color .25s; } .tb-login:hover{ color:var(--cyan-soft); } .tb-join{ appearance:none; cursor:pointer; font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.02em; color:#fff; padding:9px 16px; border-radius:99px; background:linear-gradient(135deg, rgba(177,92,255,.92), rgba(124,58,237,.92)); border:1px solid rgba(214,168,255,.5); box-shadow:0 0 22px -8px rgba(177,92,255,.7); transition:box-shadow .3s var(--ease), transform .2s var(--ease); } .tb-join:hover{ box-shadow:0 0 30px -6px rgba(177,92,255,.9); } .tb-join:active{ transform:scale(.96); } .tb-user{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; background:var(--glass); border:1px solid var(--glass-line); border-radius:99px; padding:5px 12px 5px 6px; max-width:46vw; transition:border-color .25s, box-shadow .3s; } .tb-user:hover{ border-color:rgba(61,242,255,.4); box-shadow:0 0 22px -10px rgba(61,242,255,.6); } .tb-user__av{ width:24px; height:24px; border-radius:50%; object-fit:cover; display:block; } .tb-user__init{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:.62rem; color:#fff; background:linear-gradient(135deg, #b15cff, #3df2ff); } .tb-user__name{ font-family:var(--display); font-weight:600; font-size:.78rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .tb-user__dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--ink-faint); } .tb-user__dot.is-cloud{ background:var(--trust); box-shadow:0 0 8px rgba(95,243,192,.8); } /* ── hero auth row ── */ .hero__auth{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; min-height:20px; margin-top:-2px; } .hero__auth-q{ font-size:.84rem; color:var(--ink-mute); } .hero__auth-sep{ color:var(--ink-faint); } .hero__auth-link{ appearance:none; background:none; border:0; cursor:pointer; padding:4px 2px; font-family:var(--display); font-weight:600; font-size:.86rem; color:var(--cyan-soft); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(61,242,255,.35); transition:color .25s, text-decoration-color .25s; } .hero__auth-link:hover{ color:var(--cyan); text-decoration-color:var(--cyan); } .hero__auth-link--join{ color:var(--violet-bright); text-decoration-color:rgba(177,92,255,.4); } .hero__auth-link--join:hover{ color:#e4c5ff; text-decoration-color:var(--violet-bright); } .hero__auth-chip{ appearance:none; cursor:pointer; font-size:.84rem; color:var(--ink-soft); background:var(--glass); border:1px solid var(--glass-line); border-radius:99px; padding:8px 16px; transition:border-color .25s, box-shadow .3s; } .hero__auth-chip b{ color:var(--cyan-soft); font-weight:600; } .hero__auth-chip:hover{ border-color:rgba(61,242,255,.4); box-shadow:0 0 22px -10px rgba(61,242,255,.6); } /* ── the live pulse strip — counter + stats as ONE organized proof block ── */ .pulse{ width:100%; max-width:560px; margin-top:clamp(18px,4.5vh,34px); display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px clamp(12px,4vw,22px) 16px; border-radius:24px; background:linear-gradient(165deg, rgba(177,92,255,.045), rgba(61,242,255,.035) 60%, rgba(255,255,255,.01)); border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi), 0 30px 70px -50px rgba(0,0,0,.8); } .pulse__label{ font-family:var(--mono); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); margin:0; } .pulse .counter{ margin-bottom:2px; } .pulse .livestats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin:0; } .pulse .livestat{ width:auto; min-height:88px; margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:12px 10px; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid var(--glass-line); } @media (max-width:420px){ .pulse .livestats{ grid-template-columns:1fr; } } /* ── guest banner (MOVUS + reusable) ── */ .guestbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; margin:0 0 18px; border-radius:18px; background:linear-gradient(135deg, rgba(177,92,255,.07), rgba(61,242,255,.05)); border:1px solid rgba(177,92,255,.22); box-shadow:inset 0 1px 0 var(--glass-hi); } .guestbar__glyph{ font-size:1.3rem; flex:none; filter:drop-shadow(0 0 10px rgba(61,242,255,.5)); } .guestbar__copy{ flex:1; min-width:180px; } .guestbar__title{ font-family:var(--display); font-weight:700; font-size:.94rem; color:var(--ink); margin:0; } .guestbar__sub{ font-size:.8rem; line-height:1.45; color:var(--ink-mute); margin:3px 0 0; } .guestbar__acts{ display:flex; gap:8px; flex:none; flex-wrap:wrap; } @media (max-width:520px){ .guestbar__acts{ width:100%; } .guestbar__acts .pill{ flex:1; text-align:center; } } /* ── onboarding: "already a MotusMover?" switch ── */ .authswitch{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:0; background:linear-gradient(135deg, rgba(61,242,255,.05), rgba(177,92,255,.05)); border-color:rgba(61,242,255,.18); } .authswitch__copy{ flex:1; min-width:170px; } .authswitch__title{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink); margin:0; } .authswitch__sub{ font-size:.8rem; line-height:1.45; color:var(--ink-mute); margin:4px 0 0; } .authswitch__acts{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .authswitch__btn{ padding:11px 22px; font-size:.92rem; border-radius:13px; } @media (max-width:520px){ .authswitch__acts{ width:100%; } .authswitch__acts > *{ flex:1; text-align:center; } } .authswitch__or{ display:flex; align-items:center; gap:12px; margin:16px 0; font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); } .authswitch__or::before, .authswitch__or::after{ content:""; flex:1; height:1px; background:var(--glass-line); } .authswitch__or span{ white-space:nowrap; } /* ── compose: account note ── */ .compose__authnote{ display:block; font-size:.78rem; line-height:1.5; color:var(--ink-mute); background:rgba(61,242,255,.05); border:1px solid rgba(61,242,255,.16); border-radius:12px; padding:9px 12px; margin:10px 0 4px; } .compose__authnote .linkish{ font-size:inherit; } /* ── manifesto rhythm — consistent movement separation ── */ article.movement + article.movement{ border-top:1px solid rgba(255,255,255,.05); } @media (prefers-reduced-motion: reduce){ .tb-join:active, .tb-join:hover{ transform:none; } }