/* Particle edition. All changes are isolated from the original website. */
#particleField { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; transition: opacity .65s; }
.particle-curtain { position: fixed; inset: 0; z-index: 19; background: #030308; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
body.intro-running .particle-curtain { opacity: 1; }
body.particle-revealing .particle-curtain { opacity: 0; }
.particle-status { position: fixed; z-index: 60; bottom: 12%; left: 50%; transform: translateX(-50%); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .25em; color: #9aabc2; transition: opacity .4s; white-space: nowrap; }
.particle-status span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #adcaff; margin: 0 12px 2px 0; box-shadow: 0 0 14px #adcaff; }
.particle-skip, .particle-replay { position: fixed; right: 30px; bottom: 24px; z-index: 61; border: 0; background: transparent; color: #9aabc2; font: 10px var(--mono); letter-spacing: .12em; cursor: pointer; padding: 12px; }
.particle-skip:hover, .particle-replay:hover { color: white; }
.particle-replay { display: none; }
body.is-ready.at-home .particle-replay { display: block; }
body:not(.intro-running) .particle-skip, body:not(.intro-running) .particle-status { display: none; }
.particle-signature { position: fixed; top: 49%; left: 50%; transform: translateX(-50%); text-align: center; z-index: 21; pointer-events: none; width: 90%; opacity: 0; transition: opacity 1s; }
.particle-signature p { font: 10px var(--mono); color: #b2bed2; letter-spacing: .38em; margin: 0 0 14px; }
.particle-signature > span { font: 13px var(--body); color: #717d90; letter-spacing: .04em; }
.particle-static { display: none; }
body.is-ready.at-home .particle-signature { opacity: 1; }
body:not(.at-home):not(.intro-running) #particleField { opacity: 0; }
body.particle-active.at-home #webgl { opacity: .48; transition: opacity 1s; }
body.particle-revealing .dock, body.particle-revealing .space-menu, body.particle-revealing .home-telemetry { opacity: 1; transition: opacity 1s; }
body.particle-active.is-ready .space-menu button { animation: none; opacity: 1; transform: none; }
@media(max-width: 600px) {
  .particle-signature { top: 43%; }
  .particle-signature p { font-size: 8px; letter-spacing: .26em; }
  .particle-signature > span { font-size: 11px; }
  .particle-replay, .particle-skip { right: 10px; bottom: 8px; font-size: 8px; }
}
@media(prefers-reduced-motion: reduce) {
  #particleField, .particle-curtain, .particle-replay { display: none !important; }
  .particle-static { display: block; width: min(550px, 76vw); margin: -130px auto 30px; }
  .particle-signature { transition: none; }
}
body:not(.at-home) .particle-signature { visibility: hidden; }
body.intro-running .particle-signature { opacity: 0; }

/* A quiet editorial frame lets the particle artwork lead. */
.particle-signature { top: 48%; }
.particle-signature p { font: 400 13px var(--body); letter-spacing: .08em; color: #a1aaba; margin: 0; text-transform: none; }
.home-telemetry { display: none; }
.space-menu { width: min(1040px, calc(100% - 80px)); bottom: 9vh; gap: 22px; align-items: stretch; }
.directory-kicker { text-align: left; margin: 0; font: 10px var(--mono); letter-spacing: .16em; color: #8d98ad; }
.directory-nodes { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.space-menu button { min-width: 0; min-height: 100px; align-items: flex-start; justify-content: flex-start; padding: 34px 0 0; font: 400 19px var(--body); letter-spacing: .015em; text-transform: none; text-align: left; }
.space-menu button.is-lead .menu-label { letter-spacing: .015em; }
.space-menu button::before { left: 0; width: 100%; transform: none; opacity: .28; background: linear-gradient(90deg, #8297b8, #8297b822); }
.space-menu button::after { top: -2px; left: 0; transform: scale(.5); opacity: .7; }
.menu-node { left: 0; top: 12px; opacity: .55; transform: none; font: 8px var(--mono); letter-spacing: .1em; }
.menu-meta { text-align: left; max-width: none; margin-top: 7px; font: 11px var(--body); letter-spacing: .015em; color: #7f8b9f; }
.space-menu button:hover .menu-label, .space-menu button:focus-visible .menu-label { letter-spacing: .015em; transform: translateX(4px); text-shadow: 0 0 22px #b9d3ff88; }
.space-menu button:hover::before, .space-menu button:focus-visible::before { transform: none; opacity: .8; }
.space-menu button:hover::after, .space-menu button:focus-visible::after { transform: scale(1); box-shadow: 0 0 16px #c8dcff; }
.space-menu button:focus-visible { outline: 1px solid #9ab5dc; outline-offset: 8px; border-radius: 2px; }
@media(max-width: 860px) {
  .space-menu { width: calc(100% - 48px); bottom: 9vh; gap: 20px; }
  .directory-nodes { grid-template-columns: 1fr 1fr; gap: 20px 28px; }
  .space-menu button { min-height: 88px; font-size: 17px; padding-top: 30px; }
  .menu-meta { font-size: 10px; }
}
@media(max-width: 600px) {
  .particle-signature { top: 40%; }
  .particle-signature p { font-size: 11px; letter-spacing: .025em; }
  .directory-kicker { font-size: 9px; }
}
@media(max-height: 600px) and (min-width: 861px) {
  .space-menu { bottom: 6vh; gap: 12px; }
  .space-menu button { min-height: 78px; }
}
@media(min-width: 601px) and (max-width: 860px) {
  .particle-signature { top: 43%; }
}
/* A continuous, reversible particle story across the existing scroll sections. */
body[data-view="about"] #particleField,
body[data-view="contact"] #particleField { opacity: 1; }
body.particle-active .about-float,
body.particle-active .contact-float { opacity: var(--story-presence, 1); transition: opacity .12s linear; }
body.particle-active.at-home .space-menu,
body.particle-active.is-ready.at-home .particle-signature { opacity: var(--story-presence, 1); }
@media (prefers-reduced-motion: reduce) {
  body.particle-active .about-float, body.particle-active .contact-float { opacity: 1; }
}
body.particle-active[data-view="about"] #particleField,
body.particle-active[data-view="contact"] #particleField { opacity: 1; }
body.particle-active.at-home .particle-curtain {
  background: radial-gradient(ellipse at 50% 35%, #091728 0%, #04080e 45%, #030308 78%);
}
body.particle-active.is-ready.at-home .particle-curtain { opacity: .35; }
/* Category dividers now flow as particles on the canvas. */
body.particle-active .space-menu button::before,
body.particle-active .space-menu button::after { display: none; }
body.particle-active.is-ready.at-home .particle-curtain { opacity: .15; }
[data-copy-hidden] { display: none !important; }
#particleField, #webgl, .particle-signature { transition: opacity .5s ease, filter .25s ease; }
body[data-view="home"][data-menu-hover="dj"] #particleField,
body[data-view="home"][data-menu-hover="dj"] #webgl,
body[data-view="home"][data-menu-hover="dj"] .particle-signature { filter: blur(9px); opacity: .28; }
body.faces-aimed[data-view="home"][data-menu-hover="dj"] .trusted-face:not(.is-reel) {
  animation: none; opacity: 1; transform: none;
}
body[data-view="home"] .trusted-rail { transition: opacity .18s ease, visibility .18s ease; }

/* Crossfade the actual text and sampled text on the same animation clock. */
body.particle-active .space-menu button { animation: none; opacity: 1; transform: none; }
body.particle-active.intro-running.at-home .space-menu {
  opacity: var(--intro-copy, 0); transition: none;
}

@media (max-width:600px) {
  .space-menu { width:calc(100% - 40px); bottom:max(7svh,24px); gap:16px; }
  .directory-nodes { gap:14px 20px; }
  .space-menu button { min-height:76px; font-size:15px; padding-top:26px; }
  .menu-meta { font-size:10px; line-height:1.5; }
  .particle-signature { top:48%; }
  body[data-view="home"][data-menu-hover="dj"] .trusted-rail:not([hidden]) {
    top:32%; width:calc(100vw - 40px); gap:14px;
  }
  body[data-view="home"][data-menu-hover="dj"] .trusted-faces {
    width:100%; gap:14px; max-height:30svh;
  }
  body[data-view="home"][data-menu-hover="dj"] .trusted-face:not(.is-reel) {
    min-width:88px; max-width:88px; gap:7px;
  }
  body[data-view="home"][data-menu-hover="dj"] .trusted-photo { width:72px; height:72px; }
  body[data-view="home"][data-menu-hover="dj"] .trusted-name { font-size:9px; max-width:88px; letter-spacing:.04em; }
  body[data-view="home"][data-menu-hover="dj"] .trusted-kicker { font-size:10px; }
  body[data-view="work"][data-sector="dj"] .trusted-rail:not([hidden]) { bottom:calc(16px + env(safe-area-inset-bottom)); max-width:calc(100vw - 24px); gap:8px; }
  body[data-view="work"][data-sector="dj"] .trusted-faces { gap:12px; max-width:calc(100vw - 24px); }
  body[data-view="work"][data-sector="dj"] .trusted-face { min-width:70px; max-width:78px; gap:5px; }
  body[data-view="work"][data-sector="dj"] .trusted-photo { width:58px; height:58px; }
  body[data-view="work"][data-sector="dj"] .trusted-name { font-size:8px; max-width:78px; letter-spacing:.04em; }
}

@media (max-width:860px), (pointer:coarse) {
  html { scroll-snap-type:none; overscroll-behavior-y:auto; }
  .scroll-track section { height:100svh; min-height:100svh; scroll-snap-align:none; }
  .contact-float { overscroll-behavior-y:auto; }
}