/* A tactile black-and-rose collage; the existing world still waits for the note. */
.birthday-intro{display:none;background:#120f13;color:#fae9f3;isolation:isolate}
html.intro-enabled{scroll-behavior:auto}
.intro-enabled body{overflow:hidden}
.intro-enabled #birthday-world{display:none}
.intro-enabled .birthday-intro{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:100vh;min-height:100svh;overflow:hidden}
.intro-cover{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;width:100%;min-width:0;min-height:100vh;min-height:100svh;padding:28px 0;overflow:hidden}
.cover-art{--art-size:min(94vw,820px,91svh);position:relative;width:var(--art-size);height:var(--art-size);flex-shrink:0;animation:collage-drift 10s ease-in-out infinite}
.cover-art:before{content:'';position:absolute;inset:30% 15% 19%;background:#e8becd;clip-path:polygon(1% 1%,99% 0,100% 98%,0 100%)}
.cover-collage{position:relative;z-index:1;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.cover-center{position:absolute;z-index:2;left:52%;top:55%;transform:translate(-50%,-50%);width:62%;text-align:center;color:#712340}
#cover-title{font-weight:400;line-height:1.05;margin:0;color:#742746}
#cover-title span{display:block;font-family:var(--serif);font-size:clamp(19px,calc(var(--art-size)*.044),37px);font-weight:500;letter-spacing:.19em;padding-left:.19em;color:#79374e}
#cover-title span+span{font-family:var(--hand);font-size:calc(var(--art-size)*.15);font-weight:400;letter-spacing:.055em;padding-left:.055em;line-height:1.15;margin-top:calc(var(--art-size)*.018);color:#762345}
.cover-open{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:134px;min-height:50px;margin-top:calc(var(--art-size)*.035);padding:10px 25px;border-radius:2px;background:#361727;color:#ffe5f0;font-size:17px;letter-spacing:2px;transform:rotate(-2deg);transition:background .2s,transform .2s}
.cover-open span{font:24px Georgia,serif;line-height:1}
.cover-open:hover{background:#5c2440;transform:translateY(-2px) rotate(-2deg)}
.cover-open:active{transform:scale(.97) rotate(-2deg)}
.cover-open:focus-visible{outline:3px solid #762345;outline-offset:6px}
.cover-open:disabled{cursor:wait;opacity:.75}
@keyframes collage-drift{0%,100%{transform:translateY(2px) rotate(-.5deg)}50%{transform:translateY(-5px) rotate(.5deg)}}
.intro-paused .cover-art{animation-play-state:paused}
.intro-static .cover-art{animation:none}
.prologue{position:relative;width:100%;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:110px 28px 130px;background:#120f13}
.prologue:before,.prologue:after{content:'✧';position:absolute;color:#b97a9b;font:24px Georgia,serif;pointer-events:none;opacity:.4}
.prologue:before{top:22%;left:12%}.prologue:after{bottom:22%;right:12%;font-size:16px;opacity:.3}
.prologue-tools{position:absolute;top:max(20px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.prologue-tools button,.prologue-footer button{background:transparent;min-height:44px;padding:8px 0;color:#cfafc0;font-size:13px;letter-spacing:.6px}
.prologue-tools button:hover,.prologue-footer button:hover{color:#ffe0ee}
.intro-music-toggle{display:flex;align-items:center;gap:9px}.intro-music-toggle>span:first-child{font-size:22px;color:#f0b2cf}.intro-music-toggle .music-label{font:11px var(--serif);letter-spacing:.3px}
.prologue-stage{position:relative;width:min(100%,600px)}
.prologue-text{font:400 clamp(20px,2.25vw,28px)/1.95 var(--serif);letter-spacing:.045em;line-break:strict;overflow-wrap:break-word;text-align:left;color:#f1dfe9;cursor:pointer}
.prologue-char{opacity:0}.prologue-ending{white-space:nowrap;color:#f1a4c5}
.prologue-footer{position:absolute;bottom:max(36px,env(safe-area-inset-bottom));left:28px;right:28px;display:flex;flex-direction:column;align-items:center;gap:16px}
.prologue-dots{display:flex;gap:10px;height:8px;align-items:center}.prologue-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#624353;transition:background .3s}.prologue-dots i.active{background:#f1a4c5}
.prologue-footer button{min-width:100px;color:#b993a8;font-size:12px}
.prologue-footer button[aria-disabled="true"]{opacity:.35;cursor:default}
@media(min-width:1000px){.prologue-tools{max-width:1100px;margin:auto;top:30px}.prologue-footer{bottom:50px}}
@media(max-width:600px){
 .intro-cover{padding:24px 0 50px}
 .cover-art{--art-size:min(114vw,700px,88svh)}
 .cover-open{min-height:46px;min-width:118px;font-size:16px;padding:9px 20px;gap:14px}
 .prologue{padding:100px 28px 125px}.prologue-text{font-size:20px;line-height:1.95;letter-spacing:.025em}
 .prologue:before{top:17%;left:15%}.prologue:after{bottom:21%;right:15%}
 .prologue-tools{left:22px;right:22px}.prologue-footer{bottom:max(25px,env(safe-area-inset-bottom))}
}
@media(max-height:650px){.intro-cover{padding:15px 0}.cover-art{--art-size:min(110vw,88svh)}.cover-open{margin-top:calc(var(--art-size)*.025);min-height:44px}.prologue{padding-top:85px;padding-bottom:110px}.prologue-text{font-size:18px;line-height:1.85}.prologue:before,.prologue:after{display:none}.prologue-footer{gap:8px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.cover-art{animation:none}.cover-open,.prologue-dots i{transition:none}}

/* The preface is part of the particle stage, with only small navigation controls. */
html.particle-preface-active body{overflow:hidden}
html.particle-preface-active #birthday-world{height:100svh;overflow:clip}
html.particle-preface-active main{height:100svh;overflow:clip}
[data-prelude="true"].opening-story{height:100svh;min-height:0}
[data-prelude="true"] .opening-sticky{overflow:clip}
.particle-preface-controls{display:none;position:absolute;z-index:6;bottom:90px;left:20px;right:20px;align-items:center;justify-content:center;gap:25px}
.particle-preface-controls button{min-height:46px;padding:10px 15px;color:#e9bad1;background:transparent;font-size:13px;letter-spacing:.7px}
.particle-preface-controls button:first-child{background:#4b273d;border:1px solid #85516d;border-radius:4px}
.particle-preface-controls button:disabled{opacity:.4}
[data-prelude="true"] .particle-preface-controls{display:flex}
[data-prelude="true"] .ritual-panel,[data-prelude="true"] .opening-top-note,[data-prelude="true"] .opening-controls>a,[data-prelude="true"] #ritual-replay{display:none}
[data-prelude="true"] .scene-fallback{padding-bottom:0}
[data-prelude="true"] .particle-title-fallback{width:min(95vw,82svh);max-height:66svh;object-fit:contain}
@media(max-width:720px){.particle-preface-controls{bottom:100px;gap:18px}.particle-preface-controls button{font-size:13px}[data-prelude="true"] .particle-title-fallback{width:100%}}
@media(max-height:650px){.particle-preface-controls{bottom:65px}}