/* Sky colours are registered so the browser can glide between them as the hour changes */
@property --s1{syntax:'<color>';inherits:true;initial-value:#03051f}
@property --s2{syntax:'<color>';inherits:true;initial-value:#0b1158}
@property --s3{syntax:'<color>';inherits:true;initial-value:#2a2f8f}
@property --s4{syntax:'<color>';inherits:true;initial-value:#e9a27a}
@property --core{syntax:'<color>';inherits:true;initial-value:#fff3dc}
@property --g1{syntax:'<color>';inherits:true;initial-value:#ffd59a}
@property --g2{syntax:'<color>';inherits:true;initial-value:#ff9f73}
@property --stars{syntax:'<number>';inherits:true;initial-value:0}
@property --clouds{syntax:'<number>';inherits:true;initial-value:0}
@property --land{syntax:'<number>';inherits:true;initial-value:1}
.sky-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;
 transition:--s1 4s,--s2 4s,--s3 4s,--s4 4s,--core 4s,--g1 4s,--g2 4s,--stars 4s,--clouds 4s,--land 4s}

/* ---------- SKY ---------- */
.sky-hero .sky{position:absolute;inset:0;z-index:-4;background:linear-gradient(var(--s1) 0%,var(--s2) 40%,var(--s3) 72%,var(--s4) 100%)}
.sky-hero .sky::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 50% 42%,color-mix(in srgb,var(--g1) 35%,transparent),transparent 70%)}
.sky-hero .stars{position:absolute;inset:0;z-index:-3;opacity:var(--stars);pointer-events:none}
.sky-hero .stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:sk-tw var(--d) ease-in-out infinite alternate}
@keyframes sk-tw{to{opacity:.15}}
.sky-hero .clouds{position:absolute;inset:0;z-index:-3;opacity:var(--clouds);pointer-events:none}
.sky-hero .clouds i{position:absolute;height:60px;border-radius:50%;background:#fff;filter:blur(26px);opacity:.55;animation:sk-cloud linear infinite}
@keyframes sk-cloud{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}

/* ---------- LAND ---------- */
.sky-hero .land{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:brightness(var(--land)) saturate(calc(.6 + var(--land) * .4))}
.sky-hero .land svg{width:100%;height:100%;display:block}
.sky-hero .hill{animation:sk-settle 2.4s var(--ease) both}
@keyframes sk-settle{from{transform:translateY(140px)}}
.sky-hero .rows path{fill:none;stroke:#fff;stroke-opacity:.16;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:sk-draw 3s var(--ease) forwards}
.sky-hero .mist{animation:sk-drift 30s linear infinite alternate;opacity:.28}
.sky-hero .mist.b{animation-duration:42s;animation-direction:alternate-reverse}
@keyframes sk-drift{to{transform:translateX(-180px)}}
.sky-hero .fireflies{opacity:var(--stars)}
.sky-hero .fireflies circle{fill:#ffe9a8;filter:url(#ff);animation:sk-ffly 7s ease-in-out infinite alternate}
@keyframes sk-ffly{50%{transform:translate(14px,-18px);opacity:.3}}
.sky-hero .birds{opacity:var(--clouds)}
/* turbine: pale by day, a dark steel silhouette by night with a red aviation light */
.sky-hero .tw-body{fill:color-mix(in srgb,#5d68a8 calc(var(--stars) * 100%),#dfe4ff)}
.sky-hero .tw-blade{fill:color-mix(in srgb,#6c77b8 calc(var(--stars) * 100%),#f4f6ff)}
.sky-hero .beacon{opacity:var(--stars)}
.sky-hero .beacon>*{animation:sk-beacon 2s steps(1,end) infinite}
.sky-hero .beacon circle:first-child{animation-name:sk-beaconGlow}
@keyframes sk-beacon{0%{opacity:1}50%{opacity:0}}
@keyframes sk-beaconGlow{0%{opacity:1}50%{opacity:0}}
.sky-hero .turbine .blades{transform:translate(1040px,616px);animation:sk-blade 9s linear infinite}
@keyframes sk-blade{from{transform:translate(1040px,616px) rotate(0)}to{transform:translate(1040px,616px) rotate(360deg)}}
.sky-hero .bird{fill:#0b1158;fill-opacity:.85;animation:sk-fly 32s 2s linear infinite;transform:translate(-120px,0)}
.sky-hero .bird.two{animation-duration:36s;animation-delay:3.4s}
.sky-hero .bob{animation:sk-bob 2.6s ease-in-out infinite alternate}
.sky-hero .two .bob{animation-duration:3.1s;animation-delay:-1s}
@keyframes sk-bob{to{transform:translateY(-14px)}}
@keyframes sk-fly{0%{transform:translate(-120px,330px)}50%{transform:translate(720px,250px)}100%{transform:translate(1600px,290px)}}

/* ---------- ORBIT (identity) ---------- */
.sky-hero .orbit{position:absolute;left:50%;top:clamp(80px,10svh,104px);width:min(94vw,calc(100svh - 230px),880px);aspect-ratio:1;transform:translateX(-50%);z-index:0}
.sky-hero .orbit svg{width:100%;height:100%;overflow:visible}
.sky-hero .rise{animation:sk-rise 4.5s var(--ease) both}
@keyframes sk-rise{from{transform:translateY(55%);opacity:0}}
@keyframes sk-spin{to{transform:rotate(360deg)}}
/* day lens: fades with daylight; night moon: fades in with stars */
.sky-hero .lens{opacity:var(--clouds)}
.sky-hero .burst{fill:#fff;opacity:.5;transform-origin:400px 400px;animation:sk-shimmer 7s ease-in-out infinite alternate}
@keyframes sk-shimmer{from{transform:rotate(-2deg) scale(.97)}to{transform:rotate(2deg) scale(1.03);opacity:.7}}
.sky-hero .ghosts{opacity:calc(var(--clouds) * .5);mix-blend-mode:screen}
.sky-hero .ghosts>*{opacity:.35}
.sky-hero .moon{opacity:var(--stars)}
/* night: the whole sky turns slowly around a pole hidden behind the hills */
.sky-hero .wheel{position:absolute;left:50%;top:82%;width:280vmax;height:280vmax;margin:-140vmax 0 0 -140vmax;z-index:-3;opacity:var(--stars);pointer-events:none;animation:sk-spin 1800s linear infinite reverse}
.sky-hero .wheel svg{width:100%;height:100%}
.sky-hero .wheel circle:not([fill]){fill:#fff}
.sky-hero .wheel path{fill:none;stroke:#fff;stroke-linecap:round}
.sky-hero .glint{animation:sk-glint 1.3s ease-out forwards}
/* shooting stars: a short bright streak that falls and fades */
.sky-hero .meteor{position:absolute;z-index:-2;height:1px;width:var(--len);border-radius:2px;pointer-events:none;transform-origin:100% 50%;
 background:linear-gradient(90deg,transparent,rgba(220,230,255,.5) 60%,#fff);filter:drop-shadow(0 0 2px #cfd9ff);
 animation:sk-meteor var(--t) cubic-bezier(.3,.1,.6,1) forwards}
@keyframes sk-meteor{0%{opacity:0;transform:rotate(var(--a)) translateX(0) scaleX(.2)}15%{opacity:1}70%{opacity:.9;transform:rotate(var(--a)) translateX(var(--dist)) scaleX(1)}100%{opacity:0;transform:rotate(var(--a)) translateX(calc(var(--dist) * 1.2)) scaleX(.3)}}
.sky-hero .glint path{fill:none;stroke:#fff;stroke-opacity:.8}
.sky-hero .glint>*{transform-box:fill-box;transform-origin:center}
@keyframes sk-glint{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.sky-hero .glint path{animation:sk-spark 1.3s ease-out forwards}
@keyframes sk-spark{0%{transform:scale(.2) rotate(0)}35%{transform:scale(1) rotate(12deg)}100%{transform:scale(.4) rotate(24deg)}}
.sky-hero .ring{fill:none;stroke:#fff;stroke-opacity:.16}
.sky-hero .ring.d{stroke-dasharray:2 8;stroke-opacity:.34;transform-origin:400px 400px;animation:sk-spin 80s linear infinite}
.sky-hero .ring.f{stroke-opacity:.07}
.sky-hero .halo{transform-origin:400px 400px;animation:sk-breathe 6s ease-in-out infinite}
@keyframes sk-breathe{50%{transform:scale(1.06);opacity:.8}}
.sky-hero .flow{fill:none;stroke:url(#flowG);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1;animation:sk-draw 1.4s var(--ease) forwards}
.sky-hero .pulse{fill:var(--core);filter:url(#glow)}
.sky-hero .mk{fill:transparent;stroke:#0b1158;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:sk-draw 2.2s var(--ease) 1.4s forwards,sk-fillin .9s 3s forwards}
.sky-hero .mk.b{animation-delay:1.6s,3.2s}
@keyframes sk-draw{to{stroke-dashoffset:0}}
@keyframes sk-fillin{to{fill:#0b1158;stroke-opacity:0}}
.sky-hero .sys{transform-origin:400px 400px;animation:sk-spin 140s linear infinite}
.sky-hero .node{transform-box:fill-box;transform-origin:center;animation:sk-counter 140s linear infinite}
@keyframes sk-counter{to{transform:rotate(-360deg)}}
.sky-hero .node circle.bg{fill:rgba(11,17,88,.5);stroke:#fff;stroke-opacity:.5;transition:.5s var(--ease)}
.sky-hero .node .ic{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sky-hero a:hover .node circle.bg{fill:rgba(255,255,255,.22);stroke-opacity:1}
.sky-hero .pop{opacity:0;animation:sk-pop .9s var(--ease) forwards}
@keyframes sk-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* ---------- UI ---------- */
.sky-hero .slogan{margin:0;position:absolute;left:0;right:0;bottom:calc(clamp(16px,4vh,40px) + 92px);display:flex;align-items:center;justify-content:center;gap:18px;padding:0 16px;z-index:2;
 color:#fff;font-weight:400;font-size:clamp(11px,1.1vw,14px);letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px rgba(3,5,31,.55),0 0 18px rgba(3,5,31,.5);opacity:0;animation:sk-up 1.4s 3.4s var(--ease) forwards}
.sky-hero .slogan::before,.sky-hero .slogan::after{content:"";height:1px;width:clamp(24px,6vw,72px);background:linear-gradient(90deg,transparent,#fffa)}
.sky-hero .slogan::after{transform:scaleX(-1)}
.sky-hero .slogan b{font-weight:600}
.sky-hero .slogan .dot{width:3px;height:3px;border-radius:50%;background:var(--g1);box-shadow:0 0 8px var(--g1)}
@keyframes sk-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.sky-hero .dock{position:absolute;left:0;right:0;margin:0 auto;bottom:clamp(16px,4vh,40px);width:min(960px,calc(100% - 32px));display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ffffff2a;border-radius:20px;background:rgba(11,17,88,.32);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);overflow:hidden;opacity:0;animation:sk-up 1s 3.8s forwards;z-index:2}
.sky-hero .dock a{display:flex;align-items:center;gap:12px;padding:18px 20px;color:#fff;text-decoration:none;border-right:1px solid #ffffff1a;transition:.4s var(--ease)}
.sky-hero .dock a:last-child{border-right:0}.sky-hero .dock a:hover{background:#ffffff14}
.sky-hero .dock svg{width:30px;height:30px;flex:none;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sky-hero .dock span{font-size:14px;line-height:1.3}.sky-hero .dock em{display:block;font:400 10px "JetBrains Mono",monospace;font-style:normal;letter-spacing:.2em;opacity:.6}
@media(max-width:760px){

 .sky-hero .orbit{top:84px;width:min(96vw,calc(100svh - 300px))}
 .sky-hero .dock{grid-template-columns:1fr 1fr}.sky-hero .dock a:nth-child(2){border-right:0}.sky-hero .dock a:nth-child(-n+2){border-bottom:1px solid #ffffff1a}
 .sky-hero .slogan{bottom:calc(clamp(16px,4vh,40px) + 146px);letter-spacing:.2em;gap:10px;font-size:10px}
 .sky-hero .slogan::before,.sky-hero .slogan::after{width:18px}
}
@media(prefers-reduced-motion:reduce){.sky-hero *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}}

/* ---------- HOLIDAYS: one quiet touch per occasion, vector only ---------- */
.sky-hero .fest{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sky-hero .fest.front{z-index:1}.sky-hero .fest.back{z-index:-2}
.sky-hero .greet{position:absolute;left:0;right:0;bottom:calc(clamp(16px,4vh,40px) + 122px);text-align:center;z-index:2;padding:0 16px;
 font:400 10px "JetBrains Mono",monospace;letter-spacing:.32em;text-transform:uppercase;color:var(--fc,#ffe2a0);text-shadow:0 1px 10px rgba(3,5,31,.6);opacity:0;animation:sk-up 1.4s 4s var(--ease) forwards}
.sky-hero .greet:empty{display:none}
@media(max-width:760px){.sky-hero .greet{bottom:calc(clamp(16px,4vh,40px) + 172px);letter-spacing:.2em}}
/* drifting things: petals, snow, hearts fall; lanterns, balloons rise */
.sky-hero .drift{position:absolute;top:-6%;left:var(--x);animation:sk-fall var(--t) linear var(--dl) infinite}
.sky-hero .drift>svg{opacity:var(--o);display:block;width:var(--s);height:var(--s);animation:sk-sway calc(var(--t) / 4) ease-in-out infinite alternate}
@keyframes sk-fall{from{transform:translateY(0)}to{transform:translateY(112vh)}}
@keyframes sk-sway{from{transform:translateX(-18px) rotate(-25deg)}to{transform:translateX(18px) rotate(35deg)}}
.sky-hero .drift.up{top:auto;bottom:-10%;animation-name:sk-floatup}
.sky-hero .drift.up>svg{animation:sk-bobble 3.2s ease-in-out infinite alternate}
@keyframes sk-floatup{from{transform:translateY(0)}to{transform:translateY(-118vh)}}
@keyframes sk-bobble{from{transform:translateX(-6px) rotate(-4deg)}to{transform:translateX(6px) rotate(4deg)}}
.sky-hero .night-only{opacity:var(--stars)}.sky-hero .day-only{opacity:var(--clouds)}
/* Tết: a single branch of hoa mai reaching in from the corner */
.sky-hero .branch{position:absolute;left:0;top:64px;width:min(34vw,300px);z-index:1;pointer-events:none;transform-origin:0 30%;animation:sk-branch 7s ease-in-out infinite alternate}
@keyframes sk-branch{to{transform:rotate(1.6deg)}}
.sky-hero .branch .fl{transform-box:fill-box;transform-origin:center;animation:sk-bloom 1.4s var(--ease) both}
@keyframes sk-bloom{from{transform:scale(0)}}
/* fireworks: thin lines that open and fade, behind the hills */
.sky-hero .fw{position:absolute;width:160px;height:160px;margin:-80px 0 0 -80px}
.sky-hero .fw line{stroke-linecap:round;stroke-dasharray:14 60;stroke-dashoffset:14;animation:sk-burst 1.8s cubic-bezier(.15,.7,.3,1) forwards}
.sky-hero .fw circle{animation:sk-burstDot 1.8s ease-out forwards}
@keyframes sk-burst{0%{stroke-dashoffset:14;opacity:1}70%{opacity:.9}100%{stroke-dashoffset:-46;opacity:0}}
@keyframes sk-burstDot{0%{opacity:1;r:5}100%{opacity:0;r:1}}
/* Trung thu: a golden moon */
.sky-hero.fest-midautumn .halo{filter:sepia(.55) saturate(2.2) hue-rotate(-6deg);opacity:.55}
/* trăng rằm vàng cam như trăng thật mùa thu: lõi vàng kem, mép cam đậm, biển trăng nâu hổ phách */
.sky-hero.fest-midautumn .m0{stop-color:#fff4c2}.sky-hero.fest-midautumn .m1{stop-color:#ffd56e}.sky-hero.fest-midautumn .m2{stop-color:#f6b03f}.sky-hero.fest-midautumn .m3{stop-color:#ef9a2a}
.sky-hero.fest-midautumn .g0{stop-color:#ffe08a;stop-opacity:.38}.sky-hero.fest-midautumn .g1{stop-color:#ffb54d;stop-opacity:.12}.sky-hero.fest-midautumn .g2{stop-color:#ff8a2a}
.sky-hero.fest-midautumn .maria{fill:#a2621f}
.sky-hero.fest-midautumn .maria>*{opacity:.62}
.sky-hero.fest-midautumn .tex{mix-blend-mode:multiply;opacity:.4}
.sky-hero.fest-midautumn .moon-rim{stroke:#ffe7a3}
.sky-hero.fest-midautumn .rays{stroke:#fff6d6}
.sky-hero.fest-midautumn .moon-glow{animation:moonbreathe 6s ease-in-out infinite alternate}
@keyframes moonbreathe{from{opacity:.85}to{opacity:1}}
/* đèn ông sao cầm tay hai bên, đung đưa quanh cán */
.ongsao{position:absolute;bottom:clamp(120px,22vh,230px);width:clamp(84px,10vw,140px);z-index:1;pointer-events:none;opacity:var(--stars);transform-origin:50% 100%;animation:swing 3.6s ease-in-out infinite alternate}
.ongsao.l{left:clamp(10px,6vw,90px);--a:-7deg;--b:5deg}
.ongsao.r{right:clamp(10px,6vw,90px);--a:6deg;--b:-6deg;animation-duration:4.2s;animation-delay:-1.3s}
.ongsao svg{display:block;width:100%;height:auto;overflow:visible}
.ongsao .flame{animation:flicker .9s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
@keyframes flicker{from{opacity:.75}to{opacity:1}}
@media(max-width:760px){.ongsao{bottom:clamp(200px,30vh,260px)}}


/* lời chúc mở trang (20/11): thẻ kính mờ ở giữa, cánh hoa bung ra từ thẻ rồi rơi nhẹ, cả cụm mờ dần và biến mất */
.wish{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:auto;cursor:pointer;background:radial-gradient(circle at 50% 50%,rgba(3,5,31,.35),rgba(3,5,31,0) 60%);animation:wishIn .5s ease-out both;transition:opacity .8s ease}
.wish.out{opacity:0;pointer-events:none}
.wish-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 30px 20px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;text-align:center;box-shadow:0 20px 60px -20px rgba(0,0,0,.5);animation:wishPop .7s cubic-bezier(.2,1.4,.4,1) both}
.wish-k{font:500 11px "JetBrains Mono",monospace;letter-spacing:.35em;color:#ffd6e0}
.wish-card b{font-weight:600;font-size:clamp(17px,2.4vw,24px);letter-spacing:-.01em}
.wish-card em{font-style:normal;font-size:13px;color:rgba(255,255,255,.75)}
.wish-petals{position:absolute;left:50%;top:50%;width:0;height:0}
.wish-petals i{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);opacity:0;animation:petal var(--t) cubic-bezier(.12,.8,.3,1) var(--d) forwards}
.wish-petals svg{display:block;width:100%;height:100%}
@keyframes wishIn{from{opacity:0}}
@keyframes wishPop{from{transform:scale(.85);opacity:0}}
@keyframes petal{0%{transform:translate(0,0) rotate(0) scale(.4);opacity:0}12%{opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:0}}.day-only{opacity:var(--clouds)}

/* Tết */
.sky-hero.fest-tet .branch{width:min(38vw,330px)}
.lixi{animation:lixi 3.4s ease-in-out infinite alternate}
@keyframes lixi{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
.tet-lanterns{position:absolute;right:clamp(4px,3vw,40px);top:44px;width:min(22vw,180px);z-index:1;pointer-events:none}
.tet-lanterns svg{display:block;width:100%;height:auto}
.tlan{animation:tlan 4s ease-in-out infinite alternate}
@keyframes tlan{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.tglow{opacity:calc(.1 + var(--stars) * .35);filter:blur(10px)}
.banhchung{position:absolute;left:clamp(10px,5vw,70px);bottom:clamp(140px,20vh,210px);width:clamp(84px,min(13vw,19vh),190px);filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));z-index:1;pointer-events:none;animation:sk-up 1.2s 3.6s var(--ease) both}
.banhchung svg{display:block;width:100%;height:auto}
@media(max-width:760px){.banhchung{bottom:clamp(220px,32vh,280px)}.tet-lanterns{top:56px}}
.wish.tet .wish-card{background:linear-gradient(160deg,rgba(212,42,31,.82),rgba(140,16,16,.82));border-color:rgba(243,197,82,.6)}
.wish.tet .wish-k{color:#ffe08a}
.wish.tet .wish-card b{color:#ffe7a0;font-size:clamp(20px,3vw,30px)}
/* pháo hoa đêm giao thừa: tia dài, chớp sáng, đốm lấp lánh rơi */
.sky-hero .fw.rich line{stroke-dasharray:18 70;stroke-dashoffset:18;animation-duration:2.2s}
.fw.rich .flash{animation:fwFlash .6s ease-out forwards}
.sky-hero .fw .spk{opacity:0;animation:spk 1.4s ease-out forwards}
@keyframes fwFlash{from{opacity:.35}to{opacity:0}}
@keyframes spk{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(14px)}}