/* Intellany scene UI: content and controls use CSS pixels, independent of WebGL scale. */
:root { --ui-ink:#202b40; --ui-edge:clamp(20px,3.3vw,48px); }
header a, header button, .mobile-menu-button { min-height:44px; }
header a:focus-visible, header button:focus-visible, .mobile-menu-button:focus-visible,
.release-spirit:focus-visible, .home-hero button:focus-visible, .sound-button:focus-visible {
 outline:2px solid var(--ui-ink) !important; outline-offset:4px; box-shadow:0 0 0 6px #fff !important;
}
.intellany-notice { position:fixed; z-index:20000; top:max(88px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(440px,calc(100% - 32px)); padding:16px 20px; border-radius:16px; box-shadow:0 8px 32px #0002; background:#172b39; color:#fff; font:400 15px/1.5 var(--font-sans-regular); }
.intellany-notice[hidden] { display:none; }
/* Contact copy remains legible over the animated scene, with controls kept apart. */
footer:has(> .stagger-item) { padding-top:clamp(125px,17vh,180px) !important; padding-bottom:94px !important; }
footer > .stagger-item:first-child { width:min(700px,100%); margin:0 auto; padding:32px 24px; border:1px solid #ffffff26; border-radius:24px; background:#101b28b8; backdrop-filter:blur(16px); }
footer > .stagger-item:first-child h1 { font-size:clamp(28px,3.4vw,46px); line-height:1.25; letter-spacing:-.035em; }
footer > .stagger-item:first-child h1 span { font-size:inherit; }
footer > .stagger-item:first-child p { max-width:480px; font-size:16px; line-height:1.55; }
footer > .stagger-item:first-child a { display:inline-flex; align-items:center; justify-content:center; min-height:48px; margin-top:28px; padding:0 22px; border-radius:999px; background:#ffffffeb; color:#1b2e3c; font-size:15px; }
@media(max-height:550px) and (orientation:landscape) {
 footer:has(> .stagger-item) { position:relative !important; min-height:100svh; height:auto !important; padding-top:110px !important; }
 footer > .stagger-item:first-child { padding:22px; }
}

/* Centered white hero: one plain-language message above one explanation. */
.home-hero > div { align-items:center !important; padding:100px 0 130px !important; isolation:isolate; }
.home-hero > div::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 48%,#15203f80 0%,#15203f59 36%,#15203f14 70%,transparent 100%); }
.home-hero > div > .container { width:calc(100% - 64px); max-width:1280px; margin-inline:auto; padding:0 !important; display:flex; flex-direction:column; align-items:center; text-align:center; }
.intellany-hero-eyebrow, .home-hero h2 { display:none; }
.home-hero h1 { order:0; width:100%; max-width:100%; margin:0; font-size:clamp(58px,8vw,120px); line-height:1.12; letter-spacing:-.045em; text-align:center; color:#fff; white-space:normal; text-shadow:0 2px 24px #11183126; }
.home-hero h1 .char, .home-hero h1 [class*="char"] { background:none !important; color:inherit !important; -webkit-text-fill-color:currentColor !important; }
.home-hero .hero-title-break { display:none; }
.intellany-hero-description { order:1; margin:28px auto 0; max-width:570px; color:#fff; font:400 clamp(16px,1.4vw,20px)/1.55 var(--font-sans-regular); text-wrap:balance; text-shadow:0 1px 8px #11183140; }
.home-hero button[aria-label="Start the interactive story"] { order:2; display:inline-flex !important; align-items:center; position:relative !important; inset:auto !important; transform:none !important; width:auto !important; min-height:44px; margin:26px 0 0; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; color:#fff; font-size:14px !important; }
.home-hero button[aria-label="Start the interactive story"]::before,
.home-hero button[aria-label="Start the interactive story"]::after { display:none !important; }
.home-hero button[aria-label="Start the interactive story"] > * { border:0 !important; background:none !important; box-shadow:none !important; }
.home-hero button[aria-label="Start the interactive story"] img { display:none !important; }
.home-hero button[aria-label="Start the interactive story"] .bb { display:none !important; }
.home-hero button[aria-label="Start the interactive story"] span { font-size:14px !important; color:inherit; }
/* Original Noomo glass material: 25% white, two lavender gradient layers,
   6px optical blur and the source's alternating masked edge highlight.
   CSS-pixel sizing keeps the shorter Intellany labels proportionate. */
.release-spirit { opacity:1 !important; pointer-events:auto !important; position:fixed; left:auto !important; right:max(var(--ui-edge),env(safe-area-inset-right)) !important; bottom:max(24px,env(safe-area-inset-bottom)) !important; padding:0; border:0; background:none; color:var(--ui-ink); border-radius:999px; width:164px; height:46px; transition:opacity .18s ease !important; cursor:pointer; }
.release-spirit .wrapper { box-sizing:border-box; position:relative; isolation:isolate; width:100%; height:100%; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-radius:inherit; background:#ffffff40; box-shadow:none; overflow:hidden; }
.release-spirit .gradient { display:block !important; opacity:1 !important; pointer-events:none; }
.release-spirit .gradient-2 { backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.release-spirit .bb { display:block !important; pointer-events:none; }
.release-spirit .wrapper > .relative { flex-shrink:0; display:flex; align-items:center; z-index:3; }
.release-spirit:not(.intellany-remix) .wrapper > .relative:has(svg) { order:2; }
.release-spirit .label { position:relative; z-index:3; color:var(--ui-ink) !important; font:450 16px/1 var(--font-sans-regular); letter-spacing:-.01em; white-space:nowrap; }
.release-spirit .letter { color:inherit !important; filter:none !important; }
.release-spirit svg { flex:none; width:18px; height:18px; color:var(--ui-ink); }
/* Scene tools share the original glass finish with a compact footprint. */
.intellany-remix { left:max(var(--ui-edge),env(safe-area-inset-left)) !important; right:auto !important; width:104px; height:46px; }
.intellany-remix .wrapper { padding:0 14px; gap:8px; }
.intellany-remix .label { font-size:14px; }
.intellany-remix svg { width:16px; height:16px; }
.sound-button { opacity:1 !important; pointer-events:auto !important; position:fixed !important; left:calc(var(--ui-edge) + 116px) !important; right:auto !important; bottom:max(25px,env(safe-area-inset-bottom)) !important; width:44px; height:44px; border:1px solid #ffffff70; background:#ffffff40 !important; color:var(--ui-ink); border-radius:50%; z-index:20; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.sound-button .line { min-height:3px; background:var(--ui-ink) !important; }
.sound-button .gradient, .sound-button .bb { display:none !important; }
canvas { filter:hue-rotate(var(--intellany-scene-hue,0deg)); transition:filter .6s ease; }
body:has(.preloader) .release-spirit { visibility:hidden; }
body:has(.mobile-menu.opacity-100) .release-spirit,
body:has(.mobile-menu.opacity-100) .sound-button { opacity:0 !important; pointer-events:none !important; }
body:has(.release-spirit:hover) .liquid-glass-root,
body:has(.sound-button:hover) .liquid-glass-root,
body:has(header a:hover) .liquid-glass-root { opacity:0 !important; }
@media(max-width:767px) {
 header .md\:flex.xs\:hidden { display:none !important; }
 header .md\:hidden.xs\:block { display:block !important; }
 header { padding-top:18px !important; }
 header > .container { padding-inline:20px !important; }
 .mobile-menu-button { min-width:76px; min-height:44px; }
 .home-hero > div { padding:100px 0 130px !important; }
 .home-hero > div > .container { width:calc(100% - 40px); margin-inline:auto; }
 .home-hero h1 { font-size:clamp(36px,10.8vw,76px); letter-spacing:-.045em; line-height:1.12; margin:0; }
 .home-hero .hero-title-break { display:block; }
 .intellany-hero-description { margin-top:24px; max-width:300px; font-size:16px; line-height:1.55; }
 .home-hero button[aria-label="Start the interactive story"] { margin-top:22px; }
 .release-spirit { width:148px; }
 .release-spirit .wrapper { padding-inline:16px; gap:12px; }
 .intellany-remix { width:96px; }
 .intellany-remix .wrapper { padding-inline:12px; gap:8px; }
 .sound-button { left:calc(var(--ui-edge) + 104px) !important; }
}
@media(max-width:359px) {
 :root { --ui-edge:16px; }
 .home-hero > div > .container { width:calc(100% - 32px); margin-inline:auto; }
 .release-spirit { width:130px; }
 .release-spirit .wrapper { padding-inline:12px; gap:8px; }
 .release-spirit .label { font-size:14px; }
 .intellany-remix { width:84px; }
 .intellany-remix .wrapper { padding-inline:10px; gap:6px; }
 .sound-button { left:calc(var(--ui-edge) + 92px) !important; width:40px; height:44px; }
}
@media(max-height:520px) and (orientation:landscape) {
 .home-hero > div { padding:90px 0 82px !important; }
 .intellany-hero-eyebrow { display:none; }
 .home-hero h1 { font-size:clamp(44px,7vw,60px); }
 .home-hero .hero-title-break { display:none; }
 .intellany-hero-description { margin-top:10px; max-width:500px; font-size:14px; }
 .home-hero button[aria-label="Start the interactive story"] { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 canvas, .release-spirit, .release-spirit *, .sound-button { transition:none !important; }
}

.home-hero button[aria-label="Start the interactive story"] > div { padding:0 !important; backdrop-filter:none !important; }
.home-hero button[aria-label="Start the interactive story"] span::after { content:"↓"; display:inline-block; margin-left:10px; }

.home-hero button[aria-label="Start the interactive story"][disabled] { visibility:hidden; }
@media(max-height:520px) and (orientation:landscape) { .home-hero button[aria-label="Start the interactive story"] { display:none !important; } }
/* The original sound wrapper was hidden until the scene started. Keep utilities discoverable. */
div:has(> .sound-button) { opacity:1 !important; pointer-events:auto !important; }
.sound-button .wrapper { width:100%; height:100%; background:none !important; }
.sound-button .border-circle, .sound-button .bottom-line { display:none; }
.sound-button .lines { height:14px; gap:2px; }
.sound-button .line { width:2px; min-height:4px; }
.sound-button .line-2, .sound-button .line-4 { min-height:8px; }
.sound-button .line-3 { min-height:12px; }
.sound-button[aria-pressed="true"] { background:#ffffff65 !important; border-color:#fff; }
body:has(.preloader) div:has(> .sound-button) { visibility:hidden; }
body:has(.mobile-menu.opacity-100) div:has(> .sound-button) { opacity:0 !important; pointer-events:none !important; }
@media(max-width:319px) {
 :root { --ui-edge:12px; }
 .intellany-remix { width:44px; }
 .intellany-remix .label { display:none; }
 .sound-button { left:calc(var(--ui-edge) + 52px) !important; width:44px; }
}