/* SPNVISUALZ / REFERENCE PLANET SYSTEM V5
   One lightweight WebGL world follows the page. Content remains normal HTML. */

main,
.site-footer {
  position: relative;
  z-index: 2;
}

.spn-planet {
  pointer-events: none;
}

.spn-planet__canvas {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .28s linear;
}

.planet-ready .spn-planet__canvas { opacity: 1; }

.spn-planet__fallback {
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(88vw,1180px);
  height: auto;
  opacity: 0;
  transform: translate3d(calc(-50% + var(--fallback-planet-x,20vw)),calc(-50% + var(--fallback-planet-y,0vh)),0) rotate(var(--fallback-planet-rotate,-7deg)) scale(var(--fallback-planet-scale,1));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 34px rgba(128,73,255,.36)) drop-shadow(0 0 90px rgba(90,38,196,.2));
  transition: opacity .55s ease;
  will-change: transform,opacity;
  backface-visibility: hidden;
}

.planet-fallback .spn-planet__fallback { opacity: var(--fallback-planet-alpha,.48); }
body.journey-chapter-0 .spn-planet__fallback { opacity: 0; }

.spn-planet__glow {
  position: fixed;
  z-index: 0;
  left: 0;
  top: 0;
  width: min(82vw,1120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(159,104,255,.36),rgba(94,40,208,.16) 38%,rgba(46,12,111,.07) 58%,transparent 74%);
  filter: blur(68px);
  transform: translate3d(calc(var(--planet-glow-x,72vw) - 50%),calc(var(--planet-glow-y,48vh) - 50%),0) scale(.98);
  will-change: transform;
  backface-visibility: hidden;
}

.spn-planet__hint {
  position: fixed;
  z-index: 12;
  right: max(22px,3.2vw);
  bottom: max(26px,4vh);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 9px;
  color: rgba(255,255,255,.48);
  font: 6px/1 "Courier New",monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity .35s ease,transform .35s ease;
}

.spn-planet__hint i {
  grid-row: 1 / 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #86ffbd;
  box-shadow: 0 0 9px #86ffbd,0 0 20px rgba(134,255,189,.62);
}

.spn-planet__hint span { color: rgba(255,255,255,.72); }
.spn-planet__hint b { color: rgba(198,167,255,.65); font-weight: 400; }
.spn-planet.is-hint-hidden .spn-planet__hint { opacity: 0; transform: translateY(8px); }

.spn-planet__status {
  position: fixed;
  z-index: 12;
  left: max(20px,2.5vw);
  bottom: max(24px,3.5vh);
  display: grid;
  grid-template-columns: 82px min(12vw,150px) 34px;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.34);
  font: 6px/1 "Courier New",monospace;
  letter-spacing: .14em;
}

.spn-planet__status > span { color: rgba(198,167,255,.72); }
.spn-planet__status > i { display: block; height: 1px; background: rgba(255,255,255,.14); overflow: hidden; }
.spn-planet__status > i b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#7945df,#d8c4ff,#86ffbd); transform: scaleX(0); transform-origin: left; }
.spn-planet__status em { color: rgba(255,255,255,.48); font-style: normal; }

/* Keep the fixed chrome quiet; the planet itself is the navigation cue. */
.spn-planet__status { display: none; }
.spn-planet.is-fallback .spn-planet__hint { display: none; }

/* The PNG remains only as a fallback when WebGL is unavailable. */
.planet-ready .hero-object {
  opacity: 0!important;
  visibility: hidden;
}

/* Let the actual planet show through without placing it over readable content. */
.planet-ready .depth-field { z-index: 0; opacity: .2; }
.planet-ready .hero {
  background: radial-gradient(circle at 72% 43%,rgba(83,27,188,.1),transparent 35%),linear-gradient(90deg,rgba(2,1,4,.84),rgba(7,3,13,.32) 52%,rgba(2,1,4,.1));
}
.planet-ready .hero-cosmos { opacity: .18; }
.planet-ready .manifesto { background: linear-gradient(180deg,rgba(3,2,7,.25),rgba(7,4,11,.18)); }
.planet-ready .work-rail { background: rgba(2,1,4,.2); }
.planet-ready .work-sticky { background: radial-gradient(circle at 50% 47%,rgba(92,35,184,.06),transparent 40%),rgba(2,1,4,.16); }
.planet-ready .services { background: radial-gradient(circle at 85% 60%,rgba(101,40,208,.06),transparent 28%),rgba(7,3,11,.22); }
.planet-ready .pricing { background: rgba(3,2,7,.2); }
.planet-ready .process { background: linear-gradient(180deg,rgba(9,5,15,.22),rgba(3,2,7,.24)); }
.planet-ready .home-lab { background: linear-gradient(180deg,rgba(3,2,7,.22),rgba(8,5,13,.18) 48%,rgba(3,2,7,.22)); }
.planet-ready .contact { background: radial-gradient(circle at 70% 52%,rgba(100,39,204,.09),transparent 36%),rgba(5,2,10,.16); }
.planet-ready .manifesto-portal,.planet-ready .services-depth{opacity:.16}

