:root{
  --maroon:#4a0f20;
  --maroon-2:#6b1a32;
  --gold:#d9b46a;
  --gold-soft:#ecd3a1;
  --ivory:#fbf4e6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Jost',system-ui,sans-serif;
  color:var(--ivory);
  background:radial-gradient(120% 120% at 50% 0%,var(--maroon-2) 0%,var(--maroon) 55%,#2a0712 100%);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;overflow-x:hidden;
}

/* background */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.pattern{
  position:absolute;inset:0;opacity:.07;
  background-image:
    radial-gradient(circle at 25% 25%,var(--gold) 1px,transparent 1.5px),
    radial-gradient(circle at 75% 75%,var(--gold) 1px,transparent 1.5px);
  background-size:36px 36px;
}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;animation:float 14s ease-in-out infinite}
.o1{width:380px;height:380px;background:#b8860b;top:-100px;left:-80px}
.o2{width:320px;height:320px;background:#a3324f;bottom:-80px;right:-60px;animation-delay:-5s}
.o3{width:220px;height:220px;background:#d9b46a;top:50%;left:60%;opacity:.15;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}

/* frame */
.frame{
  position:relative;z-index:1;
  width:min(720px,100%);
  text-align:center;
  padding:clamp(40px,7vw,80px) clamp(24px,6vw,72px);
  border:1px solid rgba(217,180,106,.35);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  backdrop-filter:blur(6px);
  box-shadow:0 30px 80px rgba(0,0,0,.4), inset 0 0 0 8px rgba(217,180,106,.05);
  animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.corner{position:absolute;width:26px;height:26px;border:1px solid var(--gold)}
.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.bl{bottom:10px;left:10px;border-right:0;border-top:0}
.br{bottom:10px;right:10px;border-left:0;border-top:0}

.motif{width:120px;color:var(--gold);margin:0 auto 18px;display:block;opacity:.9}

.eyebrow{
  font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold-soft);opacity:.85;margin-bottom:26px;
}

.brand{display:flex;flex-direction:column;gap:6px;font-weight:400}
.hindi{
  font-family:'Tiro Devanagari Hindi',serif;
  font-size:clamp(3.2rem,12vw,6rem);line-height:1.1;
  background-image:linear-gradient(100deg,#a97f32 0%,#d9b46a 25%,#fff4cf 50%,#d9b46a 75%,#a97f32 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hindiIn 1.4s 1.5s cubic-bezier(.2,.8,.2,1) both, shimmer 5s 3s linear infinite;
}
@keyframes hindiIn{from{opacity:0;transform:scale(.9);filter:blur(12px);letter-spacing:.2em}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.latin{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-soft);
  padding-left:.3em;
}
.latin .ch{display:inline-block;opacity:0;transform:translateY(24px) rotateX(-70deg);filter:blur(8px);
  animation:letter .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.5s + var(--i)*.07s)}
.latin .sp{display:inline-block;width:.5em}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}

.rule{margin:30px auto;width:140px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.rule span{position:absolute;left:50%;top:50%;width:9px;height:9px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 5px #4a0f20}

.soon{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(2.4rem,8vw,4.2rem);letter-spacing:.04em;line-height:1.1;
}
.soon em{font-style:italic;color:var(--gold)}

.lead{
  max-width:460px;margin:22px auto 0;
  font-weight:300;line-height:1.8;font-size:1rem;color:rgba(251,244,230,.8);
}

.threads{display:flex;justify-content:center;gap:10px;margin:38px 0 34px}
.threads span{
  width:3px;height:34px;background:linear-gradient(var(--gold),transparent);
  transform-origin:top;animation:sway 2.6s ease-in-out infinite;border-radius:2px;
}
.threads span:nth-child(2){animation-delay:.2s;height:44px}
.threads span:nth-child(3){animation-delay:.4s;height:28px}
.threads span:nth-child(4){animation-delay:.6s;height:40px}
.threads span:nth-child(5){animation-delay:.8s}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

footer{
  display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-soft);opacity:.8;
}
.dot{font-size:.5rem;color:var(--gold)}

@media (max-width:480px){
  .eyebrow{letter-spacing:.2em}
  .corner{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* extra animation */
#sparkles{position:fixed;inset:0;z-index:0;pointer-events:none}
.motif .draw{stroke-dasharray:140;stroke-dashoffset:140;animation:draw 2s .2s ease forwards}
.motif circle{transform-origin:60px 20px;animation:pulse 2.4s 2s ease-in-out infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.8)}}

.eyebrow,.rule,.soon,.lead,.threads,footer{opacity:0;animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) forwards}
.eyebrow{animation-delay:.3s}
.rule{animation-name:grow;animation-delay:2.2s}
.soon{animation-delay:2.5s}
.lead{animation-delay:2.9s}
.threads{animation-delay:3.2s}
footer{animation-delay:3.5s}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes grow{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
.soon em{background:linear-gradient(100deg,#d9b46a,#fff4cf,#d9b46a);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.threads span{opacity:1}

/* rotating gold glow on frame */
.frame::before{content:"";position:absolute;inset:-1px;z-index:-1;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(236,211,161,.9) 85%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spin 7s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.frame{transition:transform .2s ease-out;will-change:transform}