/* pointer chrome: left-edge scroll spine + custom liquid-glass cursor */
/* cursor */
.spine{position:fixed;left:20px;top:15vh;height:70vh;width:34px;z-index:120;pointer-events:none;overflow:visible}
#spineTrack{stroke:var(--line)}
#spineDraw{stroke:var(--gold)}
.spine-head{position:fixed;left:-20px;top:-20px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px 3px color-mix(in srgb,var(--gold) 55%,transparent);transform:translate(-50%,-50%);z-index:121;pointer-events:none;opacity:0;transition:opacity .4s,width .2s,height .2s}
.spine-head.on{opacity:1}
.spine-head.grab{width:18px;height:18px}
.spine-hit{position:fixed;left:2px;top:15vh;width:64px;height:70vh;z-index:122;cursor:grab}
.spine-hit:active{cursor:grabbing}
/* section markers along the spine */
.sdot{position:fixed;left:-20px;top:-20px;width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);z-index:121;pointer-events:none;opacity:0;transition:opacity .3s ease,box-shadow .35s ease,width .25s ease,height .25s ease}
.sdot.active{opacity:1;box-shadow:0 0 10px 2px color-mix(in srgb,var(--gold) 55%,transparent);width:11px;height:11px}
body.spine-reveal .sdot{opacity:1;transition-delay:calc(var(--i)*.045s)}
.sdot.hot{width:11px;height:11px;box-shadow:0 0 10px 2px color-mix(in srgb,var(--gold) 55%,transparent)}
.slabel{position:fixed;left:-20px;top:-20px;transform:translateY(-50%);white-space:nowrap;font-family:'Inter Tight',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--ink);background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid color-mix(in srgb,var(--ink) 42%,transparent);padding:10px 20px;border-radius:40px;z-index:121;pointer-events:none;opacity:0;translate:-10px 0;transition:opacity .3s ease,translate .35s cubic-bezier(.16,1,.3,1),background .3s,color .3s,border-color .3s}
body.spine-reveal .slabel{opacity:1;translate:0 0;pointer-events:auto;cursor:pointer;transition-delay:calc(var(--i)*.045s)}
.slabel.active{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.slabel.hot{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media(max-width:820px){.spine,.spine-head,.spine-hit,.sdot,.slabel{display:none}}
/* custom cursor — outer ring, gap, then a dark glossy orb with a symbol at its centre */
.cur{position:fixed;top:0;left:0;width:60px;height:60px;border-radius:50%;pointer-events:none;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transform:translate3d(-50%,-50%,0);will-change:transform;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 0 12px rgba(255,255,255,.05);
  opacity:1;transition:width .45s cubic-bezier(.16,1,.3,1),height .45s cubic-bezier(.16,1,.3,1),border-color .35s,opacity .3s}
/* inner glass — a CLEAR lens that magnifies + refracts what's behind it (no dark tint) */
.cur-core{position:absolute;inset:14%;border-radius:50%;z-index:0;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 8px rgba(255,255,255,.22),inset 0 -3px 10px rgba(255,255,255,.05),0 0 8px rgba(255,255,255,.05);
  -webkit-backdrop-filter:url(#curlens) blur(.7px) saturate(1.4) brightness(1.08) contrast(1.03);
  backdrop-filter:url(#curlens) blur(.7px) saturate(1.4) brightness(1.08) contrast(1.03)}
.cur-svgdefs{position:absolute;width:0;height:0;pointer-events:none}
/* light rays sweeping 360° — masked to ride ONLY on the inner circle's line */
.cur-ray{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:1;opacity:.7;transition:opacity .35s;
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 65%,#000 67% 68%,transparent 70% 100%);
  mask:radial-gradient(circle closest-side,transparent 0 65%,#000 67% 68%,transparent 70% 100%)}
.cur-ray::before{content:'';position:absolute;inset:-35%;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent 12deg,
    rgba(255,255,255,.9) 40deg,rgba(255,255,255,.9) 108deg,
    transparent 132deg,
    transparent 215deg,rgba(255,255,255,.18) 232deg,rgba(255,255,255,.18) 250deg,transparent 266deg,
    transparent 360deg);
  filter:blur(.55px);animation:curspin 8s linear infinite}
@keyframes curspin{to{transform:rotate(360deg)}}
.cur.hover .cur-ray{opacity:.95}
.cur svg{position:absolute;z-index:2;color:#fff;filter:drop-shadow(0 0 4px rgba(255,255,255,.35));transition:opacity .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.cur .ic-star{opacity:.55;transform:scale(.5)}
.cur .ic-arrow{opacity:0;transform:scale(.5) rotate(-14deg)}
.cur.hover{width:72px;height:72px;border-color:rgba(255,255,255,.55)}
.cur.hover .ic-star{opacity:0;transform:scale(.55) rotate(14deg)}
.cur.hover .ic-arrow{opacity:1;transform:none}
.cur.hide{opacity:0}
@media (pointer:coarse){.cur{display:none}}