:root { --black:#050505; --cream:#f8f1df; --gold:#d6aa41; --green:#8bc20b; --pink:#ec2e8b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--black); color:var(--cream); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
main { overflow:hidden; }
.topbar { position:absolute; z-index:10; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:24px 6vw; border-bottom:1px solid rgba(214,170,65,.2); }
.brand { display:flex; align-items:center; }
.brand img { display:block; width:clamp(150px,17vw,245px); height:58px; object-fit:contain; object-position:left center; filter:drop-shadow(0 0 14px rgba(236,46,139,.2)); }
nav { display:flex; align-items:center; gap:34px; text-transform:uppercase; letter-spacing:1.8px; font-size:11px; }
nav a:hover { color:var(--gold); }
.nav-cta { border:1px solid var(--gold); padding:12px 20px; }
.hero { min-height:100svh; position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:5vw; padding:120px 8vw 70px; isolation:isolate; }
.hero:after { content:""; position:absolute; inset:0; z-index:-3; background:radial-gradient(circle at 50% 30%, #1b1722 0, #050505 58%); }
.stars { position:absolute; inset:0; z-index:-1; opacity:.55; background-image:radial-gradient(circle, #fff 1px, transparent 1px),radial-gradient(circle, var(--gold) 1px, transparent 1px); background-size:73px 73px, 113px 113px; background-position:13px 20px,42px 8px; mask-image:linear-gradient(to bottom,transparent,black 30%,transparent); animation:starDrift 22s linear infinite; }
.aurora { position:absolute; width:44vw; height:44vw; filter:blur(90px); opacity:.22; z-index:-2; border-radius:50%; }
.aurora-green { background:var(--green); left:-25vw; bottom:-15vw; animation:auroraGreen 10s ease-in-out infinite alternate; }.aurora-pink { background:var(--pink); right:-25vw; bottom:-15vw; animation:auroraPink 12s ease-in-out infinite alternate; }
.hero-copy { max-width:650px; animation:heroReveal .9s cubic-bezier(.2,.8,.2,1) both .15s; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:4px; font-size:11px; font-weight:700; }
h1 { margin:20px 0; font:700 clamp(78px,10vw,156px)/.72 Georgia,serif; letter-spacing:-8px; text-transform:uppercase; }
h1 span { display:block; color:transparent; background:linear-gradient(90deg,var(--green),#d7d52d,var(--pink)); background-clip:text; -webkit-background-clip:text; text-transform:none; font-style:italic; }
h1 small { display:block; color:var(--gold); font:italic 400 clamp(20px,2.4vw,36px)/1.3 Georgia,serif; letter-spacing:2px; text-transform:none; text-align:center; }
.hero-text { font:italic 24px/1.4 Georgia,serif; color:#d8ceb9; }
.hero-actions { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-flex; justify-content:center; padding:16px 25px; text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:700; transition:.25s ease; }
.button-primary { color:#070707; background:linear-gradient(110deg,#b99735,#f0d777,#b78a25); }.button-primary:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(214,170,65,.25); }
.button-ghost { border:1px solid rgba(248,241,223,.35); }.button-ghost:hover { border-color:var(--pink); color:var(--pink); }
.poster-wrap { position:relative; width:min(100%,450px); justify-self:center; animation:posterReveal 1.1s cubic-bezier(.2,.8,.2,1) both .35s, posterFloat 6s ease-in-out infinite 1.45s; }
.poster-wrap img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; border:1px solid rgba(214,170,65,.35); box-shadow:0 35px 90px #000; transform:rotate(1.5deg); }
.poster-glow { position:absolute; inset:10%; background:linear-gradient(135deg,var(--green),var(--pink)); filter:blur(70px); opacity:.35; animation:glowPulse 3.5s ease-in-out infinite; }
.sparkles i { position:absolute; z-index:0; width:5px; height:5px; border-radius:50%; background:#fff4b3; box-shadow:0 0 7px 2px var(--gold); animation:twinkle 2.4s ease-in-out infinite; }.sparkles i:nth-child(1){left:12%;top:30%}.sparkles i:nth-child(2){left:46%;top:18%;animation-delay:.8s}.sparkles i:nth-child(3){left:70%;top:22%;animation-delay:1.4s}.sparkles i:nth-child(4){left:90%;top:49%;animation-delay:.4s}.sparkles i:nth-child(5){left:39%;top:77%;animation-delay:1.8s}.sparkles i:nth-child(6){left:78%;top:84%;animation-delay:1.1s}
.scroll-hint { position:absolute; bottom:28px; left:8vw; color:#938a79; text-transform:uppercase; letter-spacing:3px; font-size:9px; }.scroll-hint span { color:var(--gold); margin-left:8px; }
.story,.tickets { padding:120px 8vw; display:grid; grid-template-columns:.25fr 1fr 1fr; gap:5vw; border-top:1px solid rgba(214,170,65,.15); }
.section-number { color:var(--gold); font:italic 38px Georgia,serif; }
h2 { margin:10px 0; font:400 clamp(40px,5.5vw,82px)/1 Georgia,serif; letter-spacing:-2px; } h2 em { color:var(--pink); font-weight:400; }
.story-text { align-self:end; color:#afa89b; line-height:1.8; font-size:15px; max-width:530px; }.story-text p:first-child:first-letter { float:left; color:var(--green); font:72px/.75 Georgia,serif; padding-right:10px; }
.experience { padding:120px 8vw; text-align:center; background:linear-gradient(180deg,#050505,#0d0b0e); }
.experience h2 em { color:var(--green); }
.cards { margin-top:65px; display:grid; grid-template-columns:repeat(3,1fr); text-align:left; border:1px solid rgba(214,170,65,.18); }
.card { min-height:300px; padding:30px; position:relative; border-right:1px solid rgba(214,170,65,.18); transition:.4s cubic-bezier(.2,.8,.2,1); animation:cardRise .7s both; }.card:nth-child(2){animation-delay:.12s}.card:nth-child(3){animation-delay:.24s}.card:last-child{border:0}.card:hover{background:rgba(236,46,139,.05);transform:translateY(-10px);box-shadow:inset 0 1px var(--pink),0 25px 60px rgba(0,0,0,.25)}
.card>span { color:#625d54; font:18px Georgia,serif; }.card-icon { margin:55px 0 25px; color:var(--gold); font-size:34px; }.card h3 { font:italic 35px Georgia,serif; margin:0 0 12px; }.card p { color:#928b80; line-height:1.6; max-width:250px; }
.tickets { grid-template-columns:1.3fr .7fr; position:relative; background:radial-gradient(circle at 90% 70%,rgba(139,194,11,.13),transparent 35%); }
.tickets em { color:var(--green); }.ticket-panel { align-self:center; border-left:1px solid var(--gold); padding-left:45px; }.ticket-panel p { color:#c7c0b3; font:italic 22px/1.5 Georgia,serif; }.ticket-panel .button { margin:16px 0; }.ticket-panel small { display:block; color:#766f64; }
footer { padding:40px 8vw; display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:40px; border-top:1px solid rgba(214,170,65,.15); color:#736c61; font-size:11px; text-transform:uppercase; letter-spacing:1px; }.footer-brand img { width:200px; height:70px; }.developer-credit{white-space:nowrap;color:#a39a89;transition:color .25s ease}.developer-credit strong{color:var(--gold);letter-spacing:2px}.developer-credit:hover{color:var(--cream)}
@keyframes heroReveal{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes posterReveal{from{opacity:0;transform:translateX(45px) rotate(4deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes posterFloat{0%,100%{transform:translateY(0) rotate(.2deg)}50%{transform:translateY(-14px) rotate(-.5deg)}}
@keyframes glowPulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.5;transform:scale(1.12)}}
@keyframes starDrift{to{background-position:86px 93px,155px 121px}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.4)}50%{opacity:1;transform:scale(1.35)}}
@keyframes auroraGreen{to{transform:translate(12vw,-7vw) scale(1.18)}}
@keyframes auroraPink{to{transform:translate(-10vw,-5vw) scale(1.15)}}
@keyframes cardRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media (max-width:800px){.topbar{padding:18px 5vw}.topbar nav a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding:130px 6vw 80px;text-align:center}.hero-copy{order:1}.poster-wrap{order:2;width:min(75vw,380px)}h1{letter-spacing:-4px}.hero-actions{justify-content:center}.scroll-hint{display:none}.story,.tickets{grid-template-columns:1fr;padding:85px 7vw}.section-number{display:none}.cards{grid-template-columns:1fr}.card{border-right:0;border-bottom:1px solid rgba(214,170,65,.18);min-height:250px}.card-icon{margin:35px 0 20px}.ticket-panel{border-left:0;border-top:1px solid var(--gold);padding:30px 0 0}footer{grid-template-columns:1fr;text-align:center}.footer-brand{justify-content:center}}
@media (max-width:600px){
  .topbar{position:absolute;padding:14px 18px;background:linear-gradient(180deg,rgba(5,5,5,.92),rgba(5,5,5,.35),transparent);border:0}.brand img{width:138px;height:48px}.nav-cta{padding:10px 13px;font-size:9px;letter-spacing:1.2px}
  .hero{min-height:auto;display:flex;flex-direction:column;gap:42px;padding:108px 20px 62px}.hero-copy{width:100%}.eyebrow{font-size:9px;letter-spacing:2.6px;line-height:1.6}h1{font-size:clamp(64px,24vw,94px);line-height:.74;letter-spacing:-4px;margin:15px 0 22px}h1 small{font-size:19px;margin:8px 0}.hero-text{font-size:19px;margin:0 auto;max-width:290px}.hero-actions{display:grid;grid-template-columns:1fr;width:100%;gap:10px;margin-top:28px}.button{width:100%;min-height:52px;align-items:center;padding:15px 18px}.poster-wrap{width:min(84vw,360px)}.poster-wrap img{transform:rotate(.8deg);border-radius:2px}.sparkles i:nth-child(n+5){display:none}
  .story,.experience,.tickets{padding:72px 22px}.story{gap:24px}.story h2,.experience h2,.tickets h2{font-size:clamp(38px,12vw,56px);line-height:1.02;letter-spacing:-1.5px}.story-text{font-size:15px;line-height:1.75}.story-text p:first-child:first-letter{font-size:60px}
  .experience{text-align:left}.experience>h2{margin-top:15px}.cards{margin-top:38px;border-radius:2px}.card{min-height:215px;padding:25px}.card-icon{margin:28px 0 18px}.card h3{font-size:32px}.card p{font-size:14px;margin-bottom:0}
  .tickets{gap:30px}.ticket-panel{padding-top:25px}.ticket-panel p{font-size:19px}.ticket-panel small{line-height:1.6}.tickets .button{margin:12px 0 14px}
  footer{padding:42px 22px;gap:18px;font-size:9px;line-height:1.6}.footer-brand img{width:180px;height:62px}
}
@media (max-width:360px){.brand img{width:120px}.nav-cta{padding:9px 10px}h1{font-size:61px}.hero{padding-inline:16px}.story,.experience,.tickets{padding-inline:18px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.card{transition:none}.stars,.aurora,.hero-copy,.poster-wrap,.poster-glow,.sparkles i,.card{animation:none}}

.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}