*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --copper:#b87333;--copper-d:#7a4a1e;--copper-l:#d4956a;
  --blue:#0055ff;--gold:#ffd700;--green:#00ff64;
  --gC:rgba(184,115,51,.7);--gB:rgba(0,85,255,.7);--gG:rgba(255,215,0,.8);
  --dim:rgba(255,255,255,.42);--mid:rgba(255,255,255,.72);
  --border:rgba(184,115,51,.22);
}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:'Space Grotesk',sans-serif;cursor:none}

/* LOADER */
#loader{position:fixed;inset:0;z-index:300;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1.2s,visibility 1.2s}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ld-logo{font-family:'Cinzel',serif;font-size:clamp(42px,8vw,96px);font-weight:700;letter-spacing:18px;background:linear-gradient(140deg,#fff 0%,var(--copper-l) 55%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:44px;animation:breathe 2.5s ease-in-out infinite;text-transform:uppercase}
.ld-track{width:220px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.ld-fill{height:100%;width:0;background:linear-gradient(90deg,var(--copper-d),var(--copper),var(--gold));transition:width .18s linear}
.ld-msg{margin-top:18px;font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--dim)}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.018)}}

/* VIDEO INTRO */
#intro{position:fixed;inset:0;z-index:10;background:#000;transition:opacity 1.8s ease,visibility 1.8s}
#intro.out{opacity:0;visibility:hidden;pointer-events:none}
#intro video{width:100%;height:100%;object-fit:cover;filter:brightness(1.08) contrast(1.12) saturate(1.2)}
#intro-vig{position:absolute;inset:0;background:radial-gradient(ellipse 80% 68% at 50% 50%,transparent 18%,rgba(0,0,0,.48) 60%,rgba(0,0,0,.94) 100%)}

/* LANDING */
#landing{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;transition:opacity 1.4s,visibility 1.4s}
#landing.out{opacity:0;visibility:hidden}
.la-eye{font-size:9px;letter-spacing:7px;text-transform:uppercase;color:var(--copper);margin-bottom:18px;opacity:0;animation:fUp .9s .5s forwards}
.la-title{font-family:'Cormorant Garamond',serif;font-size:clamp(90px,15vw,200px);font-weight:700;letter-spacing:10px;line-height:.85;text-align:center;background:linear-gradient(160deg,#fff 0%,rgba(255,255,255,.82) 38%,var(--copper-l) 72%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;animation:fUp .9s .8s forwards;margin-bottom:16px;text-transform:uppercase}.la-t-the{font-weight:300;font-style:italic;letter-spacing:16px}.la-t-eye{font-weight:700;letter-spacing:10px}
.la-sub{font-family:'Cinzel',serif;font-size:clamp(9px,1.1vw,14px);font-weight:400;letter-spacing:9px;text-transform:uppercase;color:var(--mid);opacity:0;animation:fUp .9s 1.1s forwards;margin-bottom:56px}
.la-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;opacity:0;animation:fUp .9s 1.5s forwards;pointer-events:all}
.la-hint{position:absolute;bottom:34px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;animation:fUp .9s 2.2s forwards}
.la-hint span{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--dim)}
.hint-line{width:1px;height:44px;background:linear-gradient(to bottom,var(--copper),transparent);animation:hPulse 2s infinite}
@keyframes fUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes hPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* EYE CANVAS MOUNT */
#pixi-mount{position:fixed;inset:0;z-index:5;opacity:0;transition:opacity 1.4s;background:#000}
#pixi-mount.show{opacity:1}
#eye-canvas{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;display:block}

/* SCANLINES */
#scan{position:fixed;inset:0;z-index:6;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.022) 2px,rgba(0,0,0,.022) 4px)}

/* CORNERS */
.crn{position:fixed;z-index:18;pointer-events:none;opacity:0;transition:opacity .9s}
.crn.on{opacity:1}
.crn-tl{top:0;left:0}.crn-tr{top:0;right:0;transform:scaleX(-1)}.crn-bl{bottom:0;left:0;transform:scaleY(-1)}.crn-br{bottom:0;right:0;transform:scale(-1,-1)}

