:root {
    --stage-text: #f1f1f8;
    --stage-muted: #b9c6d5;
    --stage-border: rgba(255,255,255,.24);
    --stage-space: clamp(1.25rem, 4vw, 4rem);
}
html, body { overflow: hidden; height: 100%; }
#scrollRunway { display: none; }
#bgCluster { will-change: transform; transition: none; filter: blur(14px); }
.hero-composition, .hero-composition.audio-active { transform: translate(-50%, -50%); transition: none; }
.hero-wrapper { transition: none; transform-origin: center; }
.emotion-crossfade .crossfade-word.fading-out { transform: translate(-50%, -50%); }
#audioDefinition, #audioDefinition.active, #audioDefinition.fading-out { transform: none; }
#audioToggle { animation: none; transition: background .3s ease; }
#saasLanding {
    position: fixed; inset: 0; z-index: 0; opacity: 0;
    background: transparent; color: var(--stage-text);
    padding: var(--stage-space); overflow: hidden; pointer-events: none;
    overscroll-behavior: contain;
}
#saasLanding.stage-ready { overflow-y: auto; pointer-events: auto; }
.saas-nav, .saas-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.saas-nav, .saas-hero, .saas-capabilities, .saas-footer { max-width: 1160px; margin-inline: auto; }
.saas-nav strong { margin-right: auto; font-size: 1.5rem; }
#saasLanding a { color: inherit; text-decoration: none; }
#saasLanding a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.saas-hero { padding-block: clamp(3rem, 10vh, 8rem); }
.saas-eyebrow, .saas-capabilities article > span { font-size: .75rem; letter-spacing: .15em; }
.saas-hero h1 { font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: 1.08; letter-spacing: -.045em; max-width: 950px; margin: 1.5rem 0; }
.saas-hero > p:not(.saas-eyebrow) { color: var(--stage-muted); max-width: 650px; font-size: 1.125rem; line-height: 1.7; }
.saas-actions { margin-top: 2rem; }
.saas-button { border: 1px solid var(--stage-border); border-radius: 99px; padding: 1rem 1.5rem; }
.saas-button:hover { border-color: currentColor; }
.saas-secondary { border-color: transparent; }
.saas-capabilities { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; }
.saas-capabilities article { border-top: 1px solid var(--stage-border); padding-top: 1.5rem; }
.saas-capabilities h2 { font-size: 1.25rem; margin-block: 1rem; }
.saas-capabilities p, .saas-footer { color: var(--stage-muted); line-height: 1.7; }
.saas-footer { padding-block: 3rem 1rem; font-size: .8rem; }
@media (max-width: 640px) { .saas-capabilities { grid-template-columns: 1fr; } .saas-nav { gap: 1rem; font-size: .85rem; } }

/* Tighter brand plaque: preserve the artwork size and reduce its surround. */
.brand-hero { margin: 40px; }
@media (max-width: 640px) {
    .hero { width: fit-content; max-width: 92vw; }
    .brand-hero { margin: 24px; }
}

/* Smaller plaque uses a tighter corner radius. */
.hero { border-radius: 24px; }
@media (max-width: 640px) {
    .hero { border-radius: 18px; }
}

/* Keep the sensaudio dictionary entry readable on smaller screens. */
@media (max-width: 640px) {
    .dict-term { font-size: 16px; }
    .dict-phonetic { font-size: 12px; }
    .dict-pos { font-size: 12px; }
    .dict-sub { font-size: 11px; }
    .dict-body { font-size: 14px; line-height: 1.6; }
    .dict-num { font-size: 12px; }
}

/* Center the dictionary entry beneath the brand plaque. */
#audioDefinition { text-align: center; }
.dict-headword { justify-content: center; }

/* Ease the optional cloud-detail reveal at the initial brand stage. */
#bgCluster { transition: filter .25s ease-out; }

