/* Celestial motion: progressive, finite entrances; optional ambient animation. */
.celestial-hero{position:relative;isolation:isolate}.celestial-hero-copy{position:relative;z-index:1}.celestial-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.sky-star{position:absolute;color:#fff0cd;font:normal 15px/1 Georgia;opacity:.45;text-shadow:0 0 10px #e9dbb877;animation:star-breathe 5s ease-in-out infinite alternate}.star-1{left:49%;top:13%;animation-delay:-2s;font-size:12px}.star-2{left:91%;top:16%;animation-delay:-4s}.star-3{left:61%;top:62%;font-size:10px;animation-delay:-1s}.star-4{left:39%;top:32%;animation-delay:-3s;font-size:9px}.star-5{left:80%;top:81%;animation-delay:-.5s;font-size:12px}.star-6{left:21%;top:9%;animation-delay:-2.5s;font-size:8px}.star-7{left:94%;top:56%;animation-delay:-1.5s;font-size:9px}
.moon-halo{position:absolute;width:34%;aspect-ratio:1;right:6%;top:9%;border-radius:50%;background:radial-gradient(circle,#eed5a820,transparent 70%);mix-blend-mode:screen;animation:moon-breathe 8s ease-in-out infinite alternate;pointer-events:none}.cloud-drift{position:absolute;left:-3%;right:-3%;bottom:-8%;height:32%;background:url('assets/celestial-banner.png') center bottom/100% auto no-repeat;opacity:.12;mask-image:linear-gradient(transparent,#000 75%);animation:cloud-float 24s ease-in-out infinite alternate}
.logo-orbit-wrap{width:140px;height:140px;position:relative;margin-bottom:13px}.logo-orbit-wrap .celestial-logo{margin:0}.logo-orbit{position:absolute;inset:9px -4px 12px;border-radius:50%;pointer-events:none;transform:rotate(-25deg)}.logo-orbit i{position:absolute;inset:0;display:block;color:#f8e1af;font:normal 13px/1 Georgia;animation:logo-travel 18s linear infinite;text-shadow:0 0 7px #f8e1af88}.logo-orbit i::first-letter{color:#f8e1af}
.motion-toggle{position:absolute;right:14px;top:14px;z-index:2;display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid #a9c8e23d;border-radius:20px;background:#081522bd;color:#d9e3ed;font:400 11px/1.4 var(--body)}.motion-toggle-symbol{font-size:13px;min-width:10px}.motion-toggle:disabled{cursor:default;opacity:.7}
.package-heading{position:relative}.package-celestial-icon{position:absolute;right:0;top:-9px;display:grid;place-items:center;width:46px;height:46px;color:var(--gold);background:#e1c99609;border:1px solid #dec59135;border-radius:12px}.package-celestial-icon svg{width:34px;height:34px}.package-card .package-index{min-height:27px;padding-top:5px}.package-card.is-selected .package-celestial-icon{background:#e1c99613;border-color:#dec59175}.package-price{transition:background-color .2s,border-color .2s}.scroll-enter{animation:gentle-arrival .58s cubic-bezier(.2,.7,.25,1) var(--arrival-delay,0ms) backwards}
.process-step{position:relative;overflow:visible}.process-step:not(:last-child)::after{content:'';position:absolute;left:calc(100% + 1px);right:auto;top:44px;width:18px;height:2px;background:linear-gradient(90deg,#d9bc80,#b9ddf1);border:0;transform:scaleX(0);transform-origin:left;opacity:.35;transition:transform .65s ease .2s,opacity .65s}.process-step.motion-seen:not(:last-child)::after{transform:scaleX(1);opacity:.9}.process-step.motion-seen .process-icon{border-color:#dec59199;transition:border-color .6s ease}
.sample-player{position:relative;width:100%;line-height:0}.sample-player video{display:block}.sample-play-button{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:1px solid #fff1c7b3;background:#091625c7;color:#ffe6b1;box-shadow:0 0 0 8px #e6c8940d;z-index:2}.sample-play-button svg{width:27px;height:27px;margin-left:3px}.sample-play-button::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid #e6c89490;animation:play-ripple 2.8s ease-out infinite}.sample-play-button[hidden]{display:none!important}.sample-play-button:disabled{opacity:.6}.sample-play-button:focus-visible{outline:3px solid #fff;outline-offset:5px}.zalo-arrive{animation:zalo-arrival .65s cubic-bezier(.2,.7,.25,1) .25s backwards}
.celestial-hero:not(.motion-in-view) .celestial-atmosphere *,.celestial-hero:not(.motion-in-view) .logo-orbit i,#types:not(.motion-in-view) .sample-play-button::after{animation-play-state:paused}
.effects-paused .celestial-atmosphere *,.effects-paused .logo-orbit i,.effects-paused .sample-play-button::after,.effects-background .celestial-atmosphere *,.effects-background .logo-orbit i,.effects-background .sample-play-button::after{animation-play-state:paused}
.effects-paused .scroll-enter,.effects-paused .zalo-arrive{animation:none}.effects-paused .process-step::after{transition:none}.effects-paused .sample-play-button::after{opacity:0}
@keyframes star-breathe{from{opacity:.22;transform:scale(.85)}to{opacity:.82;transform:scale(1.12)}}@keyframes moon-breathe{from{opacity:.35}to{opacity:.85}}@keyframes cloud-float{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}@keyframes logo-travel{0%{transform:rotate(0);opacity:0}7%,25%{opacity:.8}35%,100%{transform:rotate(360deg);opacity:0}}@keyframes gentle-arrival{from{opacity:.15;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes play-ripple{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(1.4);opacity:0}}@keyframes zalo-arrival{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.process-step:not(:last-child)::after{width:14px}}
@media(max-width:950px){.process-step:not(:last-child)::after{left:44px;top:100%;width:2px;height:17px;transform:scaleY(0);transform-origin:top;background:linear-gradient(#d9bc80,#b9ddf1)}.process-step.motion-seen:not(:last-child)::after{transform:scaleY(1)}}
@media(max-width:600px){.logo-orbit-wrap{width:116px;height:116px;margin-bottom:16px}.logo-orbit-wrap .celestial-logo{width:116px;height:116px}.sky-star{font-size:10px}.moon-halo{width:80%;right:-15%;top:20%;opacity:.4}.cloud-drift{opacity:.08;height:23%;background-size:auto 480px}.motion-toggle{right:10px;top:10px;min-height:36px;font-size:10px;padding:7px 9px}.package-celestial-icon{width:43px;height:43px}.package-celestial-icon svg{width:31px;height:31px}.sample-play-button{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.celestial-atmosphere *,.logo-orbit i,.sample-play-button::after,.scroll-enter,.zalo-arrive{animation:none!important;transition:none!important}.sample-play-button::after{display:none}.process-step::after,.process-icon,.package-price{transition:none!important}.style-card:hover{transform:none}}
/* Move only the artwork; the headline, logo and controls remain steady. */
.banner-art{position:absolute;inset:-2%;background:linear-gradient(90deg,#06102066,#07111e00 75%),url('assets/celestial-banner.png') center/cover no-repeat;transform-origin:72% 48%;animation:banner-drift 14s ease-in-out infinite alternate}
.celestial-atmosphere .cloud-drift{opacity:.18;animation-duration:18s}
@keyframes banner-drift{from{transform:scale(1) translate3d(-.5%,.3%,0)}to{transform:scale(1.085) translate3d(1%,-.5%,0)}}
@media(max-width:600px){.banner-art{background-image:linear-gradient(90deg,#07111ed9,#07111e70),url('assets/celestial-banner.png');background-position:65% center;transform-origin:65% 50%;animation-name:banner-drift-mobile}.celestial-atmosphere .cloud-drift{opacity:.10}}
@keyframes banner-drift-mobile{from{transform:scale(1) translate3d(-.5%,0,0)}to{transform:scale(1.06) translate3d(.5%,-.5%,0)}}