/* The white hole: light, possibility, and motion flowing outward. */
.home-page {
    --paper: #fbfcfe;
    --ink: #202c3c;
    --muted: #647082;
    --line: #dbe2e9;
    --soft: #f0f4f9;
    --orange: #5978b9;
    --orange-text: #4466a8;
    background: var(--paper);
}
.home-page .site-header { background: #fbfcfeeb; }
.home-page .hello-hero {
    background: radial-gradient(ellipse at 79% 46%, #e3eafa88, transparent 49%), radial-gradient(ellipse at 10% 0, #f7eee766, transparent 55%), #fbfcfe;
    min-height: 740px;
    border-bottom: 1px solid var(--line);
}
.home-page .hello-grid { width: 100%; opacity: .27; mask-image: radial-gradient(ellipse at 70% 45%, black, transparent 74%); background-size: 64px 64px; }
.home-page .hello-content { grid-template-columns: .86fr 1.14fr; gap: 38px; min-height: 665px; padding-block: 36px 85px; }
.home-page .hello-copy { padding-bottom: 30px; }
.home-page .hello-copy .eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 44px; }
.home-page .hello-copy h1 { font-size: clamp(110px, 13vw, 190px); letter-spacing: -.095em; }
.home-page .hello-word { background: linear-gradient(115deg, #202c3c 12%, #41566f 45%, #8ca2be 52%, #202c3c 65%); background-size: 240% 100%; background-clip: text; -webkit-text-fill-color: transparent; animation: white-type-in 1.2s ease both, white-shimmer 14s ease-in-out infinite; }
.home-page .hello-dot { color: #8da5d0; text-shadow: 0 0 25px #c2d8fb; animation: white-type-in 1.2s .12s ease both; }
.home-page .hello-subline { font-size: clamp(18px, 1.65vw, 24px); margin-top: 40px; color: #526176; animation: white-rise 1s .15s both; }
.home-page .hello-copy .hero-actions { animation: white-rise 1s .25s both; gap: 26px; }
.home-page .button { border-radius: 4px; box-shadow: 0 5px 15px #26344b0a; transition: transform .3s ease, box-shadow .3s, background .3s; }
.home-page .button:hover { transform: translateY(-3px); background: #344b70; box-shadow: 0 10px 25px #3a548d25; }
.home-page .text-link:hover span { transform: translate(4px, -4px); }
.home-page .hello-footer { bottom: 27px; font-size: 8px; letter-spacing: .09em; }
.home-page .hello-footer a span { animation: white-scroll 2.5s ease-in-out infinite; }
.home-page .scroll-meter { right: 24px; }
.white-instrument { width: 100%; max-width: 690px; min-width: 0; animation: white-rise 1.25s .1s both; }
.white-instrument .instrument-label { font-size: 8px; letter-spacing: .11em; color: #5e6e85; padding-block: 16px; }
.white-instrument .instrument-label>span:first-child { display: flex; align-items: center; gap: 8px; }
.white-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #7599c8; box-shadow: 0 0 10px #8cc8e9; }
.white-scene { position: relative; isolation: isolate; height: 455px; overflow: hidden; background: radial-gradient(ellipse at 52% 46%, #e5eaf8b3, transparent 68%); }
.white-scene::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 45px 14px #f5f8fc88; }
.white-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.white-scene.is-rendered .white-canvas { opacity: 1; }
.white-coordinate { position: absolute; left: 4px; top: 18px; font-size: 7px; letter-spacing: .1em; color: #78859a; }
.white-core-label { position: absolute; right: 0; top: 61%; font-size: 7px; color: #627393; letter-spacing: .03em; display: flex; align-items: center; gap: 8px; }
.white-core-label>span { width: 36px; border-top: 1px solid #9baecb; }
.white-scene-note { position: absolute; left: 8px; bottom: 16px; color: #60738c; font-size: 12px; line-height: 1.7; }
.white-scene-note em { font: italic 16px Georgia, serif; color: #374e6e; }
.white-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.light-release { display: inline-flex; gap: 10px; align-items: center; padding: 10px 13px; min-height: 40px; background: #ffffffa8; border: 1px solid #cbd7e7; border-radius: 5px; color: #435c83; font: 10px var(--mono); transition: box-shadow .3s, background .3s, transform .3s; }
.light-release>span:first-child { font-size: 20px; line-height: 1; transition: transform .5s; }
.light-release:hover { background: #fff; box-shadow: 0 0 25px #a2c3ef42; }
.light-release:hover>span:first-child { transform: rotate(90deg); }
.light-release:active { transform: scale(.97); }
.light-flow { display: flex; align-items: center; gap: 9px; font: 8px var(--mono); letter-spacing: .06em; color: #667790; }
.light-flow input { width: 79px; height: 25px; accent-color: #7393c4; cursor: ew-resize; }
.light-flow output { min-width: 4ch; text-align: right; }
.white-instrument .instrument-caption { font-size: 9px; gap: 10px; padding: 7px 0; }
.white-instrument .motion-toggle { margin-left: auto; font-size: 8px; }
.white-fallback { position: absolute; inset: 0; }
.white-fallback span { position: absolute; width: 135px; height: 135px; left: 52%; top: 45%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 20px 12px #fff, 0 0 55px 30px #d4e2fa, 0 0 110px 45px #c6cfec55; }
.white-fallback i { position: absolute; width: 70%; height: 32%; left: 17%; top: 29%; border: 2px solid #b7c9df; border-radius: 50%; transform: rotate(-23deg); box-shadow: 0 0 8px white; }
.white-fallback i:nth-child(2) { transform: rotate(35deg); width: 65%; }
.white-fallback i:nth-child(3) { transform: rotate(70deg); }
.white-scene.is-rendered .white-fallback { display: none; }
.home-page #explore { position: relative; }
.home-page .intro-grid h2 .serif, .home-page .latest-grid .serif { color: #6b89b8; }
.home-page .interest-strip { gap: 14px; padding-top: 0; border: 0; }
.home-page .interest-strip>span { position: relative; overflow: hidden; padding: 22px 18px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(130deg, #fff, #edf3fa66); transition: transform .4s, box-shadow .4s, border-color .4s; }
.home-page .interest-strip>span::after { content: '↗'; margin-left: auto; color: #7893ba; opacity: 0; transform: translate(-5px, 5px); transition: opacity .3s, transform .3s; }
.home-page .interest-strip>span:hover { transform: translateY(-5px); border-color: #a8bddb; box-shadow: 0 12px 26px #93afd21a; }
.home-page .interest-strip>span:hover::after { opacity: 1; transform: none; }
.home-page .signal-section { position: relative; }
.home-page .signal-statement { position: relative; }
.home-page .signal-statement::after { content: ''; position: absolute; left: 0; right: 0; bottom: 13px; height: 1px; background: linear-gradient(90deg, transparent, #9cbde4, transparent); transform-origin: left; }
.home-page .signal-arrow { color: #98acce; }
.home-page .signal-active { text-shadow: 0 0 30px #a5cbff44; }
.home-page .idea-response { border-color: #d4dfef; border-radius: 9px; background: radial-gradient(circle at var(--glow-x, 70%) var(--glow-y, 30%), #e4eefc, transparent 65%), linear-gradient(130deg, #fbfcff, #f0f4fc); transition: box-shadow .4s, border-color .4s; }
.home-page .idea-response:hover { box-shadow: 0 15px 50px #9eb6d225; border-color: #a8bddb; }
.home-page .idea-response::before { border-color: #afc4e2; }
.home-page .idea-response::after { border-color: #adc0df; }
.home-page .idea-response h2, .home-page .idea-response>p { position: relative; z-index: 1; }
.home-page .idea-response-line { position: relative; z-index: 1; }
.home-page .idea-response-mark { color: #7c9ece; top: 24px; right: 28px; bottom: auto; font-size: 24px; opacity: .65; }
.home-page .idea-chip { color: #728096; }
.home-page .idea-chip:hover, .home-page .idea-chip.is-selected { color: var(--ink); }
.home-page .lab-invitation { background: radial-gradient(ellipse at 77% 45%, #3d241d, transparent 48%), #0b0c11; }
.home-page .lab-invitation .eyebrow { color: #b4b3bb; }
.home-page .lab-invitation .status-dot { background: #ffa66f; }
.home-page .lab-invitation .serif { color: #ffc196; }
.home-page .lab-invitation .button-light:hover { background: #ffe8d5; color: #242026; }
.home-page .invitation-art { width: 100%; isolation: isolate; }
.home-page .invitation-art>svg { opacity: .16; color: #ffd1a7; transform: rotate(-18deg); }
.lab-doorway { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lab-doorway span { position: absolute; width: 32%; aspect-ratio: 1; top: 29%; left: 34%; border-radius: 50%; background: #08090d; box-shadow: 0 0 3px 2px #ffe1bc, 0 0 24px 3px #d48451aa, 0 0 65px 10px #c9783d33; }
.lab-doorway i { position: absolute; top: 35%; left: 8%; width: 85%; height: 21%; border: 4px solid #eeba8b; border-radius: 50%; transform: rotate(-22deg); box-shadow: 0 0 10px #e49e6c55, inset 0 0 10px #e49e6c66; }
.home-page .invitation-art>.mono { margin-top: 10px; position: relative; z-index: 2; color: #baaaa4; }
.home-page .latest-article { padding: 26px; border: 1px solid var(--line); border-radius: 7px; background: radial-gradient(circle at var(--glow-x, 80%) var(--glow-y, 10%), #eaf1fc, #ffffff55 80%); transition: transform .4s, box-shadow .4s; }
.home-page .latest-article:hover { transform: translateY(-4px); box-shadow: 0 14px 35px #809ab31a; }
.home-page .contact-strip>a span { transition: transform .4s; color: #7998c3; }
.home-page .contact-strip>a:hover span { transform: translate(6px, -6px) rotate(8deg); }
.home-page .site-footer { background: linear-gradient(135deg, #f2f5fa, #e9eff8); }
.home-page .main-nav a::before { content: ''; position: absolute; bottom: 4px; left: 0; width: 100%; height: 1px; background: #8aa6cc; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.home-page .main-nav a:hover::before { transform: scaleX(1); }
.home-reveal.is-revealed { animation: white-rise .85s cubic-bezier(.16, 1, .3, 1) both; }
.home-reveal.is-revealed .interest-strip>span { animation: white-rise .75s ease both; }
.home-reveal.is-revealed .interest-strip>span:nth-child(2) { animation-delay: .08s; }
.home-reveal.is-revealed .interest-strip>span:nth-child(3) { animation-delay: .16s; }
.home-reveal.is-revealed .interest-strip>span:nth-child(4) { animation-delay: .24s; }
.home-reveal.is-revealed .signal-statement::after { animation: white-line 1.5s ease both; }
.home-page.hero-out-of-view .hello-word { animation-play-state: running, paused; }
.home-page.hero-out-of-view .hello-footer a span { animation-play-state: paused; }
@keyframes white-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes white-type-in { from { opacity: 0; transform: translateY(25px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes white-shimmer { 0%, 65%, 100% { background-position: 0 50%; } 35% { background-position: 100% 50%; } }
@keyframes white-scroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes white-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1100px) {
    .home-page .hello-content { gap: 20px; grid-template-columns: .82fr 1.18fr; }
    .home-page .hello-copy h1 { font-size: 13vw; }
    .home-page .hello-copy .hero-actions { gap: 15px; flex-wrap: wrap; }
    .white-controls { gap: 10px; flex-wrap: wrap; }
    .light-release { padding-inline: 9px; font-size: 9px; }
    .light-flow input { width: 65px; }
    .home-page .interest-strip>span { padding: 18px 12px; gap: 10px; font-size: 12px; }
}
@media (max-width: 760px) {
    .home-page .hello-hero { min-height: 0; }
    .home-page .hello-content { grid-template-columns: 1fr; padding-top: 42px; padding-bottom: 0; gap: 29px; min-height: 0; }
    .home-page .hello-copy { padding-bottom: 0; }
    .home-page .hello-copy .eyebrow { margin-bottom: 30px; font-size: 8px; }
    .home-page .hello-copy h1 { font-size: clamp(110px, 28vw, 170px); }
    .home-page .hello-subline { margin-top: 29px; font-size: 18px; }
    .home-page .hello-copy .hero-actions { margin-top: 25px; gap: 22px; }
    .home-page .hello-hero .button { font-size: 11px; gap: 20px; padding-inline: 17px; }
    .home-page .hello-copy .text-link { font-size: 11px; }
    .white-instrument { justify-self: center; max-width: 560px; }
    .white-scene { height: 355px; }
    .white-instrument .instrument-label { font-size: 7px; letter-spacing: .03em; }
    .white-coordinate { font-size: 6px; }
    .white-core-label { font-size: 6px; top: 64%; }
    .white-core-label>span { width: 20px; }
    .white-scene-note { font-size: 10px; bottom: 15px; }
    .white-scene-note em { font-size: 14px; }
    .white-controls { justify-content: space-between; }
    .light-flow { gap: 6px; font-size: 7px; }
    .light-flow input { width: 65px; }
    .light-release { padding: 8px; gap: 7px; font-size: 8px; }
    .white-instrument .instrument-caption { font-size: 8px; }
    .home-page .hello-footer { bottom: auto; margin-top: 29px; padding-bottom: 22px; font-size: 7px; }
    .home-page .hello-footer>span { max-width: 150px; }
    .home-page .scroll-meter { display: none; }
    .home-page .interest-strip { gap: 12px; }
    .home-page .interest-strip>span { padding: 18px 13px; }
    .home-page .signal-statement { display: grid; grid-template-columns: 1fr auto 1fr; overflow: visible; gap: 20px 12px; padding-top: 40px; white-space: normal; }
    .home-page .signal-word { font-size: 36px; }
    .home-page .signal-arrow:nth-child(4) { grid-column: 1 / -1; text-align: center; transform: rotate(90deg); }
    .home-page .signal-note { margin-top: 7px; line-height: 1.8; }
    .home-page .latest-article { padding: 22px; }
}
@media (max-width: 360px) {
    .light-flow input { width: 48px; }
    .light-release { gap: 5px; padding-inline: 6px; }
    .white-instrument .instrument-caption { gap: 6px; font-size: 7px; }
}
