@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');

:root{
  --black:#020202;
  --gold:#d8ae55;
  --gold-soft:#efd48a;
  --gold-light:#fff2b8;
  --muted:rgba(216,174,85,.72);
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  min-height:100svh;
  overflow:hidden;
  color:var(--gold);
  background:
    radial-gradient(circle at 50% 14%, rgba(255,211,112,.15), transparent 24%),
    radial-gradient(circle at 50% 102%, rgba(216,147,34,.18), transparent 22%),
    linear-gradient(180deg,#060606 0%,#000 100%);
  font-family:Cinzel, Georgia, serif;
}

#starfield{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.atmosphere{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.glow{
  position:absolute;
  left:50%;
  top:32%;
  width:min(520px,80vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,215,120,.18), rgba(216,174,85,.05) 35%, transparent 68%);
  filter:blur(8px);
  animation:breathe 6.5s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{opacity:.62; transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1; transform:translate(-50%,-50%) scale(1.05)}
}

.clouds{
  position:absolute;
  bottom:-12svh;
  width:48vw;
  height:42svh;
  opacity:.72;
  filter:blur(1px);
  animation:cloud-drift 18s ease-in-out infinite alternate;
}

.clouds-left{
  left:-8vw;
  background:
    radial-gradient(circle at 18% 72%, rgba(235,170,55,.26) 0 9%, transparent 20%),
    radial-gradient(circle at 34% 61%, rgba(235,170,55,.18) 0 12%, transparent 25%),
    radial-gradient(circle at 52% 82%, rgba(235,170,55,.14) 0 16%, transparent 30%),
    radial-gradient(circle at 8% 92%, rgba(255,220,125,.18) 0 11%, transparent 23%);
}

.clouds-right{
  right:-8vw;
  background:
    radial-gradient(circle at 80% 72%, rgba(235,170,55,.26) 0 9%, transparent 20%),
    radial-gradient(circle at 63% 61%, rgba(235,170,55,.18) 0 12%, transparent 25%),
    radial-gradient(circle at 46% 84%, rgba(235,170,55,.14) 0 16%, transparent 30%),
    radial-gradient(circle at 94% 92%, rgba(255,220,125,.18) 0 11%, transparent 23%);
  animation-delay:-4s;
}

@keyframes cloud-drift{
  from{transform:translateX(-8px)}
  to{transform:translateX(10px)}
}

.horizon-star{
  position:absolute;
  left:50%;
  bottom:6svh;
  width:190px;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  box-shadow:0 0 30px rgba(255,226,142,.9), 0 0 80px rgba(216,174,85,.45);
  opacity:.78;
}

.horizon-star:after{
  content:"✦";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  color:var(--gold-light);
  font-size:30px;
  filter:drop-shadow(0 0 18px rgba(255,226,142,.9));
}

.page{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:32px 20px;
  text-align:center;
}

.hero{
  width:min(900px,100%);
  animation:hero-in 1.9s cubic-bezier(.22,1,.36,1) both;
}

@keyframes hero-in{
  from{opacity:0; transform:translateY(22px) scale(.985); filter:blur(5px)}
  to{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

.emblem{
  position:relative;
  width:clamp(122px,22vw,238px);
  height:clamp(122px,22vw,238px);
  margin:0 auto 4px;
  display:grid;
  place-items:center;
}

.north-star{
  position:absolute;
  top:-18%;
  font-size:clamp(42px,7vw,84px);
  color:var(--gold-light);
  filter:drop-shadow(0 0 18px rgba(255,226,142,.95));
  animation:pulse-star 3.8s ease-in-out infinite;
}

@keyframes pulse-star{
  0%,100%{opacity:.78; transform:scale(.92)}
  50%{opacity:1; transform:scale(1.05)}
}

.ornament{
  position:absolute;
  inset:16%;
  border:1px solid rgba(239,212,138,.55);
  transform:rotate(45deg);
  box-shadow:0 0 32px rgba(216,174,85,.23);
}

.ornament:before,
.ornament:after{
  content:"";
  position:absolute;
  left:-23%;
  right:-23%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,212,138,.7),transparent);
}

.ornament:after{
  transform:rotate(90deg);
}

.letter{
  position:relative;
  z-index:1;
  font-family:Georgia, serif;
  font-size:clamp(88px,18vw,210px);
  line-height:1;
  background:linear-gradient(135deg,#8a5d18 0%,#fff3bd 38%,#d8ae55 68%,#6f4712 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 28px rgba(216,174,85,.2);
}

h1{
  margin:0;
  font-size:clamp(42px,9vw,106px);
  font-weight:500;
  line-height:.95;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:linear-gradient(135deg,#8e621d 0%,#fff4c1 34%,#d2a24a 70%,#765019 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 34px rgba(216,174,85,.18);
}

.divider{
  width:min(560px,82vw);
  height:1px;
  margin:32px auto 22px;
  background:linear-gradient(90deg,transparent,rgba(239,212,138,.72),transparent);
  position:relative;
}

.divider:after{
  content:"✦";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:0 14px;
  background:#050505;
  color:var(--gold-light);
  font-size:17px;
}

.divider.small{
  margin:22px auto 28px;
  width:min(430px,74vw);
}

.tagline{
  margin:0;
  font-size:clamp(15px,2.4vw,25px);
  letter-spacing:.44em;
  text-transform:uppercase;
  color:#f1d58c;
  text-shadow:0 0 18px rgba(216,174,85,.24);
}

.coming{
  margin:0;
  font-size:clamp(28px,5.7vw,68px);
  letter-spacing:.18em;
  line-height:1.25;
  text-transform:uppercase;
  color:#f8df9b;
  text-shadow:0 0 26px rgba(216,174,85,.22);
}

.socials{
  margin:42px auto 0;
  display:flex;
  justify-content:center;
  gap:clamp(14px,3vw,26px);
}

.socials a{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(239,212,138,.8);
  border-radius:50%;
  color:var(--gold-soft);
  text-decoration:none;
  font:600 25px/1 Arial, sans-serif;
  box-shadow:0 0 18px rgba(216,174,85,.14);
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.socials a:hover{
  transform:translateY(-3px);
  color:var(--gold-light);
  box-shadow:0 0 26px rgba(255,226,142,.38);
}

footer{
  margin-top:36px;
  font:12px/1.8 Arial, sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:680px){
  body{overflow:auto}
  .page{padding:26px 18px}
  .emblem{margin-top:10px}
  h1{letter-spacing:.045em}
  .tagline{letter-spacing:.24em; line-height:1.65}
  .coming{letter-spacing:.11em}
  .socials{gap:13px; margin-top:34px}
  .socials a{width:42px; height:42px; font-size:21px}
  footer{font-size:10px; margin-top:28px}
  .clouds{width:70vw; height:32svh; bottom:-10svh}
  .horizon-star{bottom:3svh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}