.hero-opening{display:none;pointer-events:none}
.sky-clouds{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky-clouds img{position:absolute;width:clamp(240px,40vw,650px);height:auto;opacity:.48;animation:sky-drift 32s ease-in-out infinite alternate;will-change:transform}
.sky-clouds img:first-child{left:-13%;top:3%}.sky-clouds img:last-child{right:-15%;top:18%;width:clamp(210px,34vw,560px);animation-duration:39s;animation-delay:-17s;opacity:.35}
@keyframes sky-drift{from{transform:translateX(-8%) translateY(0)}to{transform:translateX(36%) translateY(15px)}}
.kv-intro .hero-opening{display:flex;position:absolute;top:0;left:0;width:100%;height:min(680px,calc(100svh - 90px));min-height:420px;align-items:center;justify-content:center;z-index:4;background:#fffdfb;overflow:hidden}
.opening-picture{position:relative;width:min(100%,650px);aspect-ratio:1;flex:none}
.opening-picture img{width:100%;height:100%;object-fit:cover;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 96%,transparent)}
.touch-rays{position:absolute;left:32%;top:17%;width:80px;height:90px;transform:rotate(-5deg)}
.touch-rays i{position:absolute;left:0;bottom:0;width:11px;height:48px;background:#ec0e7c;border-radius:70% 70% 40% 40%;opacity:0;transform-origin:center bottom}
.touch-rays i:nth-child(2){background:#29a9e0;left:10px;height:42px}.touch-rays i:nth-child(3){background:#29a9e0;left:15px;height:31px}
.kv-intro .hero-center,.kv-intro .hero-bottom,.kv-intro .hero-art,.kv-intro .spark{opacity:0}
.kv-intro .support-dock{visibility:hidden}
.kv-playing .hero-opening{animation:camera-to-sky 1.65s 1.5s cubic-bezier(.4,0,.2,1) both}
.kv-playing .touch-rays i{animation:touch-pop .6s 1s cubic-bezier(.2,.8,.3,1) both;--angle:-12deg}
.kv-playing .touch-rays i:nth-child(2){animation-delay:1.15s;--angle:28deg}
.kv-playing .touch-rays i:nth-child(3){animation-delay:1.3s;--angle:62deg}
.kv-playing .hero-center{animation:sky-title .85s 2.35s both}
.kv-playing .hero-art,.kv-playing .hero-bottom{animation:sky-settle .8s 2.5s both}
@keyframes touch-pop{0%{opacity:0;transform:rotate(var(--angle)) scale(.15) translateY(0)}35%{opacity:1}75%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) scale(1) translateY(-30px)}}
@keyframes camera-to-sky{0%{transform:translateY(0);opacity:1}65%{opacity:1}100%{transform:translateY(75%);opacity:0}}
@keyframes sky-title{from{opacity:0;transform:translateY(-45px)}to{opacity:1;transform:translateY(0)}}
@keyframes sky-settle{from{opacity:0}to{opacity:1}}
@media(min-width:761px){.opening-picture{width:min(95%,1100px);aspect-ratio:1.8}.opening-picture img{object-fit:contain;mask-image:none}.touch-rays{left:26%;top:11%}}
@media(prefers-reduced-motion:reduce){.sky-clouds img{animation:none;will-change:auto}.hero-opening{display:none!important}.kv-intro .hero-center,.kv-intro .hero-art,.kv-intro .hero-bottom{opacity:1;animation:none}.kv-intro .support-dock{visibility:visible}}

.opening-picture picture{display:contents}
.kv-intro:not(.kv-playing) .hero-center{animation:none}
.kv-complete .hero-center{animation:none;opacity:1;transform:none}
.touch-rays{left:32%;top:25%;transform:translateY(-100%)}
@media(min-width:761px){.touch-rays{left:26%;top:22%}}
.kv-intro .hero-opening{background:linear-gradient(to bottom,rgba(255,253,251,0),#fffdfb 12%,#fffdfb 88%,rgba(255,253,251,0))}
@media(min-width:761px){.opening-picture img{mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}.opening-picture{mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 90%,transparent)}}

/* Desktop keeps the complete upper image visible, without an opening overlay. */
@media(min-width:761px){
 .hero-center{animation:none}
 .hero-art{transform:none!important;mask-image:none}
 .hero-art img{inset:20px 0 auto;width:100%;height:auto;object-fit:contain;object-position:center top;mask-image:none}
 .hero-opening{display:none!important}
}
@media(min-width:761px){
 .sky-clouds img:first-child{left:36%;top:-9%;width:28vw}
 .sky-clouds img:last-child{right:34%;top:-3%;width:24vw}
}