/* ===== MAX ANIMATION PACK ===== */
body.gated{overflow:hidden}
.gated .arch,.gated .names .nm span,.gated .amp,.gated #countdown,.gated .hero .btn,.gated .bismillah,.gated .big-star *{animation-play-state:paused!important}
/* gate */
.gate{position:fixed;inset:0;z-index:1000}
.door{position:absolute;top:0;bottom:0;width:50.5%;background:var(--primary) var(--pattern);transition:transform 1.8s cubic-bezier(.77,0,.18,1)}
.door.l{left:0;border-right:2px solid var(--gold)}.door.r{right:0;border-left:2px solid var(--gold)}
.gate.open .l{transform:translateX(-101%)}.gate.open .r{transform:translateX(101%)}
.seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:2;transition:.9s;width:90%}
.gate.open .seal{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
.seal-star{width:130px;animation:spin 20s linear infinite;filter:drop-shadow(0 0 12px rgba(201,162,75,.6))}
.gate-names{font-family:var(--hfont);font-size:clamp(2rem,6vw,3rem);margin:10px 0 4px;animation:fadeUp 1.2s .3s both}
.gate-sub{letter-spacing:.25em;text-transform:uppercase;font-size:.72rem;opacity:.8;margin-bottom:26px;animation:fadeUp 1.2s .6s both}
.gate-btn{background:transparent;cursor:pointer;animation:fadeUp 1.2s .9s both,pulse 2.4s 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(201,162,75,.6)}100%{box-shadow:0 0 0 26px rgba(201,162,75,0)}}
/* hero extras */
.hero-bg{background-position:0 0,center;animation:drift 70s linear infinite}
@keyframes drift{to{background-position:80px 80px,center}}
.big-star{opacity:.3}
.big-star *{stroke-width:.4;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 5s .8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bismillah{animation:write 3s .8s both,glow 4s 4s ease-in-out infinite}
@keyframes write{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.amp{background:linear-gradient(90deg,var(--gold),#fff,var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:fadeUp 1s 1.4s both,shine 4s linear infinite!important}
@keyframes shine{to{background-position:-200% 0}}
.lanterns{position:absolute;inset:0;z-index:1;pointer-events:none}
.lantern{position:absolute;top:0;transform-origin:top center;animation:swing 5s ease-in-out infinite alternate}
.lantern .cord{width:1px;background:var(--gold);margin:0 auto;height:var(--len)}
.lantern svg{display:block;width:38px;filter:drop-shadow(0 0 14px rgba(243,217,139,.8))}
.lantern .fl{animation:flame 2.4s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes flame{from{opacity:.55}to{opacity:1}}
.moon{position:absolute;right:7%;top:16%;width:70px;z-index:1;animation:moon 8s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(201,162,75,.8))}
@keyframes moon{50%{transform:translateY(-14px) rotate(14deg)}}
.dust{position:absolute;top:-20px;border-radius:50%;background:var(--gold);opacity:0;animation:fall linear infinite;z-index:1;pointer-events:none}
@keyframes fall{0%{transform:translate(0,-20px);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translate(var(--sw),105vh) rotate(360deg);opacity:0}}
/* reveals */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.split .w i{display:inline-block;font-style:inherit;transform:translateY(115%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.split.in .w i{transform:none}
.verse.reveal{clip-path:inset(0 0 0 100%);opacity:1;transform:none;transition:none}
.verse.reveal.in{animation:write 3.5s .3s both}
.divider.reveal:before,.divider.reveal:after{width:0;transition:width 1.4s .3s}
.divider.reveal.in:before,.divider.reveal.in:after{width:70px}
.card{position:relative;overflow:hidden}
.card:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(201,162,75,.35),transparent);transform:skewX(-20deg);transition:left .9s}
.card:hover:after{left:140%}
.card .no{transition:.5s}.card:hover .no{opacity:1;transform:scale(1.15)}
.cd{perspective:400px}
.cd b.flip{animation:flip .6s}
@keyframes flip{0%{transform:rotateX(90deg);opacity:.1}100%{transform:none;opacity:1}}
.map.reveal{clip-path:inset(100% 0 0 0);opacity:1;transform:none;transition:clip-path 1.6s cubic-bezier(.2,.8,.2,1)}
.map.reveal.in{clip-path:inset(0)}
.info.reveal:nth-child(2){transition-delay:.15s}.info.reveal:nth-child(3){transition-delay:.3s}.info.reveal:nth-child(4){transition-delay:.45s}
/* global */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold),#fff,var(--gold));transform:scaleX(0);transform-origin:left;z-index:200}
.spark{position:fixed;pointer-events:none;color:var(--gold);z-index:999;animation:spark .9s forwards;text-shadow:0 0 8px var(--gold)}
@keyframes spark{to{opacity:0;transform:translateY(24px) scale(.2) rotate(120deg)}}
.wipe{position:fixed;inset:0;background:var(--primary) var(--pattern);z-index:2000;pointer-events:none;clip-path:circle(0 at 50% 50%);transition:clip-path .7s cubic-bezier(.7,0,.3,1)}
.wipe.go{clip-path:circle(150% at 50% 50%)}
.wipe.instant{transition:none}
.music{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:var(--primary);color:var(--gold);font-size:1.2rem;cursor:pointer;z-index:90}
.music.on{animation:pulse 1.8s infinite}
@media(max-width:800px){.moon{width:46px}.lantern svg{width:28px}}