/**
 * KS spatial Wave 2 — controls, rails, surfaces, ambient primitives.
 * Pair with js/ks-pointer-depth.js, js/ks-spatial-rail.js, js/ks-spatial-scroll.js.
 * Depends on tokens in ks-spatial.css (--ks-perspective, tactile shadows).
 */

/* ── JS pointer tilt ─────────────────────────────────────────────── */
.ks-tilt--js {
  perspective: var(--ks-perspective);
  perspective-origin: center center;
}
.ks-tilt--js__inner {
  transform-style: preserve-3d;
  transform: rotateX(var(--ks-rx, 0deg)) rotateY(var(--ks-ry, 0deg));
  transition: transform 0.35s cubic-bezier(0.2, 0.85, 0.25, 1);
  backface-visibility: hidden;
  will-change: transform;
}
.ks-tilt--js--tracking .ks-tilt--js__inner {
  transition: none;
}

/* ── Pro-mode guard toggle ─────────────────────────────────────── */
.ks-switch--pro-guard {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  perspective: 400px;
}
.ks-switch--pro-guard input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.ks-switch--pro-guard__shield {
  width: 3.75rem;
  height: 2rem;
  border-radius: 0.35rem;
  background: var(--forge-surface-2);
  box-shadow: var(--ks-tactile-shadow-recessed);
  transform-style: preserve-3d;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ks-switch--pro-guard__thumb {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.25rem;
  background: var(--forge-text);
  box-shadow: var(--ks-tactile-shadow-raised);
  transform: translateZ(6px);
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.ks-switch--pro-guard input:checked ~ .ks-switch--pro-guard__shield {
  background: var(--forge-amber);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35), var(--ks-tactile-shadow-recessed);
}
.ks-switch--pro-guard input:checked ~ .ks-switch--pro-guard__thumb {
  transform: translateX(1.55rem) translateZ(8px);
}
.ks-switch--pro-guard--soft .ks-switch--pro-guard__shield {
  border-radius: 999px;
}

/* ── Vertical rocker switch ──────────────────────────────────────── */
.ks-switch--rocker {
  position: relative;
  width: 2.25rem;
  height: 4.5rem;
  perspective: 350px;
}
.ks-switch--rocker input {
  position: absolute;
  opacity: 0;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.ks-switch--rocker__track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  background: var(--forge-surface-2);
  box-shadow: var(--ks-tactile-shadow-recessed);
  transform-style: preserve-3d;
}
.ks-switch--rocker__lever {
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: 50%;
  height: 1.75rem;
  margin-top: -0.875rem;
  border-radius: 0.35rem;
  background: linear-gradient(180deg, var(--forge-text), var(--forge-surface));
  box-shadow: var(--ks-tactile-shadow-raised);
  transform-origin: center center;
  transform: rotateX(28deg) translateZ(4px);
  transition: transform 0.3s ease;
}
.ks-switch--rocker input:checked ~ .ks-switch--rocker__lever {
  transform: rotateX(-28deg) translateZ(4px);
}

/* ── CSS bookmark ────────────────────────────────────────────────── */
.ks-bookmark {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 3.5rem;
  perspective: 300px;
  cursor: pointer;
}
.ks-bookmark input {
  position: absolute;
  opacity: 0;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}
.ks-bookmark__ribbon {
  position: absolute;
  inset: 0;
  background: var(--forge-cyan);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  transform-style: preserve-3d;
  transform: rotateY(0deg) translateZ(var(--ks-translate-z-lift));
  transition: transform 0.4s ease, background 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.ks-bookmark input:checked ~ .ks-bookmark__ribbon {
  transform: rotateY(-25deg) translateZ(calc(var(--ks-translate-z-lift) * 2));
  background: var(--forge-amber);
}

/* ── Flip clock counter ──────────────────────────────────────────── */
.ks-flip-clock {
  display: inline-flex;
  gap: 0.35rem;
  perspective: var(--ks-perspective-near);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
.ks-flip-clock__digit {
  position: relative;
  width: 2.25rem;
  height: 3rem;
  transform-style: preserve-3d;
}
.ks-flip-clock__top,
.ks-flip-clock__bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  background: var(--forge-surface-2);
  border: 1px solid var(--forge-border);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}
.ks-flip-clock__top {
  top: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  transform-origin: bottom center;
}
.ks-flip-clock__bottom {
  bottom: 0;
  border-radius: 0 0 0.25rem 0.25rem;
  transform-origin: top center;
}
.ks-flip-clock__digit.is-flipping .ks-flip-clock__top {
  animation: ks-flip-clock-top 0.45s ease forwards;
}
.ks-flip-clock__digit.is-flipping .ks-flip-clock__bottom {
  animation: ks-flip-clock-bottom 0.45s ease forwards;
}
@keyframes ks-flip-clock-top {
  to { transform: rotateX(-90deg); }
}
@keyframes ks-flip-clock-bottom {
  from { transform: rotateX(90deg); }
  to { transform: rotateX(0deg); }
}

/* ── RGB keyboard ────────────────────────────────────────────────── */
.ks-keyboard {
  display: inline-grid;
  gap: 0.35rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--forge-bg);
  box-shadow: var(--ks-tactile-shadow-recessed);
  transform-style: preserve-3d;
  transform: rotateX(12deg);
}
.ks-keyboard__row {
  display: flex;
  gap: 0.35rem;
}
.ks-keyboard__key {
  min-width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background: var(--forge-surface-2);
  box-shadow: var(--ks-tactile-shadow-raised);
  transform: translateZ(var(--ks-translate-z-lift));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ks-keyboard__key:active,
.ks-keyboard__key.is-lit {
  transform: translateZ(2px);
  box-shadow: var(--ks-tactile-shadow-recessed);
  background: linear-gradient(135deg, var(--forge-cyan), var(--forge-amber));
}

/* ── Cube login form ─────────────────────────────────────────────── */
.ks-form--cube {
  perspective: var(--ks-perspective);
  width: min(320px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.ks-form--cube__scene {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(var(--ks-cube-y, 0deg));
  transition: transform 0.5s ease;
}
.ks-form--cube__face {
  position: absolute;
  inset: 8%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--forge-surface);
  border: 1px solid var(--forge-border);
  border-radius: 0.35rem;
  backface-visibility: hidden;
}
.ks-form--cube__face--front { transform: translateZ(110px); }
.ks-form--cube__face--right { transform: rotateY(90deg) translateZ(110px); }

/* ── Shapes & lights rig ─────────────────────────────────────────── */
.ks-lights-rig {
  position: relative;
  min-height: 10rem;
  perspective: var(--ks-perspective);
  overflow: hidden;
  background: var(--forge-bg);
}
.ks-lights-rig__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: ks-lights-rig-spin 12s linear infinite;
}
.ks-lights-rig__shape {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 0.25rem;
  background: var(--forge-cyan);
  box-shadow: 0 0 24px rgba(6, 182, 212, 0.45);
  transform-style: preserve-3d;
}
.ks-lights-rig__shape:nth-child(1) { transform: translateZ(60px) rotateY(0deg); }
.ks-lights-rig__shape:nth-child(2) { transform: translateZ(60px) rotateY(120deg); }
.ks-lights-rig__shape:nth-child(3) { transform: translateZ(60px) rotateY(240deg); }
@keyframes ks-lights-rig-spin {
  to { transform: rotateY(360deg); }
}

/* ── Ring carousel ───────────────────────────────────────────────── */
.ks-carousel--ring {
  perspective: 1000px;
  position: relative;
  min-height: 14rem;
  overflow: hidden;
}
.ks-carousel--ring__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: ks-carousel-ring 18s linear infinite;
}
.ks-carousel--ring__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8rem;
  margin: -4rem 0 0 -4rem;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.ks-carousel--ring__item:nth-child(1) { transform: rotateY(0deg) translateZ(140px); }
.ks-carousel--ring__item:nth-child(2) { transform: rotateY(72deg) translateZ(140px); }
.ks-carousel--ring__item:nth-child(3) { transform: rotateY(144deg) translateZ(140px); }
.ks-carousel--ring__item:nth-child(4) { transform: rotateY(216deg) translateZ(140px); }
.ks-carousel--ring__item:nth-child(5) { transform: rotateY(288deg) translateZ(140px); }
@keyframes ks-carousel-ring {
  to { transform: rotateY(360deg); }
}

/* ── Orbital photo gallery ───────────────────────────────────────── */
.ks-gallery--orbital {
  perspective: 900px;
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1;
  margin: 0 auto;
}
.ks-gallery--orbital__orbit {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ks-gallery-orbit 20s linear infinite;
}
.ks-gallery--orbital__photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  border-radius: 0.35rem;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid var(--forge-border);
}
.ks-gallery--orbital__photo:nth-child(1) { transform: rotateY(0deg) translateZ(120px); }
.ks-gallery--orbital__photo:nth-child(2) { transform: rotateY(60deg) translateZ(120px); }
.ks-gallery--orbital__photo:nth-child(3) { transform: rotateY(120deg) translateZ(120px); }
.ks-gallery--orbital__photo:nth-child(4) { transform: rotateY(180deg) translateZ(120px); }
.ks-gallery--orbital__photo:nth-child(5) { transform: rotateY(240deg) translateZ(120px); }
.ks-gallery--orbital__photo:nth-child(6) { transform: rotateY(300deg) translateZ(120px); }
@keyframes ks-gallery-orbit {
  to { transform: rotateY(360deg); }
}