/* One scroll-controlled clarity value drives every background blur surface. */
:root { --background-clarity: 0; }
#bgCluster { filter: blur(calc(14px - 12px * var(--background-clarity))); }
.hero { --surface-blur-start: 24px; }
#audioToggle { --surface-blur-start: 10px; }
.card, .nav { --surface-blur-start: 20px; }
.hero, #audioToggle, .card, .nav {
    backdrop-filter: blur(calc(var(--surface-blur-start) - (var(--surface-blur-start) - 2px) * var(--background-clarity)));
    -webkit-backdrop-filter: blur(calc(var(--surface-blur-start) - (var(--surface-blur-start) - 2px) * var(--background-clarity)));
}

/* Viewport-sized cloud and a separate, unblurred label plane. */
#bgCluster, #emotionCloudLabels { width: 100vw; height: 100vh; }
#emotionCloudLabels {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 2; pointer-events: none;
}

/* The word and VAD interpolation share the audio-dependent cadence. */
.emotion-crossfade .crossfade-word {
    transition-duration: var(--emotion-crossfade-duration, 2.4s);
}

/* A brief rocking roll invites attention, then rests between repetitions. */
@keyframes sensaudio-invite {
    0%, 24%, 100% { transform: translateX(-50%) perspective(500px) rotateX(0deg); }
    6% { transform: translateX(-50%) perspective(500px) rotateX(-28deg); }
    12% { transform: translateX(-50%) perspective(500px) rotateX(30deg); }
    18% { transform: translateX(-50%) perspective(500px) rotateX(-10deg); }
}
#audioToggle {
    transform-origin: center;
    animation: sensaudio-invite 9s ease-in-out 1.5s infinite;
}
#audioToggle:hover, #audioToggle:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    #audioToggle { animation: none; }
}

/* Specular light travels across the glass during the forward/back roll. */
#audioToggle { overflow: hidden; isolation: isolate; }
#audioToggle::after {
    content: "";
    position: absolute;
    inset: -60% -35%;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 44%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.08) 56%, transparent 65%);
    transform: translateX(-100%);
    opacity: 0;
    animation: sensaudio-glass-shimmer 9s ease-in-out 1.5s infinite;
}
@keyframes sensaudio-glass-shimmer {
    0%, 24%, 100% { transform: translateX(-100%); opacity: 0; }
    6% { opacity: .7; }
    12% { transform: translateX(65%); opacity: 1; }
    18% { transform: translateX(-20%); opacity: .35; }
}
#audioToggle:hover::after, #audioToggle:focus-visible::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    #audioToggle::after { animation: none; }
}

/* Upward exploration enlarges the cloud and softens it as it approaches. */
#bgCluster {
    scale: calc(1 + .2 * var(--background-clarity));
    filter: blur(calc(14px + 12px * var(--background-clarity)));
    transition: filter .25s ease-out, scale .25s ease-out;
}

/* Restore only the original sensaudio button invitation. */
#audioToggle {
    animation: flashBounce 1.2s ease-in-out 3;
    animation-delay: .5s;
}
#audioToggle::after { display: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
    #audioToggle { animation: none; }
}

/* The cloud becomes a larger, softer backdrop during the SaaS reveal. */
#bgCluster {
    filter: blur(calc(14px + 12px * var(--background-clarity) + 22px * var(--saas-background-progress, 0)));
}

