/* ============================================================ brain.css — /brain only (the Company Brain page) From the "Company Brain" design handoff. Always dark: brain.html pins . Colours come from tokens.css; the header, buttons and consent banner are the site's own (chrome.css, components.css). Scroll-driven values (--rise, --asm, --wake, --ins, --ans, --prog, --s0…--s3, --l0x…--l5y) are written onto [data-brain="root"] by brain-dust.js every frame. Classes that would collide with the site's (hero, step, label) carry a brain- prefix. ============================================================ */ .brain { position: relative; min-height: 100vh; overflow-x: clip; background: var(--bg); color: var(--text); } .brain-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; } .brain-content { position: relative; z-index: 1; } .pad { padding-inline: var(--pad-x); } .wrap { max-width: var(--content); width: 100%; margin-inline: auto; } /* ---- type ---- */ .eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: var(--weight-body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); } .h1, .h2 { font-family: var(--font-display); font-weight: 400; margin: 0; color: var(--text); text-shadow: 0 0 40px var(--halo); } .h1 { font-size: clamp(56px, 8.4vw, 132px); line-height: .92; letter-spacing: -.018em; } .h2 { font-size: clamp(42px, 5.6vw, 84px); line-height: .98; letter-spacing: -.015em; text-wrap: balance; } .h3 { font-family: var(--font-sans); font-weight: 500; font-size: 21px; line-height: 1.25; letter-spacing: 0; margin: 0; color: var(--text); } .h1 em, .h2 em { font-style: italic; } .dust-word { color: var(--accent-dust); } .mind-word { color: var(--accent-mind); } .lead { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--text-2); margin: 0; max-width: 580px; text-wrap: pretty; text-shadow: 0 0 24px var(--halo); } .body { font-size: 17px; line-height: 1.65; color: var(--text-2); margin: 0; text-wrap: pretty; text-shadow: 0 0 24px var(--halo); } /* ---- links (the buttons are the site's .btn) ---- */ .brain-link { display: inline-flex; align-items: center; gap: 10px; height: 44px; font-size: 15px; font-weight: 500; color: var(--text); text-decoration: none; } .brain-link:hover { color: var(--accent-dust); } /* ---- load reveal (hero only) ---- */ .reveal { opacity: 0; animation: brainIn 1.6s cubic-bezier(.16, .7, .12, 1) forwards; animation-delay: var(--d, 0s); } @keyframes brainIn { from { opacity: 0; filter: blur(16px); transform: translateY(22px); } to { opacity: 1; filter: none; transform: none; } } /* ---- 1 hero: the dust rests along the bottom edge ---- */ .brain-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 140px 190px; } .brain-hero .wrap { display: flex; flex-direction: column; gap: 34px; } .brain-hero .eyebrow { display: flex; align-items: center; gap: 12px; } .brain-hero .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--accent-dust); } .hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .scroll-cue { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; color: var(--text-2); white-space: nowrap; opacity: calc(1 - var(--rise, 0) * 4); } .scroll-cue svg { animation: cue 2.6s ease-in-out infinite; } @keyframes cue { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } } /* ---- 2 problem: the dust rises and floats ---- */ .problem { min-height: 110vh; display: flex; align-items: center; padding-block: 120px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } .stack { display: flex; flex-direction: column; gap: 28px; } .scatter { position: relative; min-height: 460px; margin: 0; padding: 0; list-style: none; } .chip { position: absolute; left: var(--x); top: var(--y); opacity: var(--o, 1); display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text); white-space: nowrap; animation: floatA 11s ease-in-out infinite; } .chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dust); } .chip:nth-child(3n+2) { animation-name: floatB; animation-duration: 13s; } .chip:nth-child(3n) { animation-name: floatC; animation-duration: 9s; } @keyframes floatA { 50% { transform: translate(10px, -16px); } } @keyframes floatB { 50% { transform: translate(-12px, 12px); } } @keyframes floatC { 50% { transform: translate(6px, 14px); } } /* ---- 3 hub ---- */ .hub { min-height: 100vh; display: flex; align-items: center; padding-block: 120px 160px; } .hub .wrap { display: flex; flex-direction: column; gap: 72px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .brain-step { display: flex; flex-direction: column; gap: 16px; padding-top: 26px; border-top: 1px solid var(--line-strong); } .brain-step-head { display: flex; align-items: center; justify-content: space-between; color: var(--accent-mind); } .brain-step .body { font-size: 16px; } /* ---- 4 brain stage (sticky) ---- */ .stage { position: relative; height: 340vh; } .stage-inner { position: sticky; top: 0; height: 100vh; overflow: hidden; } .stage-col { position: absolute; inset: 0; padding-block: clamp(96px, 15vh, 160px) clamp(24px, 6vh, 56px); pointer-events: none; } .stage-col .wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .stage-copy { max-width: 560px; display: flex; flex-direction: column; gap: 24px; pointer-events: auto; } .stage-copy .body { max-width: 400px; opacity: calc(1 - var(--wake, 0) * 2.6); } .labels { position: absolute; inset: 0; pointer-events: none; } .brain-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); white-space: nowrap; text-shadow: 0 0 12px var(--bg), 0 0 4px var(--bg); opacity: min(calc(var(--wake, 0) * 3 - var(--i) * 0.35), calc(1 - var(--ins, 0) * 2.2)); } .brain-label i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent-mind); box-shadow: 0 0 14px var(--accent-mind); } .brain-label b { flex-shrink: 0; background: var(--accent-mind); opacity: .55; } .brain-label--r { transform: translate(calc(var(--lx, -9999px) - 4px), calc(var(--ly, -9999px) - 50%)); } .brain-label--r b { width: 64px; height: 1px; margin-right: 12px; } .brain-label--l { flex-direction: row-reverse; transform: translate(calc(var(--lx, -9999px) - 100% + 4px), calc(var(--ly, -9999px) - 50%)); } .brain-label--l b { width: 64px; height: 1px; margin-left: 12px; } .brain-label--u { flex-direction: column-reverse; transform: translate(calc(var(--lx, -9999px) - 50%), calc(var(--ly, -9999px) - 100% + 4px)); } .brain-label--u b { width: 1px; height: 48px; margin-top: 12px; } .brain-label--d { flex-direction: column; transform: translate(calc(var(--lx, -9999px) - 50%), calc(var(--ly, -9999px) - 4px)); } .brain-label--d b { width: 1px; height: 44px; margin-bottom: 12px; } .insight { width: 380px; max-width: 100%; margin: 0; padding: 22px; border-radius: var(--radius-card); background: var(--card); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 16px; pointer-events: auto; opacity: var(--ins, 0); transform: translateY(calc((1 - var(--ins, 0)) * 28px)); } .insight-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .insight-head .who { display: flex; align-items: center; gap: 10px; color: var(--text); } .insight-head .who::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-mind); box-shadow: 0 0 12px var(--accent-mind); animation: pulse 2.2s ease-in-out infinite; } .insight-head .tag { color: var(--text-3); font-size: 10.5px; } @keyframes pulse { 50% { opacity: .35; } } .insight-q { margin: 0; max-width: none; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--text); } .insight hr { border: 0; height: 1px; background: var(--line); margin: 0; } .insight-a { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.6; color: var(--text-2); --r: calc(var(--ans, 0) * (100% + 30px)); -webkit-mask-image: linear-gradient(180deg, var(--mask-solid) calc(var(--r) - 30px), transparent var(--r)); mask-image: linear-gradient(180deg, var(--mask-solid) calc(var(--r) - 30px), transparent var(--r)); } .insight-a strong { font-weight: 400; color: var(--text); } .sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; opacity: calc(var(--ans, 0) * 1.8 - 0.8); } .sources span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .sources li { list-style: none; padding: 4px 10px; border-radius: var(--radius-pill); border: 1px solid var(--card-border); font-size: 12px; color: var(--text); } .sources ul { display: contents; } /* ---- 5 call to action: the brain condenses into the emblem slot ---- */ .brain-cta { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center; padding-block: 110px 130px; } .emblem { width: 100%; max-width: 420px; height: clamp(170px, 26vh, 250px); } .brain-cta .h2 { max-width: 900px; } .brain-cta .body { max-width: 560px; } /* ---- footer: the site's legal links; consent.js adds "cookie settings" ---- */ .brain-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 28px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-3); } .brain-footer .footer__links { gap: 24px; } .brain-footer a { color: var(--text-3); text-decoration: none; } .brain-footer a:hover, .brain-footer .footer__consent:hover { color: var(--text); } .brain-footer .footer__consent::first-letter { text-transform: uppercase; } /* ---- progress rail (desktop ≥ 1100px) ---- */ .rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; gap: 12px; pointer-events: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text); } .rail ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .rail li { height: 100px; writing-mode: vertical-rl; opacity: calc(0.3 + var(--on, 0) * 0.7); } .rail li:nth-child(1) { --on: var(--s0, 1); } .rail li:nth-child(2) { --on: var(--s1, 0); } .rail li:nth-child(3) { --on: var(--s2, 0); } .rail li:nth-child(4) { --on: var(--s3, 0); } .rail .track { position: relative; width: 1px; background: var(--line-strong); } .rail .track::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--prog, 0) * 100%); background: var(--accent-mind); box-shadow: 0 0 10px var(--accent-mind); } /* ---- without WebGL: show the end states statically ---- */ .brain--static .labels, .brain--static .rail { display: none; } .brain--static .insight { opacity: 1; transform: none; } .brain--static .insight-a { -webkit-mask-image: none; mask-image: none; } .brain--static .sources { opacity: 1; } /* ---- responsive ---- */ @media (max-width: 1100px) { .rail { display: none; } } @media (max-height: 780px) { .stage-copy .body { display: none; } } @media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 40px; } .labels, .stage-copy .body { display: none; } .scatter { min-height: 0; display: flex; flex-wrap: wrap; gap: 10px; } .chip { position: static; } .insight { width: auto; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; } .chip, .scroll-cue svg, .insight-head .who::before { animation: none; } }