/* ── Stellar slide navigator ─────────────────────────────────────── */
.ks-nav--stellar {
  perspective: var(--ks-perspective);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2rem 0;
}
.ks-nav--stellar__track {
  display: flex;
  gap: 1.5rem;
  transform-style: preserve-3d;
  padding: 0 2rem;
}
.ks-nav--stellar__slide {
  flex: 0 0 12rem;
  scroll-snap-align: center;
  transform: rotateY(var(--ks-stellar-ry, -18deg)) translateZ(var(--ks-stellar-z, 0px));
  transition: transform 0.4s ease, opacity 0.3s ease;
  opacity: 0.7;
}
.ks-nav--stellar__slide.is-active {
  --ks-stellar-ry: 0deg;
  --ks-stellar-z: var(--ks-translate-z-deep);
  opacity: 1;
}

/* ── Vertical team carousel ──────────────────────────────────────── */
.ks-carousel--vertical {
  perspective: 700px;
  height: 16rem;
  overflow: hidden;
  position: relative;
}
.ks-carousel--vertical__track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform-style: preserve-3d;
  animation: ks-carousel-vertical 10s ease-in-out infinite alternate;
}
.ks-carousel--vertical__card {
  transform: rotateX(var(--ks-vcard-rx, 8deg)) translateZ(var(--ks-translate-z-lift));
  transition: transform 0.35s ease;
}
@keyframes ks-carousel-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* ── Book page flip ──────────────────────────────────────────────── */
.ks-book--flip {
  perspective: var(--ks-perspective);
  position: relative;
  width: min(280px, 100%);
  aspect-ratio: 3 / 4;
}
.ks-book--flip__spread {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.ks-book--flip__page {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: var(--forge-surface);
  border: 1px solid var(--forge-border);
  transition: transform 0.7s ease;
}
.ks-book--flip.is-open .ks-book--flip__page--cover {
  transform: rotateY(-160deg);
}

/* ── Fold accordion ──────────────────────────────────────────────── */
.ks-accordion--fold {
  perspective: var(--ks-perspective-near);
}
.ks-accordion--fold__panel {
  transform-style: preserve-3d;
  transform-origin: top center;
  overflow: hidden;
  transition: transform 0.4s ease, max-height 0.4s ease;
}
.ks-accordion--fold__panel[open],
.ks-accordion--fold__panel.is-open {
  transform: rotateX(0deg);
}
.ks-accordion--fold__panel:not([open]):not(.is-open) {
  transform: rotateX(-12deg);
  max-height: 3rem;
}

/* ── Card fan ────────────────────────────────────────────────────── */
.ks-card--fan {
  position: relative;
  width: 14rem;
  height: 10rem;
  perspective: 600px;
}
.ks-card--fan__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  transition: transform 0.35s ease;
}
.ks-card--fan__card:nth-child(1) { transform: rotateZ(-12deg) translateZ(0); }
.ks-card--fan__card:nth-child(2) { transform: rotateZ(0deg) translateZ(12px); }
.ks-card--fan__card:nth-child(3) { transform: rotateZ(12deg) translateZ(24px); }
.ks-card--fan:hover .ks-card--fan__card:nth-child(1) { transform: rotateZ(-22deg) translateZ(8px); }
.ks-card--fan:hover .ks-card--fan__card:nth-child(3) { transform: rotateZ(22deg) translateZ(32px); }

