/* Worlds (user 2026-10-24): each page has its own colours, header shimmer and living backdrop (worlds.js). */
.world-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
body[data-world] .world-bg { opacity: 1; }
body > .wrap { position: relative; z-index: 1; }

/* each world's colours: --tide (accent), --glow (aura), --w2 (second accent) and a wash behind the page */
body[data-world="command"] { --w2: #ffd27a; --wash: radial-gradient(90% 60% at 85% 0%, rgba(47, 185, 177, .16), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(255, 210, 122, .06), transparent 60%); }
body[data-world="bloom"] { --tide: #ffa8cf; --glow: #ff6fb1; --tide-soft: #3a1630; --w2: #c8b6ff;
  --wash: radial-gradient(90% 60% at 50% 0%, rgba(255, 111, 177, .16), transparent 62%), radial-gradient(70% 50% at 100% 100%, rgba(200, 182, 255, .10), transparent 60%); }
body[data-world="reef"] { --glow: #ff8a5c; --w2: #ffc285;
  --wash: radial-gradient(100% 55% at 50% 0%, rgba(255, 138, 92, .16), transparent 62%), radial-gradient(70% 60% at 0% 100%, rgba(47, 185, 177, .10), transparent 60%); }
body[data-world="seaside"] { --w2: #b9b2ff; --wash: radial-gradient(90% 60% at 50% 0%, rgba(143, 211, 255, .14), transparent 62%), radial-gradient(60% 50% at 100% 100%, rgba(185, 178, 255, .10), transparent 60%); }
body[data-world="lab"] { --tide: #c3b1ff; --glow: #8f6bff; --tide-soft: #231a45; --w2: #7fe0ff;
  --wash: radial-gradient(90% 60% at 15% 0%, rgba(143, 107, 255, .18), transparent 62%), radial-gradient(70% 50% at 100% 90%, rgba(127, 224, 255, .10), transparent 60%); }
body[data-world] { background-image: var(--wash), linear-gradient(180deg, var(--bg) 0, var(--bg2) 45%, var(--bg) 100%); background-attachment: fixed; transition: background-color .6s; }
/* Coral Reef (user 2026-10-24): the whole page sits on one warm coral-orange glow that fades to black toward the bottom
   of the page. It's laid over the full length of the page (not the screen), so it darkens as you scroll down. */
html:has(body[data-world="reef"]) { min-height: 100%; background: #000; }
body[data-world="reef"] { min-height: 100vh; background-color: #000; background-attachment: scroll; background-repeat: no-repeat; background-size: 100% 100%;
  background-image:
    radial-gradient(120% 38% at 50% 0%, rgba(255, 138, 92, .30), transparent 70%),
    linear-gradient(180deg, #3a1d12 0%, #2c150d 18%, #1d0e09 42%, #0d0605 68%, #030202 88%, #000 100%); }

/* the header carries the world: shimmering title, coloured eyebrow, the logo ring glowing in the world's colour */
body[data-world] h1#page-title { background: linear-gradient(90deg, var(--ink), var(--tide), var(--w2), var(--ink)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: wTitle 10s linear infinite; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--glow) 40%, transparent)); }
body[data-world] .eyebrow { color: var(--tide); transition: color .6s; }
body[data-world] img.brand { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tide) 40%, var(--line)), 0 0 26px color-mix(in srgb, var(--glow) 60%, transparent); animation: wRing 6s ease-in-out infinite; }
body[data-world] .pgtab[aria-selected="true"] { color: var(--tide); border-bottom-color: var(--tide); text-shadow: 0 0 12px color-mix(in srgb, var(--glow) 55%, transparent); }

/* panels catch the world's light: a glowing top edge that drifts, and a soft aura */
body[data-world] .slp { border-color: color-mix(in srgb, var(--tide) 18%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tide) 16%, transparent), 0 12px 30px rgba(0, 0, 0, .28), 0 0 34px -18px color-mix(in srgb, var(--glow) 70%, transparent); }
body[data-world] .slp::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tide) 80%, transparent), color-mix(in srgb, var(--w2) 70%, transparent), transparent);
  background-size: 200% 100%; animation: wEdge 7s ease-in-out infinite; opacity: .7; }
body[data-world] details.fold.slpf { border-color: color-mix(in srgb, var(--tide) 18%, var(--line)); }
body[data-world] .labnav .chip[aria-selected="true"] { box-shadow: 0 0 16px -2px color-mix(in srgb, var(--glow) 75%, transparent); }

/* arriving on a page: its sections rise in one after another */
.page.world-in > *, .page.world-in > .hgrid > * { animation: wIn .38s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--wi, 0) * 40ms); }

