:root{--bg:#0c0809;--bg2:#160e10;--red:#8a1730;--gold:#d4a24c;--ink:#f3e9d7;--mute:#a8968a;--line:rgba(212,162,76,.28);--serif:"Bodoni Moda",Georgia,serif;--sans:Jost,system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:300 17px/1.7 var(--sans);overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05}
a{color:inherit}
.ic{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* floating props */
.fl{position:fixed;top:0;color:var(--gold);opacity:.3;pointer-events:none;z-index:1;animation:drift var(--d) linear infinite}
@keyframes drift{from{transform:translate3d(0,110vh,0) rotate(0)}to{transform:translate3d(var(--x),-25vh,0) rotate(var(--r))}}
/* curtains */
.curtain{position:fixed;top:0;bottom:0;width:51%;z-index:100;background:repeating-linear-gradient(90deg,#4d0a1d 0 26px,var(--red) 26px 52px,#4d0a1d 52px 78px);box-shadow:0 0 70px #000;transition:transform 1.8s cubic-bezier(.77,0,.18,1) .3s}
.curtain.l{left:0}.curtain.r{right:0}
.open .curtain.l{transform:translateX(-102%)}.open .curtain.r{transform:translateX(102%)}
.done .curtain{display:none}
/* nav */
nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 5vw;background:linear-gradient(var(--bg),transparent)}
nav b{font:italic 500 22px var(--serif);color:var(--gold)}
nav div{display:flex;gap:22px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;overflow-x:auto}
nav a{text-decoration:none;color:var(--mute);white-space:nowrap;transition:color .3s}
nav a:hover{color:var(--gold)}
/* hero */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;padding:110px 6vw 70px}
.spot{position:absolute;top:0;left:var(--sx,50%);width:70vw;height:115%;transform:translateX(-50%);background:linear-gradient(rgba(255,226,160,.38),rgba(255,226,160,.03) 85%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);transition:left .9s ease-out;filter:blur(5px)}
.hero>div{position:relative;z-index:2}
.eyebrow{letter-spacing:.45em;text-transform:uppercase;font-size:12px;color:var(--gold);margin-bottom:18px}
.hero h1{font-size:clamp(64px,15vw,210px);letter-spacing:-.03em}
.hero h1 em{display:block;font-style:italic;color:transparent;-webkit-text-stroke:1.5px var(--gold)}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(110%) rotate(8deg);animation:rise .9s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*.07s + 2.3s)}
@keyframes rise{to{opacity:1;transform:none}}
.sub{margin:22px auto 34px;max-width:480px;color:var(--mute);opacity:0;animation:fade 1s 3.4s forwards}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fade 1s 3.6s forwards}
@keyframes fade{to{opacity:1}}
.btn{padding:13px 30px;border:1px solid var(--gold);text-decoration:none;font-size:13px;letter-spacing:.15em;text-transform:uppercase;transition:all .3s}
.btn.p{background:var(--gold);color:#1a0f08}
.btn:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(212,162,76,.3)}
/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:var(--bg2);position:relative;z-index:2}
.marq div{display:flex;gap:40px;width:max-content;animation:mq 30s linear infinite;font:italic 500 clamp(26px,4vw,48px) var(--serif);white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--mute)}
.marq i{font-style:normal;color:var(--red);-webkit-text-stroke:0}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
main,footer{position:relative;z-index:2}
section{padding:clamp(80px,11vw,140px) 6vw;max-width:1150px;margin:auto}
.tag{color:var(--gold);letter-spacing:.35em;font-size:12px;text-transform:uppercase;margin-bottom:12px}
h2{font-size:clamp(40px,7vw,86px);margin-bottom:50px}
h2 em{color:var(--gold)}
.rv{opacity:0;transform:translateY(50px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.rv.l{transform:translateX(-70px)}.rv.r{transform:translateX(70px)}.rv.l.in,.rv.r.in{transform:none}
/* about + orbit */
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:center}
.orbit{position:relative;width:min(100%,380px);aspect-ratio:1;margin:auto}
.photo{position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a1420,#120a0c);border:1px solid var(--gold);display:grid;place-items:center;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:20px}
.ring{position:absolute;inset:0;animation:spin 40s linear infinite}
.ring text{font:500 13.5px var(--sans);letter-spacing:.32em;fill:var(--gold);text-transform:uppercase}
.orb{position:absolute;inset:var(--in,0);animation:spin var(--s,20s) linear infinite;animation-delay:var(--dl,0s)}
.orb .ic{position:absolute;top:-17px;left:50%;margin-left:-17px;width:34px;height:34px;color:var(--ink);animation:spin var(--s,20s) linear infinite reverse;animation-delay:var(--dl,0s)}
@keyframes spin{to{transform:rotate(360deg)}}
.about p{color:var(--mute);margin-bottom:16px;font-size:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.stat{padding:16px;border:1px solid var(--line)}
.stat b{display:block;font:500 34px var(--serif);color:var(--gold)}
.stat small{color:var(--mute);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.chip{padding:8px 18px;border:1px solid var(--line);font-size:13px;letter-spacing:.1em;text-transform:uppercase;transition:all .3s}
.chip:hover{background:var(--gold);color:#1a0f08}
/* tickets */
.ticket{display:grid;grid-template-columns:1fr 130px;background:linear-gradient(100deg,#1d1013,#130b0d);border:1px solid var(--line);margin-bottom:22px;transition:transform .35s;-webkit-mask:radial-gradient(circle 11px at calc(100% - 130px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 130px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 11px at calc(100% - 130px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 130px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket:hover{transform:rotate(-.8deg) translateX(8px)}
.ticket>div{padding:26px 30px}
.ticket h3{font-size:28px;margin-bottom:6px}
.ticket p{color:var(--mute);font-size:15px}
.ticket .stub{border-left:2px dashed var(--line);display:grid;place-items:center;text-align:center;background:rgba(138,23,48,.25);font:500 32px var(--serif);color:var(--gold);padding:10px}
.ticket .stub small{display:block;font:400 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
/* certificates */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.cert{position:relative;padding:34px 28px;border:1px solid var(--gold);outline:1px solid var(--line);outline-offset:6px;background:var(--bg2);transition:transform .35s}
.cert:hover{transform:translateY(-8px)}
.seal{width:54px;height:54px;color:var(--gold);margin-bottom:14px;animation:spin 14s linear infinite}
.cert h3{font-size:24px;margin-bottom:6px}
.cert p{color:var(--mute);font-size:15px}
/* training */
.row{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:28px 0;border-top:1px solid var(--line);transition:padding .35s,background .35s}
.row:last-child{border-bottom:1px solid var(--line)}
.row:hover{padding-left:22px;background:linear-gradient(90deg,rgba(138,23,48,.3),transparent)}
.row .n{font:italic 500 56px var(--serif);color:var(--gold);line-height:1}
.row h3{font-size:28px}
.row small{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.row p{color:var(--mute);font-size:15px}
/* contact */
.contact{text-align:center}
.mail{font:italic 500 clamp(24px,5vw,52px) var(--serif);text-decoration:none;border-bottom:1px solid var(--gold);transition:color .3s}
.mail:hover{color:var(--gold)}
.soc{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
footer{text-align:center;padding:40px 6vw calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--mute);font-size:14px;letter-spacing:.12em}
footer b{color:var(--gold);font:italic 500 18px var(--serif);letter-spacing:.04em}
@media(max-width:760px){.about{grid-template-columns:1fr}nav b{display:none}.ticket{grid-template-columns:1fr 96px;-webkit-mask:none;mask:none}.row{grid-template-columns:60px 1fr}.row .n{font-size:40px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}.curtain,.fl{display:none}.hero h1 span,.sub,.btns{opacity:1;transform:none}}
/* 404 */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;padding:40px 6vw;background:radial-gradient(ellipse at 50% 100%,#2a0d16,var(--bg) 70%)}
.nf .spot{left:50%;opacity:.8}
.nf>div{position:relative;z-index:2}
.nf h1{font-size:clamp(100px,28vw,320px);color:transparent;-webkit-text-stroke:2px var(--gold);letter-spacing:-.04em;animation:flick 5s infinite}
@keyframes flick{0%,92%,100%{opacity:1}94%{opacity:.3}96%{opacity:.9}98%{opacity:.4}}
.nf h2{font-size:clamp(26px,5vw,48px);margin:0 0 14px;font-style:italic}
.nf p{color:var(--mute);margin-bottom:30px}
.rope{position:absolute;top:0;left:50%;width:2px;height:24vh;background:var(--gold);transform-origin:top;animation:swing 4s ease-in-out infinite alternate;z-index:3}
.rope .ic{position:absolute;top:100%;left:-35px;width:72px;height:80px;color:var(--ink)}
@keyframes swing{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}