/* ── Card deck stack ─────────────────────────────────────────────── */
.ks-deck--stack {
  position: relative;
  width: 10rem;
  height: 14rem;
  perspective: 500px;
}
.ks-deck--stack__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
  border-radius: inherit;
}
.ks-deck--stack__card:nth-child(1) { transform: translateZ(0) rotateZ(-2deg); }
.ks-deck--stack__card:nth-child(2) { transform: translateZ(4px) rotateZ(1deg); }
.ks-deck--stack__card:nth-child(3) { transform: translateZ(8px) rotateZ(-1deg); }
.ks-deck--stack__card:nth-child(4) { transform: translateZ(12px) rotateZ(2deg); }
.ks-deck--stack__card:nth-child(5) { transform: translateZ(16px) rotateZ(-1.5deg); }
.ks-deck--stack__card:nth-child(6) { transform: translateZ(20px) rotateZ(1.5deg); }
.ks-deck--stack:hover .ks-deck--stack__card:nth-child(3) {
  transform: translateZ(24px) rotateZ(4deg) translateY(-12px);
}
.ks-handbook-trust-deck.ks-deck--stack {
  width: min(100%, 24rem);
  min-height: 16rem;
}

/* ── Vinyl sleeve media ──────────────────────────────────────────── */
.ks-vinyl {
  perspective: var(--ks-perspective);
  display: inline-block;
  width: 12rem;
  height: 12rem;
}
.ks-vinyl__disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--forge-bg) 18%, var(--forge-surface-2) 19%, var(--forge-surface) 70%);
  box-shadow: var(--ks-tactile-shadow-raised);
  transform-style: preserve-3d;
  animation: ks-vinyl-spin 6s linear infinite;
}
.ks-vinyl__sleeve {
  position: absolute;
  inset: 5%;
  border-radius: 0.25rem;
  background: var(--forge-surface);
  transform: rotateY(-35deg) translateZ(-20px);
  backface-visibility: hidden;
}
@keyframes ks-vinyl-spin {
  to { transform: rotateZ(360deg); }
}