/* Keep the world present when a browser cannot provide WebGL. */
.planet-fallback .depth-field { z-index: 0; opacity: .2; }
.planet-fallback .manifesto { background: linear-gradient(180deg,rgba(3,2,7,.42),rgba(7,4,11,.34)); }
.planet-fallback .work-rail { background: rgba(2,1,4,.38); }
.planet-fallback .work-sticky { background: radial-gradient(circle at 50% 47%,rgba(92,35,184,.08),transparent 40%),rgba(2,1,4,.34); }
.planet-fallback .services { background: radial-gradient(circle at 85% 60%,rgba(101,40,208,.08),transparent 28%),rgba(7,3,11,.4); }
.planet-fallback .pricing { background: rgba(3,2,7,.36); }
.planet-fallback .process { background: linear-gradient(180deg,rgba(9,5,15,.38),rgba(3,2,7,.4)); }
.planet-fallback .home-lab { background: linear-gradient(180deg,rgba(3,2,7,.38),rgba(8,5,13,.32) 48%,rgba(3,2,7,.38)); }
.planet-fallback .contact { background: radial-gradient(circle at 70% 52%,rgba(100,39,204,.1),transparent 36%),rgba(5,2,10,.34); }
.planet-fallback .manifesto-portal,.planet-fallback .services-depth { opacity: .14; }

/* Controls can energize the lighting, but they never steer the planet. */
[data-planet-reactive] {
  transition: filter .2s ease,background-color .2s ease,border-color .2s ease;
}

[data-planet-reactive].is-reacting,
[data-planet-reactive]:focus-visible {
  filter: brightness(1.15) saturate(1.08);
}

.site-header {
  isolation: isolate;
}

body.planet-chapter-work .site-header,
body.planet-chapter-services .site-header,
body.planet-chapter-pricing .site-header,
body.planet-chapter-visual-lab .site-header,
body.planet-chapter-contact .site-header {
  background: rgba(3,2,7,.84);
  border-color: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
}

@media (max-width: 1050px) {
  .spn-planet__status { grid-template-columns: 72px 90px 32px; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .spn-planet__glow { filter: blur(38px); opacity: .7; }
  .spn-planet__fallback { filter: drop-shadow(0 0 28px rgba(128,73,255,.3)); }
}

@media (max-width: 720px) {
  .spn-planet__fallback { width: 145vw; }

  .spn-planet__glow {
    width: 128vw;
    filter: blur(34px);
    opacity: .78;
  }

  .spn-planet__hint {
    right: 18px;
    bottom: max(22px,calc(env(safe-area-inset-bottom) + 12px));
  }

  .spn-planet__status {
    left: 18px;
    bottom: max(22px,calc(env(safe-area-inset-bottom) + 12px));
    grid-template-columns: 62px 54px 30px;
    gap: 7px;
    opacity: .78;
  }

  .site-header,
  .site-header.is-scrolled {
    height: 68px;
    padding: 0 18px;
    background: rgba(3,2,7,.94);
    border-bottom: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(15px);
    overflow: hidden;
  }

  .site-header .wordmark,
  .site-header .header-actions {
    position: relative;
    z-index: 2;
  }

  .site-header .wordmark { font-size: 17px; }
  .site-header .wordmark small { margin-top: 6px; }
  .menu-toggle { padding-left: 10px; }

  .planet-ready .hero-cosmos { opacity: .12; }
  .planet-ready .hero {
    background: linear-gradient(180deg,rgba(3,2,7,.8) 0 17%,rgba(3,2,7,.18) 43%,rgba(3,2,7,.42) 78%,rgba(3,2,7,.56));
  }
  .planet-ready .depth-field { display: none; }
  .planet-ready .manifesto,
  .planet-ready .work-sticky,
  .planet-ready .services,
  .planet-ready .pricing,
  .planet-ready .process,
  .planet-ready .home-lab,
  .planet-ready .contact { background: rgba(3,2,7,.25); }
  .planet-fallback .manifesto,
  .planet-fallback .work-sticky,
  .planet-fallback .services,
  .planet-fallback .pricing,
  .planet-fallback .process,
  .planet-fallback .home-lab,
  .planet-fallback .contact { background: rgba(3,2,7,.42); }

  .hero { min-height: 760px; padding-top: 104px; }
  .hero h1 {
    font-size: clamp(54px,14.5vw,72px);
    line-height: .8;
    text-transform: none;
  }
  .hero-lead { max-width: 335px; }

  .manifesto {
    padding-top: 96px;
    padding-bottom: 105px;
  }
  .manifesto-label { margin-bottom: 50px; }
  .manifesto-portal { display: none; }
  .manifesto-copy { position: relative; z-index: 4; }
  .manifesto-copy > p { margin-bottom: 20px; font-size: 15px; }
  .manifesto h2 {
    max-width: 350px;
    font-size: clamp(38px,10.4vw,48px);
    line-height: .9;
    letter-spacing: -.055em;
    text-transform: none;
  }
  .manifesto-note { margin-top: 44px; }

  .section-head h2,
  .brand-systems-head h3 {
    font-size: clamp(38px,10.8vw,50px);
    line-height: .92;
    letter-spacing: -.05em;
    text-transform: none;
  }

  .contact h2 {
    max-width: 360px;
    font-size: clamp(44px,12vw,58px);
    line-height: .88;
    text-transform: none;
  }

  .work-header h2 { font-size: 20px; }
  .work-copy h3 { font-size: 25px; }
  .brand-card figcaption strong { font-size: 25px; }

  [data-planet-reactive] { outline-offset: 2px; }
}

@media (max-width: 420px) {
  .spn-planet__status { display: none; }
  .spn-planet__hint { bottom: 18px; }
  .hero h1 { font-size: 14vw; }
  .manifesto h2 { font-size: 10vw; }
  .section-head h2,
  .brand-systems-head h3 { font-size: 10.5vw; }
}

@media (prefers-reduced-motion: reduce) {
  .spn-planet,
  .spn-planet__canvas,
  .spn-planet__fallback,
  .spn-planet__hint,
  [data-planet-reactive] { transition: none!important; }
  .spn-planet__hint { display: none; }
}