/* Extended SaaS page: shared section rhythm over the transparent cloud stage. */
:root {
    --saas-section-space: clamp(4rem, 10vw, 8rem);
    --saas-column-gap: clamp(2rem, 6vw, 6rem);
    --saas-heading-size: clamp(2rem, 4vw, 3.5rem);
}
.saas-section {
    max-width: 1160px; margin-inline: auto;
    padding-block: var(--saas-section-space);
    border-bottom: 1px solid var(--stage-border);
    scroll-margin-top: var(--stage-space);
}
.saas-section h2 { font-size: var(--saas-heading-size); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 1.5rem; font-weight: 600; }
.saas-section h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 .75rem; font-weight: 600; }
.saas-section p { color: var(--stage-muted); line-height: 1.8; max-width: 62ch; margin: 0; }
.saas-section-intro { max-width: 760px; margin-bottom: 3rem; }
.saas-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--saas-column-gap); }
.saas-axis-list > div + div, .saas-feature-list article + article { margin-top: 2rem; }
.saas-axis-list span { display: flex; align-items: center; gap: 1rem; font-size: .8rem; color: var(--stage-muted); margin-top: 1rem; }
.saas-axis-list i { flex: 1; height: 1px; background: var(--stage-border); position: relative; }
.saas-axis-list i::after { content: ''; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--stage-text); }
.saas-use-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2.5rem; }
.saas-use-cases article { padding-top: 1.5rem; border-top: 1px solid var(--stage-border); }
.saas-use-cases span { display: block; margin-top: 1.75rem; color: var(--stage-muted); font-size: .8rem; }
.saas-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 2rem; }
.saas-flow li > span { display: block; color: var(--stage-muted); font-size: .8rem; margin-bottom: 1.5rem; }
.saas-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2.5rem 4rem; }
.saas-tool-grid article { border-top: 1px solid var(--stage-border); padding-top: 1.5rem; }
#saasLanding .saas-text-link { display: inline-block; margin-top: 2rem; text-decoration: underline; text-underline-offset: .3em; }
.saas-start-list { margin: 0; padding-left: 1.25rem; }
.saas-start-list li { padding-left: .75rem; }
.saas-start-list li + li { margin-top: 2rem; }
.saas-faq details { padding-block: 1.25rem; border-bottom: 1px solid var(--stage-border); }
.saas-faq details:first-child { padding-top: 0; }
.saas-faq summary { cursor: pointer; line-height: 1.6; font-size: 1.05rem; }
.saas-faq details p { margin-top: 1rem; }
.saas-faq summary:focus-visible { outline: 2px solid var(--stage-text); outline-offset: 6px; }
.saas-closing { border-bottom: none; }
.saas-footer-expanded { display: flex; justify-content: space-between; gap: 2rem; border-top: 1px solid var(--stage-border); }
.saas-footer-expanded strong { font-size: 1.4rem; color: var(--stage-text); }
.saas-footer-expanded nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-content: start; }
@media(max-width: 800px) {
    .saas-split, .saas-use-cases { grid-template-columns: 1fr; }
    .saas-flow { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .saas-footer-expanded { flex-direction: column; }
}
@media(max-width: 480px) {
    .saas-tool-grid, .saas-flow { grid-template-columns: 1fr; }
    .saas-nav strong { flex-basis: 100%; }
    .saas-section h2 br { display: none; }
}

.saas-code { margin-top: 1.5rem; padding-block: 1rem; border-top: 1px solid var(--stage-border); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--stage-muted); font-size: .8rem; line-height: 1.8; }
.saas-section .saas-example-note { margin-top: 1.5rem; font-size: .85rem; }

/* Project summaries with larger titles and optional supporting detail. */
.saas-section .saas-project h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; letter-spacing: -.025em; }
.saas-project-details { margin-top: 1.25rem; }
.saas-project-details summary { cursor: pointer; display: list-item; font-size: .9rem; color: var(--stage-text); }
.saas-project-details summary:focus-visible { outline: 2px solid var(--stage-text); outline-offset: 5px; }
.saas-project-expanded { padding-top: 1rem; }
.saas-project-expanded p + p { margin-top: 1rem; }
#saasLanding .saas-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Always-available motion control, including on the SaaS page. */
#motionToggle { position: fixed; bottom: 12px; right: 12px; z-index: 60; min-height: 44px; padding: 10px 14px; border: 1px solid var(--stage-border); border-radius: 24px; background: rgba(3,7,18,.8); color: var(--stage-muted); font: inherit; font-size: 12px; cursor: pointer; }
#motionToggle:focus-visible { outline: 2px solid var(--stage-text); outline-offset: 3px; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; transition-duration: 0s !important; }
#saasLanding { padding-bottom: 80px; }
@media(max-width:640px) { #motionToggle { bottom: 8px; right: 8px; font-size: 11px; padding-inline: 10px; } #audioToggle { bottom: 65px; } }