/* ── Scroll flip strip ───────────────────────────────────────────── */
.ks-strip--scroll-flip {
  perspective: var(--ks-perspective);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
}
.ks-strip--scroll-flip__panel {
  flex: 0 0 70%;
  scroll-snap-align: center;
  transform-style: preserve-3d;
  transform: rotateY(var(--ks-strip-ry, 25deg));
  transition: transform 0.4s ease;
}
.ks-strip--scroll-flip__panel.is-center {
  --ks-strip-ry: 0deg;
}

/* ── Rolling cube 404 ────────────────────────────────────────────── */
.ks-error--cube {
  perspective: 600px;
  min-height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-error--cube__scene {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: ks-error-cube-roll 4s ease-in-out infinite;
}
.ks-error--cube__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 2rem;
  background: var(--forge-surface-2);
  border: 1px solid var(--forge-border);
  backface-visibility: hidden;
}
.ks-error--cube__face--front  { transform: translateZ(50px); }
.ks-error--cube__face--back   { transform: rotateY(180deg) translateZ(50px); }
.ks-error--cube__face--right  { transform: rotateY(90deg) translateZ(50px); }
.ks-error--cube__face--left   { transform: rotateY(-90deg) translateZ(50px); }
.ks-error--cube__face--top    { transform: rotateX(90deg) translateZ(50px); }
.ks-error--cube__face--bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes ks-error-cube-roll {
  0%, 100% { transform: rotateX(-15deg) rotateY(0deg); }
  50% { transform: rotateX(25deg) rotateY(180deg); }
}

/* ── Morph polyhedron loader ─────────────────────────────────────── */
.ks-loader--morph {
  width: 4rem;
  height: 4rem;
  perspective: 400px;
  margin: 0 auto;
}
.ks-loader--morph__solid {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ks-loader-morph 2.4s ease-in-out infinite;
  background: linear-gradient(135deg, var(--forge-cyan), var(--forge-amber));
  border-radius: 0.35rem;
}
@keyframes ks-loader-morph {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg) scale(1); border-radius: 0.35rem; }
  33% { transform: rotateX(60deg) rotateY(45deg) scale(0.9); border-radius: 50%; }
  66% { transform: rotateX(-30deg) rotateY(90deg) scale(1.05); border-radius: 0; }
}

