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

:root { --black:#050505; --gold:#d6b660; --gold-light:#f1df9b; --cream:#f3eee2; --muted:#aaa397; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; max-width:100%; background:var(--black); }
body { color:var(--cream); font-family:Montserrat,system-ui,sans-serif; overflow-x:clip; }
.skip-link { position:fixed; left:1rem; top:1rem; z-index:20; padding:.7rem 1rem; color:#050505; background:var(--gold-light); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#particles, .grain { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
#particles { z-index:1; opacity:.65; }
.grain { z-index:2; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.hero { position:relative; isolation:isolate; min-height:100svh; display:grid; place-items:center; padding:clamp(2rem,5vw,4rem) 1.5rem 3.5rem; overflow:hidden; background:radial-gradient(circle at 50% 42%,#1c170b 0,rgba(10,9,7,.7) 20%,transparent 48%),linear-gradient(145deg,#020202,#080806 50%,#030303); }
.ambient { position:absolute; z-index:-1; border-radius:50%; filter:blur(90px); opacity:.13; background:var(--gold); animation:drift 16s ease-in-out infinite alternate; }
.ambient--one { width:30rem; height:30rem; top:-18rem; right:-10rem; }
.ambient--two { width:20rem; height:20rem; bottom:-12rem; left:-8rem; animation-delay:-7s; }
.content { z-index:3; width:min(100%,46rem); min-width:0; text-align:center; display:flex; flex-direction:column; align-items:center; }
.logo-stage { position:relative; width:min(92vw,54rem); max-width:100%; display:grid; place-items:center; isolation:isolate; }
.official-logo { position:relative; z-index:2; display:block; width:100%; max-width:100%; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.logo-halo { position:absolute; z-index:0; width:56%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(214,182,96,.2),rgba(214,182,96,.06) 38%,transparent 68%); filter:blur(28px); animation:halo-breathe 6s ease-in-out infinite; }
.logo-orbit { position:absolute; z-index:3; top:23.8%; width:29%; aspect-ratio:1; border:1px solid rgba(241,223,155,.16); border-radius:50%; animation:spin 18s linear infinite; pointer-events:none; }
.logo-orbit--left { left:30.25%; }
.logo-orbit--right { left:43.75%; animation-direction:reverse; animation-duration:21s; }
.logo-orbit span { position:absolute; width:4px; aspect-ratio:1; border-radius:50%; top:9%; left:18%; background:var(--gold-light); box-shadow:0 0 5px #fff3bd,0 0 14px var(--gold-light); }
.logo-orbit--right span { top:76%; left:91%; width:3px; }
.announcement { margin-top:clamp(.8rem,2.5vh,1.8rem); }
.announcement > p:first-child { margin:0; color:#d7d2c8; font-family:Cinzel,Georgia,serif; font-size:clamp(.9rem,2vw,1.15rem); font-weight:400; line-height:1.8; letter-spacing:.06em; }
.coming-soon { margin:1.05rem 0 0; color:var(--gold); font-size:.72rem; letter-spacing:.38em; text-transform:uppercase; }
.hashtag { display:inline-block; margin-top:clamp(1.8rem,4vh,2.6rem); color:var(--muted); font-size:.65rem; letter-spacing:.2em; text-decoration:none; transition:color .25s, text-shadow .25s; }
.hashtag:hover,.hashtag:focus-visible { color:var(--gold-light); text-shadow:0 0 14px rgba(214,182,96,.45); }
.socials { display:flex; align-items:center; justify-content:center; gap:clamp(1.1rem,4vw,2.4rem); margin-top:1.3rem; }
.socials a { display:grid; grid-template-columns:1.15rem auto; grid-template-rows:auto auto; column-gap:.55rem; color:var(--muted); text-decoration:none; text-align:left; transition:color .25s,transform .25s; }
.socials svg { grid-row:1/3; align-self:center; width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.socials svg .fill { fill:currentColor; stroke:none; }
.socials span { font-size:.46rem; letter-spacing:.2em; text-transform:uppercase; }
.socials strong { color:var(--gold); font-size:.58rem; font-weight:400; letter-spacing:.08em; }
.socials a:hover,.socials a:focus-visible { color:var(--gold-light); transform:translateY(-2px); }
footer { position:absolute; z-index:3; bottom:1.2rem; left:0; width:100%; display:flex; justify-content:center; gap:.8rem; color:#665f54; font-size:.52rem; letter-spacing:.25em; text-transform:uppercase; }
.reveal { opacity:0; transform:translateY(12px); animation:reveal .9s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal:nth-child(3){animation-delay:.45s}.reveal:nth-child(4){animation-delay:.75s}.reveal:nth-child(5){animation-delay:.95s}
@keyframes reveal { to{opacity:1;transform:none} } @keyframes spin{to{transform:rotate(1turn)}} @keyframes halo-breathe{50%{opacity:.55;transform:scale(1.12)}} @keyframes drift{to{transform:translate(3rem,2rem) scale(1.1)}}
@media (max-height:760px){.hero{padding-top:1rem}.logo-stage{width:min(70vw,36rem)}.announcement{margin-top:.25rem}.hashtag{margin-top:.65rem}.socials{margin-top:.75rem}}
@media (max-width:520px){.logo-stage{width:calc(100vw - 1.5rem);max-width:100%}.desktop-break{display:none}.announcement{margin-top:.5rem}.hero{padding-inline:.75rem}.socials{gap:1.1rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}#particles{display:none}}