*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#d6b46a;
  --gold2:#f7dda1;
  --gold3:#8a641d;
  --white:#fff;
  --muted:#aaa49a;
}
html,body{height:100%;overflow:hidden}
body{font-family:Inter,system-ui,sans-serif;background:#030303;color:#fff}
.intro{position:relative;width:100vw;height:100vh;overflow:hidden;display:grid;place-items:center;background:#050403}
.background{position:absolute;inset:0;overflow:hidden}
.aurora{
  position:absolute;border-radius:50%;filter:blur(90px);opacity:.18;mix-blend-mode:screen;
  animation:aurora 13s ease-in-out infinite alternate;
}
.a1{width:55vw;height:55vw;background:#d6b46a;right:-18vw;top:-22vw}
.a2{width:44vw;height:44vw;background:#fff;left:-16vw;bottom:-20vw;opacity:.055;animation-delay:2s}
.a3{width:38vw;height:38vw;background:#7a4e13;left:42vw;top:48vh;opacity:.15;animation-delay:4s}
@keyframes aurora{to{transform:translate(7vw,-5vw) scale(1.16)}}

.nebula{
  position:absolute;inset:-20%;
  background:
    radial-gradient(ellipse at 48% 42%,rgba(214,180,106,.22),transparent 24%),
    radial-gradient(ellipse at 60% 50%,rgba(255,255,255,.07),transparent 18%),
    conic-gradient(from 90deg,transparent,rgba(214,180,106,.08),transparent,rgba(255,255,255,.025),transparent);
  filter:blur(1px);
  animation:nebulaSpin 42s linear infinite;
}
@keyframes nebulaSpin{to{transform:rotate(360deg)}}

.grid-light{
  position:absolute;inset:-60%;
  background:
    linear-gradient(rgba(214,180,106,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214,180,106,.045) 1px, transparent 1px);
  background-size:90px 90px;
  transform:perspective(900px) rotateX(62deg) translateY(35vh);
  opacity:.18;
  animation:gridMove 12s linear infinite;
}
@keyframes gridMove{to{background-position:0 180px,180px 0}}

.grain{
  position:absolute;inset:0;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,transparent 0 36%,rgba(0,0,0,.48) 70%,rgba(0,0,0,.95));
}
.mouse-glow{
  position:fixed;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,180,106,.18),transparent 68%);
  pointer-events:none;z-index:2;transform:translate(-50%,-50%);mix-blend-mode:screen;
}
.particles{position:absolute;inset:0;z-index:3;pointer-events:none}
.particle{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:rgba(246,221,160,.8);
  box-shadow:0 0 12px rgba(246,221,160,.8);
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  from{transform:translate3d(0,20vh,0);opacity:0}
  15%{opacity:.9}
  85%{opacity:.55}
  to{transform:translate3d(var(--dx),-110vh,0);opacity:0}
}

.portal{
  position:absolute;width:min(76vmin,720px);height:min(76vmin,720px);z-index:4;
  display:grid;place-items:center;transition:transform .18s ease-out;
  filter:drop-shadow(0 0 45px rgba(214,180,106,.18));
}
.ring{
  position:absolute;border-radius:50%;border:1px solid rgba(214,180,106,.25);
}
.r1{width:100%;height:100%;animation:breathe 5.5s ease-in-out infinite, spin 38s linear infinite}
.r2{width:76%;height:76%;border-color:rgba(246,221,160,.25);animation:spin 24s linear infinite reverse}
.r3{width:50%;height:50%;border-color:rgba(214,180,106,.18);animation:spin 16s linear infinite}
.r4{width:28%;height:28%;border-color:rgba(255,255,255,.10);animation:breathe 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{box-shadow:0 0 90px rgba(214,180,106,.18);transform:scale(1.035)}}

.cut{
  position:absolute;width:26%;height:18%;right:3%;top:30%;
  background:linear-gradient(90deg,transparent,#070503 35%,#070503 70%,transparent);
  transform:rotate(-24deg);filter:blur(1px)
}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(214,180,106,.08)}
.orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold2);box-shadow:0 0 18px var(--gold2)}
.o1{width:108%;height:108%;animation:spin 19s linear infinite}.o1 i{left:18%;top:14%}
.o2{width:82%;height:82%;animation:spin 28s linear infinite reverse}.o2 i{right:10%;top:46%}
.o3{width:54%;height:54%;animation:spin 13s linear infinite}.o3 i{left:38%;bottom:9%}

.flare{
  position:absolute;width:2px;height:82px;background:linear-gradient(transparent,var(--gold2),transparent);
  opacity:0;animation:flare 4.8s ease-in-out infinite;
}
.f1{transform:rotate(27deg) translateY(-215px)}
.f2{transform:rotate(142deg) translateY(-245px);animation-delay:1.6s}
.f3{transform:rotate(278deg) translateY(-205px);animation-delay:3s}
@keyframes flare{0%,82%,100%{opacity:0}86%,90%{opacity:.8}}

.copy{position:relative;z-index:8;text-align:center;max-width:1180px;padding:30px;animation:copyIn 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes copyIn{from{opacity:0;transform:translateY(36px);filter:blur(14px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.kicker{color:var(--gold2);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.44em;margin-bottom:24px}
h1{font-family:Cinzel,serif;font-size:clamp(58px,10vw,146px);line-height:.82;letter-spacing:.055em;text-shadow:0 25px 90px rgba(0,0,0,.85)}
h1 span{display:block}
h1 em{font-style:normal;font-size:.75em;margin-right:.18em}
h1 strong{color:transparent;background:linear-gradient(100deg,#fff,#f7dda1 45%,#b88728 100%);-webkit-background-clip:text;background-clip:text}
p{color:var(--muted);font-size:clamp(18px,2vw,25px);margin-top:30px}
.enter{
  margin-top:42px;display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;height:66px;border-radius:999px;border:1px solid rgba(214,180,106,.48);
  color:#080808;background:linear-gradient(135deg,#f8e3a8,#c3932b);
  text-decoration:none;font-weight:1000;letter-spacing:.2em;position:relative;overflow:hidden;
  box-shadow:0 26px 95px rgba(214,180,106,.32);transition:.3s
}
.enter:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);transform:translateX(-120%);animation:shine 3.1s ease-in-out infinite}
.enter span{position:relative;z-index:1}
.enter:hover{transform:translateY(-5px) scale(1.045)}
@keyframes shine{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
.words{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:8;display:flex;gap:36px;color:rgba(255,255,255,.45);font-size:10px;text-transform:uppercase;letter-spacing:.24em;font-weight:900}
.intro.exit .copy{animation:exit .9s ease forwards}
.intro.exit .portal{transform:scale(2.8) rotate(35deg)!important;opacity:0;filter:blur(10px)}
.intro.exit{animation:flash 1.05s ease forwards}
@keyframes exit{to{opacity:0;transform:translateY(-40px) scale(.95);filter:blur(14px)}}
@keyframes flash{60%{filter:brightness(2)}100%{opacity:0;visibility:hidden}}
@media(max-width:700px){
  .kicker{letter-spacing:.18em;font-size:10px}
  h1{font-size:50px}
  .portal{width:95vmin;height:95vmin}
  .words{width:90%;justify-content:center;flex-wrap:wrap;gap:12px}
}