/* ── Tumbling cubes ambient ──────────────────────────────────────── */
.ks-ambient--tumble {
  position: relative;
  min-height: 10rem;
  overflow: hidden;
  perspective: 500px;
  background: var(--forge-bg);
}
.ks-ambient--tumble__cube {
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--forge-surface-2);
  border: 1px solid var(--forge-border);
  transform-style: preserve-3d;
  animation: ks-ambient-tumble 5s ease-in-out infinite;
}
.ks-ambient--tumble__cube:nth-child(1) { left: 20%; top: 30%; animation-delay: 0s; }
.ks-ambient--tumble__cube:nth-child(2) { left: 55%; top: 50%; animation-delay: -1.5s; }
.ks-ambient--tumble__cube:nth-child(3) { left: 75%; top: 20%; animation-delay: -3s; }
@keyframes ks-ambient-tumble {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0); }
  50% { transform: rotateX(180deg) rotateY(180deg) translateZ(40px); }
}

/* ── Hex tunnel ambient ─────────────────────────────────────────── */
.ks-ambient--hex {
  position: relative;
  min-height: 12rem;
  overflow: hidden;
  perspective: 450px;
  background: var(--forge-bg);
}
.ks-ambient--hex__layer {
  position: absolute;
  inset: -30%;
  background: repeating-conic-gradient(
    from 30deg,
    transparent 0deg 50deg,
    rgba(6, 182, 212, 0.12) 50deg 60deg
  );
  transform: rotateX(70deg);
  animation: ks-ambient-hex-fly 6s linear infinite;
}
@keyframes ks-ambient-hex-fly {
  from { transform: rotateX(70deg) translateZ(-80px) scale(1); }
  to { transform: rotateX(70deg) translateZ(80px) scale(1.2); }
}

/* ── Math globe ambient ──────────────────────────────────────────── */
.ks-ambient--globe {
  position: relative;
  min-height: 12rem;
  perspective: var(--ks-perspective);
  overflow: hidden;
}
.ks-ambient--globe__sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8rem;
  height: 8rem;
  margin: -4rem 0 0 -4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--forge-cyan), var(--forge-bg) 65%);
  transform-style: preserve-3d;
  animation: ks-ambient-globe-spin 10s linear infinite;
  box-shadow: inset -12px -12px 24px rgba(0, 0, 0, 0.5);
}
.ks-ambient--globe__ring {
  position: absolute;
  inset: -10%;
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 50%;
  transform: rotateX(75deg);
}
@keyframes ks-ambient-globe-spin {
  to { transform: rotateY(360deg); }
}

/* ── Sphere family (+ variants) ──────────────────────────────────── */
.ks-sphere-family {
  position: relative;
  min-height: 10rem;
  perspective: var(--ks-perspective);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-sphere-family__orb {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--forge-cyan) 45%, var(--forge-bg) 70%);
  transform-style: preserve-3d;
  animation: ks-sphere-family-spin 8s linear infinite;
}
.ks-sphere-family--shadow .ks-sphere-family__orb {
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.45);
}
.ks-sphere-family--rings .ks-sphere-family__orb::before,
.ks-sphere-family--rings .ks-sphere-family__orb::after {
  content: "";
  position: absolute;
  inset: -15%;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 50%;
  transform: rotateX(70deg);
}
.ks-sphere-family--rings .ks-sphere-family__orb::after {
  transform: rotateX(70deg) rotateZ(60deg);
}
.ks-sphere-family--wobble .ks-sphere-family__orb {
  animation: ks-sphere-family-wobble 3s ease-in-out infinite;
}
.ks-sphere-family--light21 .ks-sphere-family__orb {
  background: radial-gradient(circle at 50% 40%, #fff, var(--forge-amber) 30%, var(--forge-cyan) 60%, var(--forge-bg) 80%);
  box-shadow: 0 0 32px rgba(6, 182, 212, 0.5);
}
.ks-sphere-family--cubes .ks-sphere-family__orb {
  border-radius: 0.25rem;
  animation: ks-sphere-family-cubes 4s ease-in-out infinite;
}
@keyframes ks-sphere-family-spin {
  to { transform: rotateY(360deg); }
}
@keyframes ks-sphere-family-wobble {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
  50% { transform: rotateX(18deg) rotateY(24deg); }
}
@keyframes ks-sphere-family-cubes {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg) scale(1); }
  50% { transform: rotateX(90deg) rotateY(45deg) scale(0.85); border-radius: 0; }
}

