/* Opening screen (js/ui/intro.js). Sky, type and gold follow playalice.com's title page.
   Every entrance animation ends on the element's base style, so with animations off (reduced motion) the
   finished frame shows at once. */
@font-face{font-family:'Intro Serif SC';src:url('./fonts/IntroSerifSC.woff2') format('woff2');font-weight:400 700;font-display:block}
body.intro-open{overflow:hidden}
.intro{--cream:#f6eedc;--gold:#e8c27a;--night:#0f1a3a;position:fixed;inset:0;z-index:1000;overflow:hidden;color:var(--cream);background:var(--night) url('./assets/intro/night.webp') center/cover no-repeat;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Noto Sans CJK SC',sans-serif;-webkit-tap-highlight-color:transparent;transition:opacity .5s}
.intro::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 30%,#0a1230b0 100%);pointer-events:none}
.intro.is-leaving{opacity:0}
.intro button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.intro :focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.intro .intro-sky{position:absolute;inset:0;pointer-events:none;z-index:1}
.intro .intro-bar{position:absolute;z-index:5;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));display:flex;gap:10px}
.intro .intro-bar button{min-width:44px;height:44px;border-radius:22px;border:1px solid #f6eedc59;background:#0f1a3a66;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:0 16px;font-size:13px;letter-spacing:.08em;display:grid;place-items:center}
.intro .intro-bar .intro-sound{width:44px;padding:0}.intro .intro-sound svg{width:20px;height:20px}
.intro .intro-bar button:hover{background:#f6eedc22}

.intro .intro-scene{position:absolute;inset:0;z-index:2;cursor:pointer}
.intro .intro-world{position:absolute;inset:0}
/* Phone: words on top, the planet below. Wide screens (media query further down): playalice.com's title page. */
.intro .intro-words{position:absolute;left:0;right:0;top:calc(9vh + env(safe-area-inset-top));text-align:center;pointer-events:none;transition:opacity .6s}
.intro .intro-brand{margin:0;font-family:'Intro Serif SC',serif;font-size:13px;letter-spacing:.55em;margin-right:-.55em;opacity:.78;animation:intro-rise 1.4s .4s both}
.intro .intro-title{margin:.04em 0 0;font:500 clamp(68px,23vw,200px)/1.15 Cormorant,'Intro Serif SC',serif;letter-spacing:.06em;color:transparent;white-space:nowrap}
/* After the stars gather, a faint painted fill settles under them so the word reads at a glance. */
.intro .intro-title span{color:#fff1d433;text-shadow:0 0 24px #ffd9902e;animation:intro-fill 1.6s 2.6s both}
.intro .intro-tag{margin:0;font:italic 400 clamp(20px,5.4vw,30px)/1.3 Cormorant,Georgia,serif;letter-spacing:.03em;opacity:.9;animation:intro-rise 1.2s 2.9s both}
.intro .intro-rule{display:flex;align-items:center;gap:12px;width:min(78vw,340px);margin:14px auto 12px;color:var(--gold);font-size:12px;animation:intro-rise 1.2s 3s both}
.intro .intro-rule::before,.intro .intro-rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#e8c27a99)}
.intro .intro-rule::after{transform:scaleX(-1)}
.intro .intro-sub{margin:0;font:italic 400 clamp(15px,4vw,19px)/1.5 Cormorant,'Intro Serif SC',serif;letter-spacing:.06em;opacity:.85;animation:intro-rise 1.2s 3.1s both}
.intro .intro-planet{position:absolute;left:0;right:0;margin:0 auto;bottom:calc(11vh + env(safe-area-inset-bottom));width:min(84vw,44vh);pointer-events:none;animation:intro-fade 1.6s .2s both}
.intro .intro-planet img,.intro .intro-planet video{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 30px #02061866)}
.intro .intro-planet{--float:intro-float 7s ease-in-out infinite}
.intro .intro-planet>img{animation:var(--float)}
.intro .intro-planet video{position:absolute;inset:0;height:100%;object-fit:contain;opacity:0;transition:opacity .8s;animation:var(--float)}
.intro .intro-planet.has-video video{opacity:1}
.intro .intro-planet.has-video>img{opacity:0;transition:opacity .8s .2s}
/* The root arch lights up when the key reaches it. */
.intro .intro-hole{position:absolute;left:82%;top:37%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff1c4 0%,#ffd98a88 35%,transparent 70%);opacity:0;transition:opacity .5s}
.intro.is-arch .intro-hole{opacity:1}
.intro.is-opening .intro-brand,.intro.is-opening .intro-tag,.intro.is-opening .intro-rule,.intro.is-opening .intro-sub{opacity:0;animation:none;transition:opacity .5s}

/* The little door comes in after the camera dives into the arch. */
.intro .intro-door-wrap{position:absolute;left:0;right:0;top:50%;margin-top:calc(min(34vh,56vw,380px) / -2);height:min(34vh,56vw,380px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.intro.is-door .intro-door-wrap{opacity:1;visibility:visible;transition:opacity .6s}
.intro .intro-door{position:relative;height:100%;aspect-ratio:400/401;flex:none;z-index:2;filter:drop-shadow(0 18px 22px #04081a80)}
.intro .intro-door::before{content:'';position:absolute;left:10%;right:10%;top:5%;bottom:-6%;background:radial-gradient(ellipse at 50% 60%,#ffe2a0aa,transparent 65%);opacity:0;transition:opacity 1s;z-index:-1}
.intro .intro-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.intro .intro-garden,.intro .intro-leaf{position:absolute;left:34.25%;top:12.72%;width:31%;height:84.04%}
.intro .intro-garden{background-size:auto 100%;background-position:50% 50%;border-radius:50% 50% 0 0/18.4% 18.4% 0 0;filter:brightness(.55) saturate(.8);transition:filter 1.2s;z-index:1}
.intro .intro-garden::after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 50% 70%,#fff3c8,transparent 70%);opacity:0;transition:opacity 1.2s}
.intro .intro-leaf{z-index:3;transform-origin:100% 50%;transform:perspective(900px) rotateY(0)}
.intro .intro-alice{height:66%;margin-right:-7%;z-index:3;filter:drop-shadow(0 10px 10px #04081a70);}
.intro .intro-bunny{height:50%;margin-left:-5%;z-index:3;filter:drop-shadow(0 8px 10px #04081a70);}
.intro .intro-key{position:fixed;left:0;top:0;height:80px;opacity:0;pointer-events:none;z-index:4;filter:drop-shadow(0 0 14px #ffd27acc);will-change:transform}
.intro .intro-tap{position:absolute;left:0;right:0;margin:auto;width:max-content;bottom:calc(5.5vh + env(safe-area-inset-bottom));min-height:48px;padding:10px 22px;border:0;background:none;white-space:nowrap;color:var(--gold)!important;font-size:13px!important;letter-spacing:.24em;animation:intro-rise 1s 3.4s both,intro-breathe 2.6s 4.4s ease-in-out infinite;transition:opacity .4s}
.intro .intro-caption{position:absolute;left:24px;right:24px;bottom:calc(6vh + env(safe-area-inset-bottom));margin:0;text-align:center;font:500 clamp(16px,4.2vw,24px)/1.6 'Intro Serif SC',serif;letter-spacing:.05em;opacity:0;transition:opacity .6s .3s;text-shadow:0 2px 12px #050a1ecc;pointer-events:none}

.intro.is-opening .intro-tap{opacity:0;animation:none}
.intro.is-opening .intro-title span{color:transparent;text-shadow:none;transition:color .5s,text-shadow .5s}
.intro.is-speaking .intro-caption{opacity:1}
.intro.is-open .intro-door::before{opacity:1}
.intro.is-open .intro-garden{filter:brightness(1.15) saturate(1.05)}
.intro.is-open .intro-garden::after{opacity:.75}
.intro.is-open .intro-leaf{transform:perspective(900px) rotateY(-112deg)}
.intro.intro-reduced.is-open .intro-leaf{opacity:0}

/* Three promo pages */
.intro .intro-pages{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;padding:calc(68px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));animation:intro-fade .8s both}
.intro .intro-pages[hidden]{display:none}
.intro .intro-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.intro .intro-track::-webkit-scrollbar{display:none}
.intro .intro-page{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center;gap:22px;padding:0 24px;text-align:center;min-height:0}
.intro .intro-visual{display:grid;place-items:center;min-height:0;height:100%;padding:24px 0 10px}
.intro .intro-text{max-width:34em;margin:0 auto}
.intro .intro-eyebrow{margin:0 0 10px;color:var(--gold);font-size:12px;letter-spacing:.22em}
.intro .intro-text h2{margin:0 0 12px;font:500 clamp(24px,6.4vw,46px)/1.4 'Intro Serif SC','Songti SC',serif;letter-spacing:.03em;text-wrap:balance;color:var(--cream)}
.intro .intro-text p:last-child{margin:0;font-size:15px;line-height:1.85;color:#f6eedcc4}
.intro .intro-nav{display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 24px 0}
.intro .intro-dots{display:flex;gap:8px}
.intro .intro-dots span{width:14px;height:3px;border-radius:2px;background:#f6eedc40;transition:width .3s,background .3s}
.intro .intro-dots .active{width:38px;background:var(--gold)}
.intro .intro-next{min-width:220px;min-height:54px;border:0;border-radius:12px;background:var(--cream);color:#1b2547!important;font-size:16px!important;font-weight:600;letter-spacing:.06em;display:inline-flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 10px 30px #02061866}
.intro .intro-next.is-final{background:var(--gold)}
.intro .intro-next:hover{filter:brightness(1.05)}

.intro .intro-card{position:relative;margin:0;width:min(84vw,380px);background:#fbf5e6;color:#3e4438;border:6px solid #fff;border-radius:16px;box-shadow:0 22px 50px #02061880;text-align:left}
.intro .play-card{width:min(84vw,400px,52vh)}
.intro .play-stage{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px 10px 4px 4px;background-size:cover;background-position:50% 30%}
.intro .play-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#f4e8c855)}
.intro .pc-door{position:absolute;left:50%;bottom:4%;height:64%;transform:translateX(-30%)}
.intro .pc-alice{position:absolute;left:4%;bottom:0;height:84%;transform-origin:50% 100%;animation:intro-sway 3.2s ease-in-out infinite}
.intro .pc-bunny{position:absolute;right:-3%;bottom:0;height:52%;animation:intro-sway 2.6s .6s ease-in-out infinite reverse}
.intro .play-card figcaption{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px 14px}
.intro .play-card strong{font:500 34px/1 Cormorant,Georgia,serif}
.intro .play-card figcaption span{font-size:12px;color:#85826f}
.intro .word-card{padding:22px 22px 24px}
.intro .wc-head{display:flex;justify-content:space-between;align-items:center}
.intro .wc-head strong{font:500 46px/1.05 Cormorant,Georgia,serif}
.intro .wc-play{width:52px;height:52px;border-radius:50%;border:0;background:#53634b;color:#fffaf0!important;display:grid;place-items:center}
.intro .wc-play svg{width:24px;height:24px}
.intro .wc-ipa{margin:6px 0 14px;font-size:13px;color:#85826f}
.intro .wc-wave{display:flex;align-items:center;gap:3px;height:36px;margin-bottom:12px}
.intro .wc-wave i{display:block;width:3px;border-radius:2px;background:#ad8755;opacity:.55;transform-origin:50% 50%}
.intro .word-card:has(.is-playing) .wc-wave i{opacity:1;animation:intro-wave .7s calc(var(--i)*-37ms) ease-in-out infinite alternate}
.intro .wc-ex{margin:0 0 8px;font:21px/1.4 Cormorant,Georgia,serif}
.intro .wc-ex mark{background:none;color:inherit;border-bottom:2px solid #c9995c}
.intro .wc-zh{margin:0;font-size:13px;line-height:1.7;color:#85826f;padding-right:60px}
.intro .wc-alice{position:absolute;right:-28px;bottom:-44px;height:100px}
.intro .wc-ex{padding-right:22px}
.intro .plan-card{padding:24px 24px 26px}
.intro .pl-sample{position:absolute;top:12px;left:16px;font-size:10px;letter-spacing:.14em;color:#a59a7e;border:1px solid #d9cfb9;border-radius:3px;padding:1px 6px}
.intro .pl-days{margin-top:10px;display:flex;align-items:baseline;gap:10px;color:#53634b}
.intro .pl-days small{font-size:14px;color:#6c6a59}
.intro .pl-days strong{font:500 92px/1 Cormorant,Georgia,serif}
.intro .pl-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #e1d8c4;margin-top:10px;padding-top:12px;font-size:14px}
.intro .pl-row strong{font:500 30px/1 Cormorant,Georgia,serif;color:#53634b}
.intro .pl-week{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.intro .pl-week i{width:22px;height:22px;border-radius:50%;border:1px solid #d1c8b3}
.intro .pl-week i.lit{background:#53634b;border-color:#53634b}
.intro .pl-bunny{position:absolute;right:-30px;top:-62px;height:126px}
.intro .pl-alice{position:absolute;left:-34px;bottom:-40px;height:112px;transform:scaleX(-1)}

/* Wide screens: the playalice.com title layout, words left and the door scene right; pages side by side. */
@media (min-width:760px) and (min-aspect-ratio:5/4){
 .intro .intro-words{left:7vw;right:auto;top:50%;width:48vw;transform:translateY(-55%);text-align:left}
 .intro .intro-brand{font-size:clamp(13px,1.1vw,18px)}
 .intro .intro-title{font-size:clamp(100px,11.5vw,240px)}
 .intro .intro-tag{font-size:clamp(24px,2.3vw,40px)}
 .intro .intro-rule{margin:18px 0 16px;width:min(40vw,560px)}
 .intro .intro-sub{font-size:clamp(17px,1.5vw,26px)}
 .intro .intro-planet{left:auto;right:5vw;bottom:auto;top:50%;width:min(40vw,74vh);transform:translateY(-50%)}
 .intro .intro-tap{bottom:5vh;font-size:15px!important}
 .intro .intro-caption{bottom:8vh;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:90vw}
 .intro .intro-pages{padding-top:80px}
 .intro .intro-page{grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6vw;padding:0 8vw;text-align:left}
 .intro .intro-text{margin:0;max-width:30em}
 .intro .intro-text h2{font-size:clamp(30px,2.9vw,50px)}
 .intro .intro-text p:last-child{font-size:17px}
 .intro .intro-card{width:min(36vw,440px)}
 .intro .play-card{width:min(38vw,520px,62vh)}
 .intro .intro-visual{padding:0}
}
/* Short phones: tighten the door scene and the cards. */
@media (max-height:700px) and (max-aspect-ratio:5/4){
 .intro .intro-words{top:calc(64px + env(safe-area-inset-top))}
 .intro .intro-planet{width:min(76vw,40vh);bottom:calc(10vh + env(safe-area-inset-bottom))}
 .intro .intro-rule{margin:8px auto}
 .intro .intro-page{gap:12px}
 .intro .play-card{width:min(78vw,44vh)}
 .intro .word-card,.intro .plan-card{padding:16px 18px}
 .intro .pl-days strong{font-size:64px}
 .intro .wc-head strong{font-size:38px}
 .intro .wc-ex{font-size:18px}
 .intro .wc-zh{display:none}
 .intro .wc-wave{height:26px;margin-bottom:6px}
 .intro .intro-text p:last-child{font-size:14px;line-height:1.7}
}

@keyframes intro-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes intro-fill{from{color:transparent;text-shadow:none}}
@keyframes intro-fade{from{opacity:0}}
@keyframes intro-float{50%{transform:translateY(-10px) rotate(-.6deg)}}
@keyframes intro-breathe{50%{opacity:.55}}
@keyframes intro-sway{50%{transform:rotate(-2.5deg) translateY(-2px)}}
@keyframes intro-wave{to{transform:scaleY(.35)}}
.intro.intro-reduced *,.intro.intro-reduced{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.intro *,.intro{animation:none!important;transition:none!important}}
.replay-intro{margin-top:10px}