@font-face { font-family: "Vyral Jost"; src: url("fonts/Jost (1)/Jost-VariableFont_wght.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }

:root {
  --white: #eeeeeb;
  --black: #070709;
  --line: rgba(255,255,255,.18);
  --muted: rgba(255,255,255,.58);
  --selection: #f4b8d2;
  --pad: clamp(20px,3vw,48px);
  --ease: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scrollbar-gutter: stable; background: var(--black); }
body { margin: 0; background: var(--black); color: var(--white); font-family: "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
::selection { background: var(--selection); color: var(--black); text-shadow: none; }

html.is-locked,html.is-locked body { overflow: hidden; }
html.is-locked body > :not(.access-gate):not(#light-canvas):not(script) { visibility: hidden; }

.access-gate { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; overflow: hidden; padding: var(--pad); background: rgba(3,3,6,.12); color: var(--white); }
.access-gate[hidden] { display: none; }
.access-gate::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 48%,transparent 0,rgba(2,2,5,.08) 42%,rgba(2,2,5,.42) 100%); }
.access-gate::after { content: ""; position: absolute; inset: var(--pad); border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.access-gate__panel { position: relative; z-index: 1; width: min(740px,calc(100vw - var(--pad) * 4)); }
.access-gate__logo { width: 42px; height: 42px; margin-bottom: clamp(34px,7vh,76px); object-fit: contain; }
.access-gate__eyebrow,.access-gate__index,.access-gate__form label,.access-gate__status { font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.access-gate__eyebrow { margin: 0 0 24px; color: var(--muted); }
.access-gate h1 { margin: 0; font-size: clamp(70px,11vw,170px); line-height: .68; letter-spacing: -.075em; font-weight: 900; }
.access-gate h1 em { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.86); font-family: Georgia,serif; font-weight: 400; }
.access-gate__form { width: min(520px,100%); margin-top: clamp(56px,9vh,92px); }
.access-gate__form label { display: block; margin-bottom: 12px; color: var(--muted); }
.access-gate__field { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid rgba(255,255,255,.5); transition: border-color .25s; }
.access-gate__field:focus-within { border-color: #fff; }
.access-gate__field input,.access-gate__field button { min-width: 0; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--white); font: inherit; }
.access-gate__field input { height: 52px; padding: 0 16px 0 0; font-size: 22px; letter-spacing: .14em; }
.access-gate__field button { padding: 0 0 0 22px; font-size: 9px; font-weight: 800; letter-spacing: .16em; cursor: pointer; transition: opacity .2s; }
.access-gate__field button:hover { opacity: .55; }
.access-gate__field button:disabled { opacity: .3; }
.access-gate__status { min-height: 1em; margin: 14px 0 0; color: #d9a2a2; }
.access-gate__form.has-error .access-gate__field { animation: access-shake .35s ease; border-color: #d9a2a2; }
.access-gate__index { position: absolute; z-index: 1; right: calc(var(--pad) + 18px); bottom: calc(var(--pad) + 16px); color: var(--muted); }
@keyframes access-shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

@media (pointer:fine) { html.is-locked body,html.is-locked input,html.is-locked button { cursor: auto; } }

html.lenis,html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

#light-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; background: #09090c; pointer-events: none; }
.grain { display: none; }
main,footer { position: relative; z-index: 1; }

.site-header { position: fixed; z-index: 600; top: 0; left: 0; right: 0; height: 78px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; mix-blend-mode: difference; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.site-header nav { display: flex; gap: 28px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-header nav a,.artist-menu-toggle { transition: opacity .25s; }
.site-header nav a:hover,.artist-menu-toggle:hover { opacity: .5; }
.artist-menu-toggle { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.artist-menu-toggle:focus-visible { opacity: .62; }
.artist-menu-toggle i { position: relative; width: 8px; height: 8px; display: block; }
.artist-menu-toggle i::before,.artist-menu-toggle i::after { content: ""; position: absolute; left: 0; top: 3px; width: 8px; height: 1px; background: currentColor; transform-origin: center; transition: transform .55s var(--ease); }
.artist-menu-toggle i::after { transform: rotate(90deg); }
.artist-menu-open .artist-menu-toggle i::before { transform: rotate(45deg); }
.artist-menu-open .artist-menu-toggle i::after { transform: rotate(-45deg); }

.artist-menu { position: fixed; z-index: 500; inset: 0; visibility: hidden; pointer-events: none; }
.artist-menu__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.38); opacity: 0; transition: opacity .6s ease,visibility 0s linear .8s; }
.artist-menu__panel { position: absolute; top: 0; right: 0; width: min(720px,58vw); height: 100%; overflow: hidden; padding: 28px clamp(28px,4vw,60px) 24px; display: flex; flex-direction: column; background: rgba(8,8,12,.74); border-left: 1px solid rgba(255,255,255,.16); box-shadow: -40px 0 100px rgba(0,0,0,.24); backdrop-filter: blur(28px) saturate(1.15); opacity: 1; transform: translate3d(102%,0,0); transition: transform .8s cubic-bezier(.76,0,.24,1),opacity .4s ease; }
.artist-menu__panel::before { content: ""; position: absolute; z-index: -1; width: 70%; height: 48%; right: -15%; top: 5%; border-radius: 50%; background: rgba(92,72,133,.18); filter: blur(80px); pointer-events: none; }
.artist-menu.is-open { visibility: visible; pointer-events: auto; }
.artist-menu.is-open .artist-menu__scrim { opacity: 1; transition-delay: 0s; }
.artist-menu.is-open .artist-menu__panel { transform: translate3d(0,0,0); }
.artist-menu.is-closing { visibility: visible; pointer-events: none; }
.artist-menu.is-closing .artist-menu__scrim { opacity: 0; transition: opacity .4s ease; }
.artist-menu.is-closing .artist-menu__panel { opacity: 0; transform: translate3d(0,0,0); transition: opacity .4s cubic-bezier(.4,0,1,1); }
.artist-menu.is-closing .artist-menu__artist { opacity: 1; transform: translate3d(0,0,0); }
.artist-menu__topline,.artist-menu__footer { display: flex; align-items: center; justify-content: space-between; font-size: 7px; font-weight: 700; letter-spacing: .18em; color: var(--muted); }
.artist-menu__list { margin-top: auto; margin-bottom: auto; border-top: 1px solid rgba(255,255,255,.2); }
.artist-menu__artist { position: relative; min-height: clamp(132px,21vh,178px); overflow: hidden; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); outline: 0; opacity: 0; transform: translate3d(0,32px,0); transition: opacity .45s ease,transform .7s var(--ease); }
.artist-menu.is-open .artist-menu__artist { opacity: 1; transform: translate3d(0,0,0); }
.artist-menu.is-open .artist-menu__artist:first-child { transition-delay: .24s; }
.artist-menu.is-open .artist-menu__artist:nth-child(2) { transition-delay: .34s; }
.artist-menu__artist > span { position: relative; z-index: 2; font-size: 8px; letter-spacing: .14em; }
.artist-menu__name { position: relative; z-index: 2; font-size: clamp(44px,6vw,84px); line-height: .85; letter-spacing: -.075em; transition: transform .6s var(--ease),opacity .3s ease,filter .4s; }
.artist-menu__stats { position: absolute; z-index: 3; left: 42px; top: 39%; width: calc(46% - 42px); display: grid; gap: 12px; pointer-events: none; transform: translate3d(0,-50%,0); }
.artist-menu__stats p { margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; opacity: 0; transform: translate3d(-14px,10px,0); transition: opacity .3s ease,transform .55s var(--ease); }
.artist-menu__stats p:nth-child(2) { transition-delay: .07s; }
.artist-menu__stats span { font-size: clamp(9px,.75vw,11px); line-height: 1.15; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.artist-menu__stats b { font-size: clamp(15px,1.65vw,22px); font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.artist-menu__platforms { position: absolute; z-index: 4; left: 42px; bottom: 14px; width: calc(46% - 42px); display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translate3d(-10px,8px,0); transition: opacity .3s ease .08s,transform .5s var(--ease) .08s; }
.artist-menu__platforms a { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; transition: color .25s ease,transform .3s var(--ease),filter .25s ease; }
.artist-menu__platforms a:hover,.artist-menu__platforms a:focus-visible { color: var(--selection); transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 8px rgba(244,184,210,.3)); outline: 0; }
.artist-menu__platforms svg { width: 25px; height: 25px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.artist-menu__platforms svg circle,.artist-menu__platforms .artist-menu__youtube-mark { fill: currentColor; stroke: none; }
.artist-menu__list img { position: absolute; z-index: 1; right: 0; top: 0; width: 54%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(100deg,transparent 0%,rgba(0,0,0,.08) 9%,rgba(0,0,0,.45) 21%,#000 36%); mask-image: linear-gradient(100deg,transparent 0%,rgba(0,0,0,.08) 9%,rgba(0,0,0,.45) 21%,#000 36%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; opacity: 0; filter: saturate(.72) contrast(1.08) brightness(.72); transform: translate3d(34px,0,0) scale(1.04); transition: opacity .38s ease,transform .7s var(--ease),filter .5s; }
.artist-menu__artist:is(.is-active,:focus-within,:focus-visible) .artist-menu__name { transform: translateX(18px); opacity: 0; filter: blur(5px); }
.artist-menu__artist:is(.is-active,:focus-within,:focus-visible) .artist-menu__stats p { opacity: 1; transform: translate3d(0,0,0); }
.artist-menu__artist:is(.is-active,:focus-within,:focus-visible) .artist-menu__platforms { opacity: 1; transform: translate3d(0,0,0); }
.artist-menu__artist:is(.is-active,:focus-within,:focus-visible) img { opacity: .9; transform: translate3d(0,0,0) scale(1); filter: saturate(.88) contrast(1.06) brightness(.8); }
@media (hover:hover) {
  .artist-menu__artist:hover .artist-menu__name { transform: translateX(18px); opacity: 0; filter: blur(5px); }
  .artist-menu__artist:hover .artist-menu__stats p { opacity: 1; transform: translate3d(0,0,0); }
  .artist-menu__artist:hover .artist-menu__platforms { opacity: 1; transform: translate3d(0,0,0); }
  .artist-menu__artist:hover img { opacity: .9; transform: translate3d(0,0,0) scale(1); filter: saturate(.88) contrast(1.06) brightness(.8); }
}
.artist-menu__footer { margin-top: 14px; }

.hero { position: relative; min-height: 155svh; overflow: hidden; background: transparent; }
.hero-title { position: absolute; z-index: 3; left: 50%; top: 37svh; transform: translate(-50%,-50%); margin: 0; display: flex; align-items: baseline; gap: clamp(16px,2vw,34px); white-space: nowrap; }
.hero-logo-title { top: 35svh; }
.hero-logo-title img { width: clamp(118px,12vw,190px); height: auto; object-fit: contain; filter: drop-shadow(0 14px 30px rgba(0,0,0,.28)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#hero-three-root { position: absolute; z-index: 2; left: 0; top: 48svh; width: 100%; height: 100svh; }
.hero-webgl { position: relative; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s var(--ease); touch-action: pan-y; user-select: none; }
.hero-webgl.is-ready { opacity: 1; }
.hero-webgl canvas { display: block; width: 100% !important; height: 100% !important; }
.three-reel-hint { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 10px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(8,8,11,.45); backdrop-filter: blur(14px); font-size: 7px; letter-spacing: .16em; pointer-events: none; }
.hero-a11y-links { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hero-bottom { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 24px; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .15em; }

.demos { position: relative; min-height: 100svh; padding: 100px var(--pad) 50px; display: grid; place-content: center; text-align: center; background: transparent; }
.demos > span { margin-bottom: 34px; font-size: 8px; letter-spacing: .18em; }
.demo-link { display: block; font-size: clamp(98px,19vw,280px); line-height: .64; letter-spacing: -.1em; font-weight: 900; }
.demo-link em { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.88); font-family: Georgia,serif; font-weight: 400; }
.demos p { margin: 45px 0 0; font-size: 8px; letter-spacing: .18em; }

footer { height: 86px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 0; background: transparent; font-size: 8px; letter-spacing: .15em; }
footer span { text-align: center; color: var(--muted); }
footer a:last-child { justify-self: end; }

.cursor-ring,.cursor-label { position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none; }
.cursor-ring { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; opacity: .96; mix-blend-mode: difference; will-change: transform,width,height,margin; transition: width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease); }
.cursor-ring.active { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor-label { padding: 10px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 40px; background: rgba(12,12,16,.58); backdrop-filter: blur(14px); font-size: 8px; letter-spacing: .12em; opacity: 0; transform: translate(20px,20px) scale(.8); transition: opacity .2s,transform .35s var(--ease); }
.cursor-label.visible { opacity: 1; transform: translate(20px,20px) scale(1); }

@media (pointer:fine) { body,a,button { cursor: none; } }
@media (pointer:coarse) { .cursor-ring,.cursor-label { display: none; } }

@media (max-width: 760px) {
  .access-gate { align-items: center; }
  .access-gate::after { inset: 14px; }
  .access-gate__panel { width: calc(100vw - 64px); }
  .access-gate__logo { width: 34px; height: 34px; }
  .access-gate h1 { font-size: clamp(56px,18vw,92px); }
  .access-gate__form { margin-top: 52px; }
  .access-gate__index { right: 32px; bottom: 28px; }
  .site-header { height: 64px; }
  .brand span { display: none; }
  .site-header nav { gap: 16px; }
  .artist-menu__panel { width: 100%; padding: 22px 24px 20px; background: rgba(8,8,12,.84); }
  .artist-menu__artist { min-height: 142px; grid-template-columns: 30px minmax(0,1fr); }
  .artist-menu__name { font-size: clamp(48px,15vw,72px); }
  .artist-menu__stats { left: 30px; width: calc(50% - 38px); gap: 12px; }
  .artist-menu__stats p { grid-template-columns: 1fr; gap: 3px; }
  .artist-menu__stats span { font-size: 8px; }
  .artist-menu__stats b { font-size: 14px; }
  .artist-menu__platforms { left: 30px; bottom: 10px; width: calc(50% - 38px); }
  .artist-menu__platforms a { width: 26px; height: 27px; }
  .artist-menu__platforms svg { width: 22px; height: 22px; }
  .artist-menu__list img { width: 52%; }
  .hero { min-height: 130svh; }
  .hero-title { top: 34svh; gap: 10px; }
  .hero-logo-title img { width: clamp(92px,28vw,126px); }
  #hero-three-root { top: 44svh; height: 82svh; }
  .three-reel-hint { bottom: 12px; }
  .hero-bottom span { display: none; }
  .hero-bottom { justify-content: center; text-align: center; }
  .demo-link { font-size: 26vw; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}