/* HUD TOP */
#htop{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:20px 34px;background:linear-gradient(to bottom,rgba(0,0,0,.88) 0%,transparent 100%);opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;pointer-events:none}
#htop.on{opacity:1;visibility:visible;pointer-events:all}
.hl{font-family:'Cinzel',serif;font-size:14px;font-weight:700;letter-spacing:8px;text-transform:uppercase;cursor:none}.logo-the{font-weight:400;font-size:12px;letter-spacing:10px;opacity:.8}.logo-eye{font-weight:700;letter-spacing:8px}
.hl em{color:var(--copper);font-style:normal}
.hnav{display:flex;gap:26px;align-items:center}
.ha{font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--mid);background:none;border:none;font-family:'Space Grotesk',sans-serif;cursor:none;transition:color .2s}
.ha:hover{color:var(--copper-l)}
.hclaim{padding:9px 22px;background:linear-gradient(135deg,var(--copper),var(--copper-d));color:#fff;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;cursor:none;clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);transition:all .3s}
.hclaim:hover{box-shadow:0 0 28px var(--gC)}

/* HUD BOTTOM */
#hbot{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 34px;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%);opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;pointer-events:none}
#hbot.on{opacity:1;visibility:visible;pointer-events:all}
.hstats{display:flex;gap:32px}
.sv{font-size:18px;font-weight:700;line-height:1}
.sl{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-top:3px}
.zctrl{display:flex;align-items:center;gap:6px}
.zb{width:34px;height:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:13px;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .2s}
.zb:hover{background:rgba(184,115,51,.2);border-color:var(--copper)}
.zlbl{font-size:10px;letter-spacing:2px;color:var(--dim);min-width:50px;text-align:center;font-variant-numeric:tabular-nums}
.hcoords{font-size:9px;letter-spacing:1.5px;color:var(--dim);font-variant-numeric:tabular-nums}

/* LEGEND */
#legend{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:13px;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;pointer-events:none}
#legend.on{opacity:1;visibility:visible;pointer-events:all}
.li{display:flex;align-items:center;gap:9px;cursor:none}
.ld{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.lt{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);transition:color .2s}
.li:hover .lt{color:#fff}

/* TOOLTIP */
#tip{position:fixed;z-index:40;pointer-events:none;opacity:0;transition:opacity .15s;max-width:215px}
#tip.on{opacity:1}
.ti{background:rgba(2,2,2,.97);border:1px solid rgba(184,115,51,.3);padding:14px 16px;backdrop-filter:blur(24px);clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%)}
.tz{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--copper);margin-bottom:5px}
.tn{font-size:13px;font-weight:600;margin-bottom:4px}
.td{font-size:10px;color:var(--dim);line-height:1.5;margin-bottom:9px}
.trow{display:flex;align-items:center;justify-content:space-between}
.ts{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:3px 8px}
.ts.available{background:rgba(0,255,100,.07);color:#00ff64;border:1px solid rgba(0,255,100,.22)}
.ts.sold{background:rgba(184,115,51,.1);color:var(--copper-l);border:1px solid rgba(184,115,51,.3)}
.ts.premium{background:rgba(0,85,255,.1);color:#66aaff;border:1px solid rgba(0,85,255,.3)}
.ts.legendary{background:rgba(255,215,0,.07);color:var(--gold);border:1px solid rgba(255,215,0,.3)}
.tprice{font-size:13px;font-weight:700}

/* NOTIF */
#notif{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:60;padding:10px 22px;background:rgba(0,0,0,.97);border:1px solid var(--copper);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--copper-l);clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#notif.on{opacity:1}

/* MODAL */
#modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.88);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:all .4s}
#modal.on{opacity:1;visibility:visible}
.mp{background:rgba(3,3,3,.99);border:1px solid rgba(184,115,51,.28);width:90%;max-width:540px;max-height:90vh;overflow-y:auto;animation:mIn .4s ease;clip-path:polygon(12px 0%,100% 0%,calc(100% - 12px) 100%,0% 100%)}
.mh{padding:28px 34px 20px;border-bottom:1px solid rgba(184,115,51,.1);position:relative}
.me{font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--copper);margin-bottom:6px}
.mt{font-size:22px;font-weight:700}
.mx{position:absolute;top:24px;right:28px;width:30px;height:30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--mid);font-size:14px;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .2s}
.mx:hover{border-color:var(--copper);color:var(--copper-l)}
.mb{padding:26px 34px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.mil{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.miv{font-size:13px;font-weight:600}
.miv.price{color:var(--copper-l);font-size:20px}
.fg{margin-bottom:16px}
.fl{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin-bottom:7px}
.fi{width:100%;padding:11px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#fff;font-family:'Space Grotesk',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.fi:focus{border-color:var(--copper)}
.fi::placeholder{color:var(--dim)}
.upl{border:1px dashed rgba(184,115,51,.28);padding:20px;text-align:center;cursor:none;transition:all .3s;background:rgba(184,115,51,.02)}
.upl:hover{border-color:var(--copper);background:rgba(184,115,51,.06)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:20px}
.to{padding:11px 6px;text-align:center;border:1px solid rgba(255,255,255,.08);cursor:none;transition:all .2s;background:rgba(255,255,255,.02)}
.to:hover,.to.on{border-color:var(--copper);background:rgba(184,115,51,.12)}
.tn2{font-size:11px;font-weight:600;letter-spacing:1px}
.tp2{font-size:9px;color:var(--copper);margin-top:2px}
.mf{padding:20px 34px 28px;border-top:1px solid rgba(184,115,51,.1);display:flex;gap:12px;align-items:center}
.bbuy{flex:1;padding:14px;background:linear-gradient(135deg,var(--copper),var(--copper-d));color:#fff;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;border:none;cursor:none;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all .3s}
.bbuy:hover{box-shadow:0 0 36px var(--gC);transform:translateY(-2px)}
.sec{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--dim)}
.sec i{color:var(--copper)}

/* PANEL */
#panel{position:fixed;right:-320px;top:0;bottom:0;width:300px;z-index:35;background:rgba(2,2,2,.98);border-left:1px solid rgba(184,115,51,.18);transition:right .5s cubic-bezier(.4,0,.2,1);overflow-y:auto;backdrop-filter:blur(20px)}
#panel.on{right:0}
.ph{padding:26px 22px 18px;border-bottom:1px solid rgba(184,115,51,.1);display:flex;align-items:center;justify-content:space-between}
.pt{font-size:9px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--copper)}
.pc{background:none;border:none;color:var(--dim);font-size:15px;cursor:none}
.psec{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.03)}
.pst{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.spc{display:flex;align-items:center;gap:10px;padding:9px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);margin-bottom:5px;cursor:none;transition:all .2s}
.spc:hover{border-color:rgba(184,115,51,.32);background:rgba(184,115,51,.04)}
.sav{width:30px;height:30px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.sn{font-size:12px;font-weight:600}
.sz{font-size:9px;color:var(--dim)}
.sbg{margin-left:auto;padding:2px 5px;font-size:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* CURSORS */
#cdot{position:fixed;width:5px;height:5px;background:var(--copper);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);mix-blend-mode:difference}
#cring{position:fixed;width:26px;height:26px;border:1px solid rgba(184,115,51,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .22s,height .22s,border-color .22s}
#cring.hov{width:44px;height:44px;border-color:var(--copper)}

/* BUTTONS */
.bp{padding:14px 36px;background:linear-gradient(135deg,var(--copper) 0%,var(--copper-d) 100%);color:#fff;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;border:none;cursor:none;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all .3s;position:relative;overflow:hidden}
.bp::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);opacity:0;transition:opacity .3s}
.bp:hover::after{opacity:1}
.bp:hover{box-shadow:0 0 42px var(--gC),0 0 80px rgba(184,115,51,.2);transform:translateY(-2px)}
.bs{padding:13px 36px;background:transparent;color:rgba(255,255,255,.74);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;letter-spacing:3px;text-transform:uppercase;border:1px solid rgba(255,255,255,.17);cursor:none;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:all .3s}
.bs:hover{border-color:var(--copper);color:var(--copper-l);box-shadow:0 0 24px var(--gC)}

/* ZOOM BADGE */
#zoom-badge{font-family:'Cinzel',serif;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:25;pointer-events:none;font-size:clamp(28px,4vw,56px);font-weight:700;letter-spacing:5px;text-transform:uppercase;text-align:center;opacity:0;transition:opacity .5s;text-shadow:none}
#zoom-badge.flash{opacity:1}

/* PARTICLES */
#particles{position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .6s}
#particles.show{opacity:1}

/* ANIMATIONS */
@keyframes mIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}

/* MOBILE */
@media(max-width:768px){
  #legend{display:none}
  .hstats{gap:14px}.sv{font-size:14px}
  .la-btns{flex-direction:column;align-items:center}
  .mp{clip-path:none}.mb{padding:20px}.mh{padding:20px}
  .mf{flex-direction:column;padding:16px 20px}
  .tgrid{grid-template-columns:1fr}
  .hnav{gap:14px}
}