/* ── Scroll layer parallax ───────────────────────────────────────── */
.ks-scroll--parallax {
  position: relative;
  min-height: 16rem;
  perspective: var(--ks-perspective);
  overflow: hidden;
}
.ks-scroll--parallax__layer {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--ks-parallax-z, 0) * 1px));
  will-change: transform;
}
.ks-scroll--parallax__layer--back { --ks-parallax-z: -40; opacity: 0.6; }
.ks-scroll--parallax__layer--mid  { --ks-parallax-z: 0; }
.ks-scroll--parallax__layer--fore { --ks-parallax-z: 40; }

/* ── Curtain reveal ──────────────────────────────────────────────── */
.ks-curtain--reveal {
  position: relative;
  overflow: hidden;
  min-height: 10rem;
  perspective: 600px;
}
.ks-curtain--reveal__panel {
  position: absolute;
  inset: 0;
  background: var(--forge-surface-2);
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.ks-curtain--reveal.is-revealed .ks-curtain--reveal__panel--left {
  transform: rotateY(-95deg);
}
.ks-curtain--reveal.is-revealed .ks-curtain--reveal__panel--right {
  transform: rotateY(95deg);
}
.ks-curtain--reveal__content {
  position: relative;
  z-index: 0;
  padding: 1.5rem;
}

/* ── Tower cubes loader ──────────────────────────────────────────── */
.ks-loader--tower {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
  min-height: 6rem;
  perspective: 300px;
}
.ks-loader--tower__cube {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--forge-cyan);
  transform-style: preserve-3d;
  animation: ks-loader-tower 1.2s ease-in-out infinite;
}
.ks-loader--tower__cube:nth-child(1) { animation-delay: 0s; }
.ks-loader--tower__cube:nth-child(2) { animation-delay: 0.15s; }
.ks-loader--tower__cube:nth-child(3) { animation-delay: 0.3s; }
.ks-loader--tower__cube:nth-child(4) { animation-delay: 0.45s; }
@keyframes ks-loader-tower {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50% { transform: translateY(-2.5rem) translateZ(12px); }
}

/* ── Linear / circular motion ────────────────────────────────────── */
.ks-motion--linear {
  position: relative;
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
}
.ks-motion--linear__dot {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--forge-cyan);
  offset-path: path("M 40 0 A 40 40 0 1 1 39.9 0");
  animation: ks-motion-linear-orbit 3s linear infinite;
}
@keyframes ks-motion-linear-orbit {
  to { offset-distance: 100%; }
}

/* ── Simplest dots ambient ───────────────────────────────────────── */
.ks-dots {
  position: relative;
  min-height: 8rem;
  overflow: hidden;
  background: var(--forge-bg);
}
.ks-dots__dot {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--forge-cyan);
  animation: ks-dots-pulse 2s ease-in-out infinite;
}
.ks-dots__dot:nth-child(odd) { animation-delay: -0.5s; background: var(--forge-amber); }
@keyframes ks-dots-pulse {
  0%, 100% { transform: scale(1) translateZ(0); opacity: 0.5; }
  50% { transform: scale(1.8) translateZ(8px); opacity: 1; }
}

/* ── Sphere / cube intersection scene ────────────────────────────── */
.ks-scene--intersection {
  position: relative;
  min-height: 12rem;
  perspective: var(--ks-perspective);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ks-scene--intersection__stage {
  position: relative;
  width: 8rem;
  height: 8rem;
  transform-style: preserve-3d;
  animation: ks-scene-intersection-spin 12s linear infinite;
}
.ks-scene--intersection__sphere {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.35);
  border: 1px solid var(--forge-cyan);
}
.ks-scene--intersection__cube {
  position: absolute;
  inset: 20%;
  background: rgba(245, 158, 11, 0.25);
  border: 1px solid var(--forge-amber);
  transform: rotateX(45deg) rotateY(45deg);
}
@keyframes ks-scene-intersection-spin {
  to { transform: rotateY(360deg) rotateX(15deg); }
}

