/* Keep the B frame visible until the sign performance has actually started. */
.hero-frame{--sakura-height:min(50vw,864px)}
.hero-frame .hero{min-height:max(1280px,calc(var(--sakura-height) * 1.55 + 370px));max-height:none}
.ai-stage{position:absolute;z-index:4;left:calc(50% - var(--sakura-height) * .05);top:max(110px,calc(24px + var(--sakura-height) * .174));width:calc(var(--sakura-height) * 1.84);height:calc(var(--sakura-height) * 1.55);transform:translateX(-50%);isolation:isolate;pointer-events:none}
.ai-floor{position:absolute;left:10%;right:10%;height:5%;top:93%;border-radius:50%;background:#325c3c20;filter:blur(12px);opacity:0;transition:opacity .6s}
.ai-arrival-frame{position:absolute;width:calc(var(--sakura-height) * 1928 / 640);aspect-ratio:1928/1072;left:50%;top:calc(var(--sakura-height) * -34 / 640);margin-left:calc(var(--sakura-height) * -964 / 640);opacity:0;transform-origin:50% 83%;will-change:transform,opacity}
.ai-arrival-frame>img,.ai-arrival-frame>video{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;user-select:none;pointer-events:none}
/* Both fixed sign assets add 100px above the unchanged 1928x1072 B coordinates. */
.ai-arrival-frame>#sakura-sign-video,.ai-arrival-frame>#sakura-final-poster{top:-9.328358209%;bottom:auto;height:109.328358209%}
#sakura-motion-video,#sakura-sign-video,#sakura-final-poster{visibility:hidden}
.ai-ready:not(.ai-arrived):not(.ai-static) .ai-arrival-frame{animation:sakura-ufo-arrival 2.2s cubic-bezier(.18,.65,.3,1) both}
.ai-arrived .ai-arrival-frame{opacity:1;transform:none;will-change:auto}
.ai-playing #sakura-arrival-poster{visibility:hidden}
.ai-playing #sakura-motion-video{visibility:visible}
.ai-sign-playing #sakura-arrival-poster,.ai-sign-playing #sakura-motion-video{visibility:hidden}
.ai-sign-playing #sakura-sign-video{visibility:visible}
.ai-arrived .ai-floor{opacity:1}
.ai-static .ai-arrival-frame{opacity:1;animation:none;transform:none;will-change:auto}
.ai-static #sakura-arrival-poster,.ai-static #sakura-motion-video,.ai-static #sakura-sign-video{visibility:hidden}
.ai-static #sakura-final-poster{visibility:visible}
.paused .ai-stage *,.paused .ai-stage :before{animation-play-state:paused!important;transition:none!important}
.hero .english-line{font-size:clamp(68px,8.3vw,137px);letter-spacing:-.055em}
.hero .hero-overline{letter-spacing:.18em}
@keyframes sakura-ufo-arrival{0%{opacity:0;transform:translate3d(23%,-32%,0) rotate(-8deg) scale(.38)}12%{opacity:1}65%{opacity:1;transform:translate3d(-1.2%,1%,0) rotate(-.8deg) scale(1.015)}84%{opacity:1;transform:translate3d(0,-.35%,0) rotate(0) scale(1)}100%{opacity:1;transform:none}}
@media(max-width:1000px){
 .hero-frame{--sakura-height:min(calc(clamp(740px,100svh,1150px) * .64),calc((100vw - 30px) * .99566))}
 .hero-frame .hero{height:auto;min-height:calc(var(--sakura-height) * 1.55 + 440px)}
 .ai-stage{top:220px;left:calc(50% - var(--sakura-height) * .05)}
 .hero .hero-copy{bottom:65px}
 .hero h1{font-size:clamp(36px,5vw,50px)}
 .hero .english-line{font-size:clamp(72px,10vw,100px)}
}
@media(max-width:900px){.hero-frame{--sakura-height:min(calc(clamp(740px,100svh,1150px) * .6),calc((100vw - 30px) * .99566))}}
@media(max-width:700px){
 .hero h1{font-size:40px}
}
@media(max-width:600px){
 .hero-frame{--sakura-height:min(calc(clamp(680px,100svh,900px) * .405),calc((100vw - 30px) * .99566))}
 .hero-frame .hero{min-height:calc(var(--sakura-height) * 1.55 + 440px)}
 .ai-stage{top:185px;left:calc(50% - var(--sakura-height) * .105)}
 .hero .hero-copy{bottom:73px}
 .hero h1{font-size:36px;line-height:1.3;letter-spacing:-.05em}
 .hero h1 span{display:block}
 .hero .english-line{font-size:15vw}
 .hero .hero-overline{font-size:9px}
}
@media(max-width:360px){.hero h1{font-size:33px}}
@media(prefers-reduced-motion:reduce){
 .ai-stage *{animation:none!important;transition:none!important}
 .ai-floor{opacity:1}
}