/* Smooth page changes and scrolling (worlds.js adds html.motion-hush for a moment): the always-on glows hold still
   instead of repainting every frame, and pick up where they left off. Off-screen cards hold still too (cards.js). */
/* Never the section itself: it also carries the arrival fade-in, and pausing that left sections invisible while
   scrolling (user 2026-10-25: "sections are missing"). Only the decorative glows hold still. */
html.motion-hush :is(h1#page-title, img.brand, .vc-live i, .vc-empty, .vc-blink, .vc-pulse, .ms-ico),
html.motion-hush section.slp.vc::before, html.motion-hush section.slp.vc::after, html.motion-hush .slp::before,
section.slp.vc.vc-off::before, section.slp.vc.vc-off::after,
section.slp.vc.vc-off :is(.vc-live i, .vc-empty, .vc-blink, .vc-pulse, .vc-mdot, .vc-tglow),
html.motion-hush :is(.vc-mdot, .vc-tglow) { animation-play-state: paused !important; }

@keyframes wTitle { to { background-position: 300% 0; } }
@keyframes wRing { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes wEdge { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes wIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body[data-world] h1#page-title, body[data-world] img.brand, body[data-world] .slp::before, .page.world-in > *, .page.world-in > .hgrid > * { animation: none !important; }
}

/* the strip that fills the notch area while the tab bar is stuck at the top (phone-layout.js) */
@media (max-width: 760px) {
  .notch-cover { position: fixed; inset: 0 0 auto 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 12; pointer-events: none; opacity: 0; transition: opacity .2s; }
  html.tabs-stuck .notch-cover { opacity: 1; }
}

/* Sea Side (user 2026-10-24): the page takes its tab's blue. Accents, glows and the holo colours turn blue, and the whole
   page sits on a deep-blue glow that fades to black toward the bottom (the same treatment as Coral Reef's orange). */
body[data-world="seaside"] { --tide: #7a9cff; --glow: #2b5bff; --tide-soft: #0e1d4d; --w2: #9fb6ff;
  --holo1: #7a9cff; --holo2: #8fd3ff; --holo3: #b9b2ff; }
body[data-world="seaside"] #page-seaside { --holo1: #7a9cff; --holo2: #8fd3ff; --holo3: #b9b2ff; }
html:has(body[data-world="seaside"]) { min-height: 100%; background: #000; }
body[data-world="seaside"] { min-height: 100vh; background-color: #000; background-attachment: scroll; background-repeat: no-repeat; background-size: 100% 100%;
  background-image:
    radial-gradient(120% 38% at 50% 0%, rgba(43, 91, 255, .32), transparent 70%),
    linear-gradient(180deg, #0f1c48 0%, #0b1538 18%, #080f29 42%, #040817 68%, #010205 88%, #000 100%); }

/* The other pages get the same full-page treatment in their tab's colour (user 2026-10-24): Burganacci teal,
   Blüm Burg pink, LAB purple — a glow at the top fading to black toward the bottom of the page. */
html:has(body[data-world="command"]), html:has(body[data-world="bloom"]), html:has(body[data-world="lab"]) { min-height: 100%; background: #000; }
body[data-world="command"], body[data-world="bloom"], body[data-world="lab"] { min-height: 100vh; background-color: #000; background-attachment: scroll;
  background-repeat: no-repeat; background-size: 100% 100%; }
body[data-world="command"] { background-image: radial-gradient(120% 38% at 50% 0%, rgba(128, 226, 212, .24), transparent 70%),
  linear-gradient(180deg, #0c3434 0%, #0a2828 18%, #071c1e 42%, #040e10 68%, #010304 88%, #000 100%); }
body[data-world="bloom"] { background-image: radial-gradient(120% 38% at 50% 0%, rgba(255, 111, 177, .26), transparent 70%),
  linear-gradient(180deg, #3a1230 0%, #2c0e25 18%, #1d0a19 42%, #0e050c 68%, #030103 88%, #000 100%); }
body[data-world="lab"] { background-image: radial-gradient(120% 38% at 50% 0%, rgba(143, 107, 255, .28), transparent 70%),
  linear-gradient(180deg, #23174a 0%, #1b1239 18%, #120c28 42%, #080615 68%, #020105 88%, #000 100%); }

/* Speed (user 2026-10-25): the panels' drifting top edge and the logo's pulsing ring repainted every frame; both keep
   their glow, standing still */
body[data-world] .slp::before { animation: none !important; background-position: 50% 0; }
body[data-world] img.brand { animation: none !important; }
/* the page title's shimmer repainted the title and its 16px glow every frame; the colours and glow stay, still */
body[data-world] h1#page-title { animation: none !important; background-position: 30% 0; }

/* Still backgrounds, soft glow on the charts (user 2026-10-25): nothing decorative moves. Card and panel glows, Sea
   Side's holo cards, the Coral Reef breathing ring, the sonar and the scan buttons keep their glow, standing still.
   (Status indicators that tell you something is happening — the mic, a running scan — still move.) */
:is(.ss-hero, .ss-hero *, .ss-card, .ss-card *, .ss-badge, .rr-reef, .ms-ico, .scope-go.mac.mic, .vc-live i, .vc-empty, .vc-blink, .vc-pulse, .ax-auto .dot, .sonar *),
:is(.ss-hero, .ss-card)::before, :is(.ss-hero, .ss-card)::after { animation: none !important; }
.scope-go.mac.mic .gl-shim rect { animation: none !important; }
.ss-hero::after { opacity: 0; }
.vc-pulse { opacity: 0; }
/* the settings gear and IRIS's mic live on Home only (user 2026-10-25) */
body[data-pg]:not([data-pg="home"]) :is(#aud-gear, .iv-mic) { display: none !important; }

/* Colours swapped (user 2026-10-26): Sea Side wears Coral Reef's orange (its world is "reef" now), Coral Reef wears Sea
   Side's blue (world "seaside"). Sea Side's own accents and holo cards follow the orange. */
body[data-world="reef"][data-pg="seaside"] { --tide: #ff9a6b; --tide-soft: #3a1d12; --glow: #ff7a3d; --w2: #ffc285; }
body[data-world="reef"] #page-seaside { --holo1: #ff9a6b; --holo2: #ffc285; --holo3: #ff7a3d; }

/* LAB theme (owner 2026-10-26: "make that the theme of the page"): the IRIS device's look across the whole Lab —
   gunmetal panels with corner bolts and a violet edge glow, periwinkle mono headings, lavender pills, on a deep
   indigo-to-black page. */
body[data-world="lab"] { --tide: #a9c2ff; --glow: #7c5cff; --w2: #8b6bff; --tide-soft: #1a1840; --bg: #05050c; --bg2: #0e0e17; --panel: #15161f; --line: #2f3044; --muted: #9aa4cc; --ink: #e3ecff;
  background-image: radial-gradient(110% 30% at 50% 0%, rgba(124, 92, 255, .22), transparent 70%),
    linear-gradient(180deg, #15122f 0%, #0e0c22 20%, #0a0918 45%, #060510 70%, #020206 90%, #000 100%); }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) :is(section.slp, section.slp.vc) {
  border-radius: 24px; border: 1px solid #33344a;
  background:
    radial-gradient(circle at 14px 14px, #6b6d7d 0 2.4px, #16171f 3px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 14px) 14px, #6b6d7d 0 2.4px, #16171f 3px, transparent 4.2px),
    radial-gradient(circle at 14px calc(100% - 14px), #6b6d7d 0 2.4px, #16171f 3px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), #6b6d7d 0 2.4px, #16171f 3px, transparent 4.2px),
    linear-gradient(180deg, #1d1e29 0%, #13141c 35%, #15161e 100%);
  box-shadow: inset 0 0 0 2px #0a0a10, inset 0 0 0 3px #26273a, 0 16px 30px -18px #000, 0 0 26px -16px #7c5cff; }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) section.slp.vc::before { opacity: .45; }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) section.slp:not(.vc)::before { left: 22px; right: 22px; background: linear-gradient(90deg, transparent, #8b7bff, #6fd3ff, transparent); opacity: .6; }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) :is(.slp-head > h2, .slp > h2, .slp > .hhead h2) {
  font-family: var(--f-mono, ui-monospace, monospace); color: #c9d6ff; -webkit-text-fill-color: #c9d6ff; background: none; letter-spacing: .08em; text-shadow: 0 0 10px rgba(111, 140, 255, .45); }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) .chip { border-radius: 999px; background: #151626; border-color: #33355a; color: #c9d6ff; }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) .chip:is([aria-pressed="true"], [aria-selected="true"]) {
  background: linear-gradient(180deg, #c3b1ff, #a993ff); border-color: #d6c9ff; color: #1a1238; box-shadow: 0 0 16px -4px #a58bff; }
body[data-world="lab"] :is(#page-ledger, #page-vault, #page-liquidity) details.fold.slpf { border-radius: 20px; border-color: #33344a; background: linear-gradient(180deg, #1a1b25, #111219); box-shadow: inset 0 0 0 2px #0a0a10, 0 0 22px -16px #7c5cff; }
body[data-world="lab"] .slp-tog { color: #a9c2ff; }