/* ── Bubbly grid ambient ─────────────────────────────────────────── */
.ks-bubbly {
  position: relative;
  min-height: 10rem;
  overflow: hidden;
  perspective: 500px;
  background: var(--forge-bg);
}
.ks-bubbly__cell {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), var(--forge-cyan));
  animation: ks-bubbly-float 4s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes ks-bubbly-float {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(30px) scale(1.15); }
}

/* ── HUD in space panel ──────────────────────────────────────────── */
.ks-hud--space {
  position: relative;
  min-height: 12rem;
  perspective: var(--ks-perspective);
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--forge-surface) 0%, var(--forge-bg) 70%);
}
.ks-hud--space__frame {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(6, 182, 212, 0.4);
  transform: rotateX(25deg) translateZ(var(--ks-translate-z-lift));
  transform-style: preserve-3d;
}
.ks-hud--space__reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  border: 1px dashed var(--forge-cyan);
  border-radius: 50%;
  animation: ks-hud-reticle-pulse 2s ease-in-out infinite;
}
@keyframes ks-hud-reticle-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ── Fractured pyramid ───────────────────────────────────────────── */
.ks-pyramid--fractured {
  perspective: 600px;
  min-height: 10rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ks-pyramid--fractured__shard {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 4rem solid var(--forge-surface-2);
  transform-style: preserve-3d;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.ks-pyramid--fractured__shard:nth-child(1) { transform: rotateY(-30deg) translateZ(10px); }
.ks-pyramid--fractured__shard:nth-child(2) { transform: rotateY(0deg) translateZ(20px); }
.ks-pyramid--fractured__shard:nth-child(3) { transform: rotateY(30deg) translateZ(10px); }

/* ── FF conf data block ──────────────────────────────────────────── */
.ks-block--conf {
  perspective: 500px;
  display: inline-block;
  padding: 1rem 1.5rem;
  background: var(--forge-surface-2);
  border: 1px solid var(--forge-border);
  transform-style: preserve-3d;
  animation: ks-block-conf-tilt 4s ease-in-out infinite;
}
@keyframes ks-block-conf-tilt {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
  50% { transform: rotateX(8deg) rotateY(-12deg) translateZ(var(--ks-translate-z-lift)); }
}

/* ══ Wave 2 upgrades (extend Wave 1 primitives) ═══════════════════ */

/* Cube gallery photo mode */
.ks-cube-gallery--photo .ks-cube-gallery__face {
  padding: 0;
  overflow: hidden;
}
.ks-cube-gallery--photo .ks-cube-gallery__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Spatial rail orbit mode */
.fs-rail--orbit {
  perspective: 1200px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.fs-rail--orbit .fs-rail__track {
  transform-style: preserve-3d;
  animation: ks-rail-orbit-drift 24s linear infinite;
}
.fs-rail--orbit .fs-rail__item {
  scroll-snap-align: center;
  transform: rotateY(var(--ks-rail-ry, 0deg)) translateZ(var(--ks-rail-z, 0px));
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.fs-rail--orbit .fs-rail__item.is-center {
  --ks-rail-z: 48px;
  --ks-rail-ry: 0deg;
}
@keyframes ks-rail-orbit-drift {
  to { transform: rotateY(360deg); }
}

/* Flip card stack variant */
.ks-card--flip-stack {
  perspective: var(--ks-perspective);
  position: relative;
  min-height: 12rem;
}
.ks-card--flip-stack__inner {
  position: relative;
  transform-style: preserve-3d;
}
.ks-card--flip-stack__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  backface-visibility: hidden;
}
.ks-card--flip-stack__card:nth-child(1) { transform: translateZ(0); }
.ks-card--flip-stack__card:nth-child(2) { transform: translateZ(8px) rotateY(2deg); }
.ks-card--flip-stack__card:nth-child(3) { transform: translateZ(16px) rotateY(4deg); }
.ks-card--flip-stack.is-active .ks-card--flip-stack__card:nth-child(1) {
  transform: translateZ(24px) rotateY(180deg);
}

/* Display depth spiral variant */
.ks-display--depth--spiral .ks-display--depth__text {
  display: inline-block;
  transform-style: preserve-3d;
  animation: ks-display-spiral 6s linear infinite;
}
@keyframes ks-display-spiral {
  to { transform: rotateY(360deg) translateZ(var(--ks-translate-z-deep)); }
}

/* Tunnel warp variant */
.ks-ambient--tunnel--warp .ks-ambient--tunnel__grid {
  animation: ks-tunnel-warp 4s linear infinite;
  filter: hue-rotate(30deg);
}
@keyframes ks-tunnel-warp {
  from { transform: rotateX(75deg) translateZ(-100px) scale(1); }
  to { transform: rotateX(75deg) translateZ(120px) scale(1.4); }
}

/* Isometric keypad variant */
.ks-tile--iso-keypad {
  display: inline-grid;
  grid-template-columns: repeat(3, 2.5rem);
  gap: 0.35rem;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-45deg);
}
.ks-tile--iso-keypad__key {
  aspect-ratio: 1;
  background: var(--forge-surface-2);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.2rem;
  transform: translateZ(var(--ks-translate-z-lift));
  transition: transform 0.15s ease;
}
.ks-tile--iso-keypad__key:active {
  transform: translateZ(2px);
}

/* Isometric cube grid variant */
.ks-iso-cube-grid {
  display: grid;
  grid-template-columns: repeat(4, 2rem);
  gap: 0.5rem;
  perspective: var(--ks-perspective-near);
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
}
.ks-iso-cube-grid__cell {
  aspect-ratio: 1;
  background: var(--forge-surface);
  border: 1px solid var(--forge-border);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  transform: translateZ(calc(var(--ks-iso-i, 0) * 4px));
}

/* Holo card illumination variant */
.ks-card--holo--illumination .ks-card--holo__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ks-glare-x, 50%) var(--ks-glare-y, 40%),
    rgba(255, 255, 255, 0.35),
    transparent 55%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
  opacity: 0.8;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ks-tilt--js__inner,
  .ks-switch--pro-guard__thumb,
  .ks-switch--rocker__lever,
  .ks-bookmark__ribbon,
  .ks-flip-clock__digit,
  .ks-form--cube__scene,
  .ks-lights-rig__stage,
  .ks-carousel--ring__track,
  .ks-gallery--orbital__orbit,
  .ks-nav--stellar__slide,
  .ks-carousel--vertical__track,
  .ks-book--flip__page,
  .ks-accordion--fold__panel,
  .ks-card--fan__card,
  .ks-deck--stack__card,
  .ks-vinyl__disc,
  .ks-strip--scroll-flip__panel,
  .ks-error--cube__scene,
  .ks-loader--morph__solid,
  .ks-ambient--tumble__cube,
  .ks-ambient--hex__layer,
  .ks-ambient--globe__sphere,
  .ks-sphere-family__orb,
  .ks-scroll--parallax__layer,
  .ks-curtain--reveal__panel,
  .ks-loader--tower__cube,
  .ks-motion--linear__dot,
  .ks-dots__dot,
  .ks-scene--intersection__stage,
  .ks-bubbly__cell,
  .ks-hud--space__reticle,
  .ks-block--conf,
  .fs-rail--orbit .fs-rail__track,
  .ks-card--flip-stack__card,
  .ks-display--depth--spiral .ks-display--depth__text,
  .ks-ambient--tunnel--warp .ks-ambient--tunnel__grid {
    transition: none !important;
    animation: none !important;
  }
  .ks-flip-clock__digit.is-flipping .ks-flip-clock__top,
  .ks-flip-clock__digit.is-flipping .ks-flip-clock__bottom {
    animation: none !important;
  }
  .ks-book--flip.is-open .ks-book--flip__page--cover,
  .ks-curtain--reveal.is-revealed .ks-curtain--reveal__panel--left,
  .ks-curtain--reveal.is-revealed .ks-curtain--reveal__panel--right {
    transform: none;
  }
  .ks-ambient--hex__layer,
  .ks-ambient--globe__sphere,
  .ks-sphere-family__orb {
    opacity: 0.65;
  }
}

/* Ifn — fisheye depth nav */
.ks-nav--fisheye {
  perspective: 900px;
  padding: 1rem 0;
  overflow: hidden;
}
.ks-nav--fisheye__track {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  transform-style: preserve-3d;
}
.ks-nav--fisheye__link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--forge-border);
  background: color-mix(in srgb, var(--forge-surface) 80%, transparent);
  text-decoration: none;
  color: var(--forge-text);
  transform: translateZ(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ks-nav--fisheye__link:hover,
.ks-nav--fisheye__link:focus-visible {
  transform: translateZ(24px) scale(1.04);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.25);
}