/* audio.css — floating background-music toggle. * * A small glass circle, fixed to the bottom-right of the viewport. Visual language * matches .scene-toggle (css/hero.css): the same translucent navy glass, blur, border, * and gold-cream ink. Sits in the "top controls" z-index tier (see css/petals.css) — * above every page layer, below the preloader (10000) and the envelope intro (11000) so * it never shows through either overlay. js/audio.js drives the on/off state and swaps * the icon via `.is-on`; this file only styles. */ .pp-audio { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000; /* top-controls tier — above hero/body/petals (<=60), below preloader/intro */ display: grid; place-items: center; width: 46px; height: 46px; min-width: 44px; /* tap target floor */ min-height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(18, 16, 26, 0.32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #f6ead2; /* gold-cream ink, matches .scene-toggle__seg[aria-checked="true"] */ cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.6s var(--ui-ease); } /* Hidden through the envelope intro; fades in with the reveal the instant intro.js drops `intro-active` from . Opacity only — no layout shift on reveal. */ html.intro-active .pp-audio { opacity: 0; pointer-events: none; } .pp-audio:focus-visible { outline: 2px solid #f6ead2; outline-offset: 2px; } .pp-audio__ico { width: 20px; height: 20px; pointer-events: none; } /* off (slashed) icon shows by default, matching the button's default aria-label ("Play music"); js/audio.js toggles `.is-on` to swap to the plain note. */ .pp-audio__ico-on { display: none; } .pp-audio.is-on .pp-audio__ico-on { display: block; } .pp-audio.is-on .pp-audio__ico-off { display: none; } @media (prefers-reduced-motion: reduce) { .pp-audio { transition: none; } }