@font-face{font-family:MischiefDisplay;src:url('assets/studio/display.ttf') format('truetype');font-display:swap}
@font-face{font-family:MischiefSans;src:url('assets/studio/sans.ttf') format('truetype');font-display:swap}
#opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#07070a;color:#fff;overflow:hidden}
.opening-stage{position:relative;width:min(100%,460px);height:100dvh;max-height:960px;overflow:hidden;isolation:isolate;background:#07070a}
.studio-ident,.book-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 24px;overflow:hidden}
.studio-ident{font-family:MischiefSans,Arial,sans-serif;z-index:2;background:#07070a}
.studio-rift{position:absolute;inset:-5%;background:url('assets/studio/rupture.webp') 66% 50%/auto 100% no-repeat;opacity:.85;z-index:-1;animation:riftOpen 850ms cubic-bezier(.2,.75,.2,1) both}
.studio-ident:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#07070a22,#07070a22 65%,#07070ad9)}
.studio-kicker{font-size:9px;letter-spacing:.27em;text-transform:uppercase;color:#b7b0c5;margin:0 0 24px;animation:identIn 500ms 200ms both}
.studio-wordmark{width:100%;text-align:left;font-family:MischiefDisplay,Impact,'Arial Narrow',sans-serif;font-size:clamp(52px,17vw,81px);line-height:1.04;letter-spacing:-.015em;font-weight:400;text-shadow:2px 1px #ff34ca,-2px -1px #23e9ff;margin:0;animation:identIn 600ms 180ms both,identOffset 450ms 700ms both}
.studio-wordmark span{display:block}.studio-wordmark i{font-style:normal;color:#d9ff64;text-shadow:none}
.studio-signoff{align-self:flex-start;font-size:13px;line-height:1.6;margin-top:23px;color:#f3edf7;animation:identIn 550ms 560ms both}
.studio-signoff b{display:block;font-weight:400}.studio-rule{height:2px;width:48px;align-self:flex-start;background:linear-gradient(90deg,#ff34ca,#25eeff);margin-top:20px;transform-origin:left;animation:identIn 500ms 680ms both}
#opening-skip{position:absolute;right:22px;bottom:calc(25px + env(safe-area-inset-bottom));min-height:44px;min-width:65px;border:1px solid #ffffff30;border-radius:22px;background:#08080b80;color:#ccc2d4;font:11px MischiefSans,Arial,sans-serif;padding:8px 17px}
#opening[data-phase=title] .studio-ident{display:none}
#opening[data-phase=studio] .book-title{visibility:hidden}
.book-title{background:#240832 url('assets/library-background.png') center/cover;justify-content:space-between;padding:calc(8vh + env(safe-area-inset-top)) 27px calc(33px + env(safe-area-inset-bottom));animation:bookArrival 650ms ease-out both}
.book-title:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#21052918,#2308320a 28%,#25062888 65%,#19041ee6)}
.title-logo{display:block;width:100%;max-width:360px;mix-blend-mode:screen;filter:drop-shadow(0 5px 18px #f64aa84d);animation:titleBreathe 6s ease-in-out infinite;aspect-ratio:3/2;object-fit:contain}
.title-message{text-align:center;margin:auto 0 17px;color:#fff0c8;text-shadow:0 2px 8px #2b082c;font:italic 22px/1.35 Georgia,serif;letter-spacing:.01em}
.title-message span{display:block}
.title-bottom{width:100%;text-align:center;position:relative;z-index:3}
.title-loader{margin:0 auto 24px;width:78%;max-width:265px}
.title-loader p{font-size:10px;letter-spacing:.1em;color:#ffe7b9;min-height:14px;margin:0 0 9px}
.title-track{height:8px;border-radius:10px;border:1px solid #ffcf8980;background:#220625bd;overflow:hidden;box-shadow:0 0 14px #ef37ac22}
#opening-progress{height:100%;width:0;background:linear-gradient(90deg,#da249c,#ff86b4,#ffe3a0);border-radius:10px;transition:width 220ms ease-out}
#opening-play,#opening-retry{width:100%;min-height:56px;font-size:20px;margin:0}
#opening-play:disabled{opacity:.55}
.title-studio{margin:20px 0 0;font:9px MischiefSans,Arial,sans-serif;letter-spacing:.18em;color:#dcb5d3;text-transform:uppercase}
.title-studio b{color:#fff1dd;font-weight:500}.title-petals{position:absolute;inset:0;pointer-events:none;z-index:1}
.title-petals i{position:absolute;width:9px;height:15px;background:linear-gradient(140deg,#ffb0d0,#eb3283 60%,#8b174e);border-radius:80% 0 75% 20%;left:var(--left);top:-8%;opacity:0;box-shadow:0 0 9px #fd61b84d;animation:petalDrift var(--duration) linear var(--delay) infinite}
#opening.leaving{opacity:0;transition:opacity 300ms ease;pointer-events:none}
.goal-collect-burst{position:fixed;z-index:50;font-weight:900;font-size:16px;color:#fff3b5;text-shadow:0 2px 4px #551447,0 0 8px #fa4ea9;pointer-events:none;animation:collectRise 750ms ease-out both}
@keyframes riftOpen{0%{clip-path:polygon(76% 45%,77% 44%,30% 76%,29% 77%);transform:scale(1.15)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:scale(1)}}
@keyframes identIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes identOffset{0%,100%{transform:none}30%{transform:translateX(2px);text-shadow:-3px 0 #ff34ca,3px 0 #23e9ff}60%{transform:translateX(-1px)}}
@keyframes bookArrival{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes titleBreathe{50%{transform:translateY(-5px);filter:drop-shadow(0 5px 23px #f64aa878)}}
@keyframes petalDrift{10%{opacity:.65}90%{opacity:.5}to{top:105%;transform:translateX(35px) rotate(280deg);opacity:0}}
@keyframes collectRise{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}65%{opacity:1}100%{opacity:0;transform:translate(-50%,-29px) scale(.9)}}
@media(max-height:620px){.book-title{padding-top:4vh;padding-bottom:20px}.title-logo{max-width:265px}.title-message{font-size:18px;margin-bottom:12px}.title-loader{margin-bottom:14px}.title-studio{margin-top:12px}.studio-kicker{margin-bottom:16px}.studio-signoff{margin-top:18px}}
@media(prefers-reduced-motion:reduce){#opening *,#opening *:before,#opening *:after,.goal-collect-burst{animation:none!important;transition:none!important}.title-petals{display:none}.goal-collect-burst{transform:translateX(-50%)}}