:root{
  --ink:      #0b0a09;
  --ink-soft: #17130f;
  --gold-1:   #f6c777;
  --gold-2:   #e09a3e;
  --gold-3:   #b8722a;
  --text:     #f0e4d3;
  --muted:    #cbb8a0;
  --edge:     rgba(224,154,62,.22);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--ink);
  color:var(--text);
  font-family:"Josefin Sans","Cairo",system-ui,-apple-system,sans-serif;
  font-weight:200;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- atmosphere: desert sunrise ---------- */

.horizon{
  position:fixed; inset:0; z-index:0;
  opacity:0;
  animation:dawn 2.6s ease-out .1s forwards;
  background:
    radial-gradient(130% 80% at 50% 110%, rgba(232,158,66,.40) 0%, rgba(180,110,42,.18) 40%, transparent 72%),
    radial-gradient(100% 62% at 50% 102%, rgba(255,196,102,.18) 0%, transparent 62%),
    linear-gradient(180deg, #080706 0%, #100c09 45%, #1d140d 100%);
}

.sun{
  position:fixed; z-index:0;
  left:50%; bottom:-28vmin;
  width:64vmin; height:64vmin; margin-left:-32vmin;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,230,182,.58) 0%, rgba(255,178,80,.34) 30%, rgba(255,150,40,.12) 56%, transparent 74%);
  filter:blur(8px);
  opacity:0;
  /* rises once on load, then settles into the idle breathe */
  animation:
    sunrise 2.8s cubic-bezier(.16,.72,.24,1) .2s forwards,
    breathe 9s ease-in-out 3s infinite;
}

/* sparkle field */
.sparkles{
  position:fixed; inset:0; z-index:1;
  width:100%; height:100%;
  pointer-events:none;
  opacity:0;
  animation:dawn 2.4s ease-out 1.5s forwards;
}

/* scrim: keeps the horizon glow from washing out text sitting over it */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 42% at 50% 100%,
    rgba(11,10,9,.72) 0%,
    rgba(11,10,9,.46) 38%,
    rgba(11,10,9,.16) 66%,
    transparent 84%);
}

@keyframes dawn{
  from{opacity:0}
  to  {opacity:1}
}

@keyframes sunrise{
  from{opacity:0;   transform:translateY(26vmin) scale(.72)}
  60% {opacity:.92}
  to  {opacity:.75; transform:translateY(0) scale(1)}
}

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

/* subtle film grain so the gradient never bands */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- content ---------- */

.stage{
  position:relative; z-index:2;
  width:100%;
  padding:8vh 24px 6vh;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.stage > *{
  opacity:0;
  animation:rise 1.1s cubic-bezier(.2,.7,.25,1) forwards;
}
.mark      {animation-delay:.05s}
.wordmark  {animation-delay:.25s}
.tagline   {animation-delay:.45s}
.stay      {animation-delay:.6s}
.countdown {animation-delay:.75s}
.live      {animation-delay:.85s}
.foot      {animation-delay:1s}

@keyframes rise{
  from{opacity:0; transform:translateY(14px)}
  to  {opacity:1; transform:none}
}

/* logo mark */
.mark{
  width:clamp(88px,15vmin,124px);
  aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:26%;
  background:linear-gradient(160deg,#1c1815,#0c0a08);
  box-shadow:
    0 0 0 1px rgba(246,199,119,.14),
    0 18px 48px rgba(0,0,0,.6),
    0 0 60px rgba(224,154,62,.14);
}
.mark svg{width:78%;height:78%}
.core-glow{animation:pulse 3.4s ease-in-out infinite;transform-origin:62px 60px}
@keyframes pulse{
  0%,100%{opacity:.75;transform:scale(.94)}
  50%    {opacity:1;  transform:scale(1.06)}
}

/* wordmark */
.wordmark{
  margin-top:clamp(26px,5vh,44px);
  font-size:clamp(2.6rem,11vw,6.5rem);
  font-weight:200;
  letter-spacing:.30em;
  text-indent:.30em;              /* balance the trailing tracking */
  line-height:1;
  color:#f4e8d7;
  text-shadow:0 0 40px rgba(255,186,90,.28);
}
.wordmark .hot{
  background:linear-gradient(180deg,var(--gold-1),var(--gold-3));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.tagline{
  margin-top:clamp(12px,2vh,20px);
  font-size:clamp(.68rem,2.1vw,.95rem);
  letter-spacing:.44em; text-indent:.44em;
  text-transform:uppercase;
  color:var(--gold-2);
  display:flex; align-items:center; gap:16px;
}
.tagline::before,.tagline::after{
  content:""; height:1px; width:clamp(24px,7vw,64px);
  background:linear-gradient(90deg,transparent,var(--edge),transparent);
}

.stay{
  margin-top:clamp(34px,7vh,64px);
  font-size:clamp(.85rem,2.6vw,1.05rem);
  letter-spacing:.12em;
  color:var(--muted);
}
.stay strong{font-weight:400;color:var(--text)}

/* countdown */
.countdown{
  margin-top:clamp(22px,4vh,36px);
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(8px,3vw,26px);
}

.unit{
  min-width:clamp(64px,17vw,116px);
  padding:clamp(12px,2.4vw,20px) clamp(6px,1.6vw,14px);
  border:1px solid rgba(246,199,119,.22);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(18,15,12,.66),rgba(11,10,9,.82));
  box-shadow:inset 0 1px 0 rgba(255,224,170,.06), 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

.num{
  font-size:clamp(1.9rem,7.4vw,3.6rem);
  font-weight:300; line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  background:linear-gradient(180deg,#fff2dd,var(--gold-2));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.lbl{
  font-size:clamp(.55rem,1.7vw,.72rem);
  letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase;
  font-weight:400;
  color:#d8c6ae;
}

.sep{
  align-self:center;
  width:3px;height:3px;border-radius:50%;
  background:var(--gold-3);
  box-shadow:0 -7px 0 var(--gold-3);
  opacity:.6;
  animation:blink 2s steps(1,end) infinite;
}
@keyframes blink{0%,49%{opacity:.65}50%,100%{opacity:.18}}

.live{
  margin-top:clamp(20px,3.5vh,30px);
  min-height:1.2em;
  font-size:clamp(.72rem,2.1vw,.85rem);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-1);
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}

.foot{
  margin-top:auto;
  padding-top:clamp(40px,9vh,90px);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:400;
  color:#f0e4d3;
  display:flex; gap:12px; align-items:center;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(8,7,6,.72);
  border:1px solid rgba(246,199,119,.16);
  backdrop-filter:blur(8px);
}
.dot{color:var(--gold-3)}

@media (max-width:420px){
  .sep{display:none}
  .countdown{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .stage > *{opacity:1}
  .horizon{opacity:1}
  .sun{opacity:.8;transform:none}
  .sparkles{opacity:1}
}