:root{
  --canvas:#0c0920;
  --panel:#171236;
  --panel-2:#211a4a;
  --accent:#ff8a1a;
  --accent-hover:#ffa347;
  --accent-muted:rgba(255,138,26,.22);
  --heat-red:#ff2a12;
  --heat-blue:#2231ff;
  --text-primary:#f6f1e6;
  --text-secondary:#d8bf98;
  --line:rgba(216,191,152,.38);
  --ease:cubic-bezier(.22,.8,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(8,5,22,.95),0 3px 12px rgba(8,5,22,.78),0 10px 44px rgba(8,5,22,.8);
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;background:var(--canvas)}
body{overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .9s var(--ease-soft)}
body.ready{opacity:1}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.01em}
.mono{font-family:var(--mono);font-weight:300;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#1a0a04;padding:10px 16px;z-index:100;font-weight:700}
.skip:focus{left:8px}

/* thermal progress bar: the signature */
.heat{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;background:linear-gradient(90deg,var(--heat-blue),#7a1fd6 30%,var(--heat-red) 62%,var(--accent) 85%,#ffd23f);transform-origin:0 50%;transform:scaleX(0);will-change:transform;box-shadow:0 0 18px rgba(255,138,26,.55)}

/* environment layer */
.env{position:fixed;inset:-8%;z-index:-2;background:var(--canvas) url(heat-texture.jpg) center/cover;opacity:.2;filter:saturate(1.1);animation:drift 90s linear infinite alternate;will-change:transform}
.env::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(12,9,32,.2),rgba(12,9,32,.9) 78%)}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1.05)}to{transform:translate3d(2%,1.5%,0) scale(1.14)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
nav{position:fixed;top:4px;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,44px);background:linear-gradient(180deg,rgba(12,9,32,.72),rgba(12,9,32,0));transition:background .4s var(--ease-soft)}
nav.solid{background:rgba(12,9,32,.86);backdrop-filter:blur(12px)}
nav .brand img{height:34px;width:auto;filter:drop-shadow(0 1px 6px rgba(8,5,22,.7))}
nav .links{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center}
nav .links a{text-decoration:none;text-shadow:var(--tshadow);opacity:.92;transition:opacity .3s var(--ease-soft),color .3s var(--ease-soft)}
nav .links a:hover{opacity:1;color:var(--accent-hover)}
nav .links a.btn{text-shadow:none;opacity:1;color:#1a0a04}
nav .links a.btn:hover{color:#1a0a04}
.btn{display:inline-block;text-decoration:none;background:var(--accent);color:#1a0a04;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;padding:14px 30px;border-radius:2px;border:0;cursor:pointer;text-shadow:none;position:relative;isolation:isolate;transition:transform .35s var(--ease),background .3s var(--ease-soft)}
.btn::after{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:4px;background:var(--accent);opacity:0;filter:blur(14px);transition:opacity .35s var(--ease-soft)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn:hover::after{opacity:.55}
nav .btn{font-size:1rem;padding:9px 20px}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* hero: quick-flash intro, then the title lands */
.hero{position:relative;height:100vh;height:100svh}
.stage{position:relative;height:100%;overflow:hidden;background:#3a0f0a}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background:#3a0f0a url(hero-ending.jpg) 60% 50%/cover no-repeat;opacity:0;transition:opacity .6s var(--ease-soft)}
.stage.no-video .poster{opacity:1}
.stage.no-video video{display:none}
/* the intro montage sits on top; when it ends it fades out and the loop behind it carries the title */
.stage video#intro{z-index:2;transition:opacity .9s var(--ease-soft)}
.stage video#loop{z-index:1}
.stage.looping video#intro{opacity:0;pointer-events:none}
.stage.no-loop video#loop{display:none}
.stage.title-in.no-loop .poster{opacity:1}
.scrim{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .8s var(--ease-soft);background:linear-gradient(90deg,rgba(12,9,32,.86) 0%,rgba(12,9,32,.66) 40%,rgba(12,9,32,.22) 66%,rgba(12,9,32,0) 82%),radial-gradient(ellipse 120% 90% at 55% 45%,rgba(12,9,32,0) 40%,rgba(12,9,32,.55) 100%)}
.stage.title-in .scrim,.stage.no-video .scrim{opacity:1}
.intro-copy{z-index:4;position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(64px,14vh,150px);width:min(64vw,860px);text-shadow:var(--tshadow);visibility:hidden}
.title-in .intro-copy,.no-video .intro-copy{visibility:visible}
.intro-copy .kick{color:var(--text-primary);display:block;margin-bottom:14px}
.intro-copy h1{font-size:clamp(2.4rem,min(9vw,15vh),8.6rem)}
.intro-copy .sub{margin-top:clamp(10px,2.2vh,20px);font-size:clamp(1rem,min(1.7vw,2.6vh),1.4rem);max-width:34ch}
.intro-copy .btn{margin-top:clamp(14px,3vh,26px)}
@media (max-height:760px){.intro-copy{bottom:clamp(44px,9vh,110px)}.intro-copy .kick{margin-bottom:8px}.intro-copy .btn{padding:11px 24px;font-size:1.05rem}}
.w{display:inline-block;white-space:nowrap}
.sp{display:inline-block;width:.28em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* title entrance: words punch in with overshoot, then the rest settles */
.title-in .intro-copy .w{animation:punch .7s var(--ease) both;animation-delay:calc(var(--th)*.9s)}
.title-in .intro-copy .w.em{animation-duration:.9s}
.title-in .intro-copy .tag{animation:slide .6s var(--ease) .05s both}
.title-in .intro-copy .sub{animation:fadeup .7s var(--ease) .55s both}
.title-in .intro-copy .btn{animation:fadeup .7s var(--ease) .8s both}
@keyframes punch{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
@keyframes slide{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.skip-intro{position:absolute;z-index:5;right:clamp(16px,4vw,44px);bottom:22px;background:rgba(12,9,32,.55);color:var(--text-primary);border:1px solid var(--line);border-radius:2px;padding:10px 16px;cursor:pointer;backdrop-filter:blur(8px);opacity:0;pointer-events:none;animation:skipin .6s var(--ease) 1.2s forwards;transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.skip-intro:hover{background:var(--accent);color:#1a0a04;border-color:var(--accent)}
.title-in .skip-intro,.no-video .skip-intro{display:none}
@keyframes skipin{to{opacity:1;pointer-events:auto}}
@media (pointer:coarse){.skip-intro{min-height:44px}}
.tap-play{position:absolute;z-index:5;right:clamp(16px,4vw,44px);bottom:22px;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#1a0a04;border:0;border-radius:2px;padding:12px 18px;cursor:pointer;font-weight:400;letter-spacing:.14em;box-shadow:0 8px 30px -8px rgba(255,138,26,.7);animation:tapin .5s var(--ease) both}
.tap-play::before{content:"";width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.tap-play[hidden]{display:none}
.tap-play:hover{background:var(--accent-hover)}
@keyframes tapin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (pointer:coarse){.tap-play{min-height:44px}}
@media (prefers-reduced-motion:reduce){.tap-play{display:none!important}}
.cue{z-index:4;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:var(--text-primary);text-shadow:var(--tshadow);display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .8s var(--ease-soft) 1.4s}
.title-in .cue,.no-video .cue{opacity:1}
.cue i{display:block;width:1px;height:34px;background:currentColor;transform-origin:50% 0;animation:cue 2.4s var(--ease-soft) infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:720px),(orientation:portrait){
  .intro-copy{width:calc(100% - 40px);bottom:clamp(56px,12vh,110px)}
  .poster{background-position:90% 50%}
  .intro-copy h1{font-size:clamp(2.6rem,min(15vw,13vh),7rem)}
  .scrim{background:linear-gradient(180deg,rgba(12,9,32,0) 20%,rgba(12,9,32,.85) 100%)}
}
@media (max-height:560px){.cue{display:none}}

/* sections */
section{position:relative}
.wrap{width:min(1200px,100% - 2*clamp(20px,5vw,56px));margin-inline:auto}
.pad{padding-block:clamp(72px,11vw,150px)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[style*="--d"]{transition-delay:var(--d)}
.reveal.in.done{transition-delay:0s!important}
.eyebrow{color:var(--accent-hover);display:block;margin-bottom:16px}

/* experience: sticky title + list */
.exp{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,6vw,90px);align-items:start}
.exp .head{position:sticky;top:110px}
.exp h2{font-size:clamp(2.8rem,6vw,5.6rem)}
.exp .head p{margin-top:22px;max-width:36ch;color:var(--text-secondary)}
.exp ol{list-style:none;counter-reset:n}
.exp li{position:relative;counter-increment:n;padding:22px 0 22px 64px;border-top:0;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.15rem);text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.exp li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:30px;font-family:var(--mono);font-weight:300;font-size:.8rem;letter-spacing:.1em;color:var(--accent-hover)}
.exp li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease)}
.exp li.in::after{transform:scaleX(1)}

/* levels */
.levels{background:linear-gradient(180deg,transparent,rgba(23,18,54,.78) 14%,rgba(23,18,54,.78) 86%,transparent)}
.levels .top{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:44px}
.levels h2{font-size:clamp(2.6rem,6vw,5.4rem);max-width:18ch}
.levels .top p{max-width:38ch;color:var(--text-secondary)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,26px)}
.card{position:relative;text-align:left;cursor:pointer;background:var(--panel);color:inherit;border:1px solid var(--line);border-radius:4px;overflow:hidden;padding:0;font:inherit;display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s var(--ease-soft)}
.card:hover{transform:translateY(-5px)}
.card .img{position:relative;aspect-ratio:4/4.6;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .6s var(--ease-soft);filter:saturate(.75) brightness(.8)}
.card:hover .img img{transform:scale(1.05)}
.card .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,32,0) 45%,rgba(23,18,54,.96));}
.card .body{padding:6px 24px 28px;margin-top:-30px;position:relative;z-index:1}
.card h3{font-size:2.6rem}
.card .mono{color:var(--text-secondary);display:block;margin-bottom:8px}
.card p{margin-top:12px;color:var(--text-primary);opacity:.9;font-size:1rem}
.card[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 60px -12px rgba(255,138,26,.5)}
.card[aria-pressed="true"] .img img{filter:saturate(1.25) brightness(1.05)}
.gauge{margin-top:40px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center}
.gauge .bar{position:relative;height:14px;background:rgba(246,241,230,.14);border-radius:1px;overflow:hidden}
.gauge .fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--heat-blue),#7a1fd6 35%,var(--heat-red) 65%,var(--accent) 88%,#ffd23f);transform-origin:0 50%;transform:scaleX(var(--g,0));transition:transform 1s var(--ease)}
.gauge .read{min-width:20ch;text-align:right}
.levels .note{margin-top:34px;max-width:60ch;color:var(--text-secondary)}

/* faith in motion */
.faith{min-height:92vh;display:grid;place-items:center;text-align:center;overflow:hidden}
.faith .bg{position:absolute;inset:0;background:url(hero-ending.jpg) 0 60%/122% auto no-repeat;transform:scale(1.08);transition:transform 2.6s var(--ease-soft)}
.faith.in .bg{transform:scale(1)}
.faith::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(12,9,32,.78),rgba(12,9,32,.35) 70%,rgba(12,9,32,.55))}
.faith .in-copy{position:relative;z-index:2;padding:80px clamp(20px,5vw,56px);text-shadow:var(--tshadow)}
.faith h2{font-size:clamp(3.4rem,11vw,11rem);text-shadow:none}
.faith h2 *{text-shadow:none}
/* scroll-driven zoom in from the left with horizontal motion blur (any .mb heading; --mk runs 0 to 1, --mbx is the travel distance) */
.mb{--mk:0;--mbx:34vw;position:relative;display:block}
.mb .mbwrap{display:inline-block;position:relative;will-change:transform;transform:translate3d(calc((1 - var(--mk))*var(--mbx)*-1),0,0) scale(calc(.55 + .45*var(--mk)));transform-origin:0 60%}
.mb .mb-sharp{position:relative;display:block;opacity:calc(clamp(0,(var(--mk) - .35)*1.9,1))}
.mb .mb-soft,.mb .mb-trail{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.mb .mb-soft{filter:url(#hblur);opacity:calc(1 - var(--mk)*.9)}
.mb .mb-trail{filter:url(#hblur2);opacity:calc((1 - var(--mk))*.55);transform:translate3d(calc((1 - var(--mk))*-9vw),0,0)}
.big .mb .mbwrap,.big .mbwrap{display:block}
.faith p{margin:26px auto 0;max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.3rem)}
.faith .rule{display:block;width:120px;height:2px;margin:28px auto 0;background:linear-gradient(90deg,var(--heat-blue),var(--heat-red),var(--accent));transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.faith.in .rule{transform:scaleX(1)}

/* before you arrive */
.arrive{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.arrive h2{font-size:clamp(2.6rem,5.6vw,5rem)}
.arrive ul{list-style:none;margin-top:30px}
.arrive li{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:1.1rem}
.arrive li .mono{color:var(--accent-hover);min-width:3ch}
.big{position:relative;padding:clamp(28px,4vw,56px);background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.big::before{content:"";position:absolute;inset:0;background:url(heat-texture.jpg) center/cover;opacity:.32;animation:drift 70s linear infinite alternate}
.big>*{position:relative}
.big h3{font-size:clamp(3rem,6.4vw,6rem)}
.big p{margin-top:20px;max-width:34ch;font-size:1.08rem}

/* faq */
.faq-wrap{max-width:880px}
.faq-wrap h2{font-size:clamp(2.6rem,5.4vw,4.6rem);margin-bottom:36px}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:.02em;transition:color .3s var(--ease-soft)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent-hover)}
summary::after{content:"+";font-family:var(--mono);font-weight:300;font-size:1.6rem;transition:transform .4s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 26px;max-width:62ch;color:var(--text-secondary)}

/* register */
.register{text-align:center}
.ticket{position:relative;padding:clamp(34px,6vw,84px) clamp(22px,5vw,64px);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:linear-gradient(135deg,rgba(255,42,18,.2),rgba(34,49,255,.28)),var(--panel)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:34px;height:34px;border-radius:50%;background:var(--canvas);border:1px solid var(--line);transform:translateY(-50%)}
.ticket::before{left:-18px}.ticket::after{right:-18px}
.ticket h2{font-size:clamp(3.2rem,9vw,8rem)}
.ticket .facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:16px clamp(24px,4vw,56px);margin:34px 0 8px;text-align:center}
@media (max-width:900px){.ticket .facts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ticket .facts{grid-template-columns:1fr}}
.ticket .facts div{display:flex;flex-direction:column;gap:4px}
.ticket .facts .mono{color:var(--text-secondary)}
.ticket .facts b{font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1.1;text-transform:uppercase;letter-spacing:.02em}
.ticket .btn{margin-top:30px;font-size:1.5rem;padding:18px 48px}
.ticket .fine{margin-top:22px;color:var(--text-secondary);font-size:.95rem}

/* merch */
.merch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,26px)}
.merch figure{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:16/10}
.merch img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.merch figure:hover img{transform:scale(1.04)}
.merch-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.merch-head h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.merch-head a{color:var(--text-secondary);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s var(--ease-soft),border-color .3s var(--ease-soft)}
.merch-head a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

footer{padding:60px 0 44px;border-top:1px solid var(--line);color:var(--text-secondary)}
footer .row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer img{height:38px;width:auto}
footer .tag{color:var(--text-primary)}
footer a{text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--accent-hover)}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (max-width:900px){
  .exp,.arrive{grid-template-columns:1fr}
  .exp .head{position:static}
  .cards{grid-template-columns:1fr}
  .card .img{aspect-ratio:16/11}
  .merch{grid-template-columns:1fr}
  .gauge{grid-template-columns:1fr}
  .gauge .read{text-align:left}
  nav .links a:not(.btn){display:none}
  .ticket::before,.ticket::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .reveal{opacity:1;transform:none}
  .exp li::after{transform:scaleX(1)}
  .faith .bg,.faith .rule{transform:none}
  .mb .mbwrap{transform:none}.mb .mb-soft,.mb .mb-trail{display:none}.mb .mb-sharp{opacity:1}
  .intro-copy .w,.intro-copy .tag,.intro-copy .sub,.intro-copy .btn{animation:none!important}
  .skip-intro{display:none}
  .env{transform:scale(1.08)}
}