/* Page styles for Still Becoming — ported verbatim from the design's <helmet> block. */
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body)}
a{color:var(--color-accent-700)}a:hover{color:var(--color-accent-800)}
[data-reveal]{transition:opacity 1.1s ease,transform 1.1s ease}
h1,[data-reveal],#top p,header a,header span,footer a,footer span,section p{text-shadow:0 0 22px var(--color-bg),0 0 10px var(--color-bg),0 0 4px var(--color-bg)}
.btn{text-shadow:none;white-space:nowrap;flex-shrink:0}

/* Birthday note — the design toggles it in/out of the DOM; here it's shown by removing [hidden]. */
#note:not([hidden]){display:flex}
.note-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:oklch(0.94 0.11 104);color:oklch(0.72 0.17 88);font-family:var(--font-heading);font-size:18px;font-weight:700;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
.note-btn:hover{background:oklch(0.9 0.12 103)}

/* Welcome overlay — blurred, semi-transparent veil over the live page. Not in the design. */
.intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:clamp(20px,6vw,88px);background:color-mix(in srgb, var(--color-bg) 70%, transparent);-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);cursor:pointer;opacity:0;transition:opacity .6s ease}
.intro[hidden]{display:none}
.intro.is-on{opacity:1}
.intro:focus{outline:none}
.intro-card{max-width:680px;text-align:center;font-size:clamp(20px,2.2vw,26px);line-height:1.5;color:var(--color-text);text-wrap:pretty}
.intro-card p{margin:0 0 var(--space-4);text-shadow:0 0 22px var(--color-bg),0 0 10px var(--color-bg)}
.intro-title{font-family:var(--font-heading);font-weight:var(--font-heading-weight)}
.intro-card .intro-hint{margin:var(--space-8) 0 0;font-size:15px;color:var(--color-neutral-700)}
body.intro-open{overflow:hidden}

/* Sound toggle — fixed bottom-left so it's reachable at any scroll position. Not in the design. */
.sound-btn{position:fixed;z-index:10;left:calc(16px + env(safe-area-inset-left, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--color-divider);border-radius:999px;background:var(--color-surface);color:var(--color-text);cursor:pointer;box-shadow:var(--shadow-md)}
.sound-btn:hover{background:color-mix(in srgb, var(--color-text) 7%, var(--color-surface))}
.sound-btn .ic-on{display:none}
.sound-btn[aria-pressed="true"] .ic-on{display:block}
.sound-btn[aria-pressed="true"] .ic-off{display:none}
.sound-btn[aria-pressed="true"]{color:var(--color-accent-700)}
/* On phones the footer runs to the left edge — give it room so the fixed button never covers the links. */
@media (max-width: 600px){ footer{padding-bottom:calc(var(--space-8) + 56px) !important} }