/* Cyberpunk hero cube — pure CSS 3D, no libraries.
   Intro: assemble full-width → brief showcase → dock small at top.
   Docked: slow spin (JS), hover expands, drag to rotate, click face to open. */

.hero--with-cube {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: stretch;
}

.hero--with-cube .hero-copy {
  min-width: 0;
  max-width: var(--prose);
}

/* Desktop: copy left, cube right. The hero's min-height fixes the row, so
   the stage resizing between showcase and docked never moves the copy. */
@media (min-width: 64rem) {
  .hero--with-cube {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
    min-height: min(38rem, calc(100dvh - 4rem));
  }

  .hero--with-cube .hero-copy { grid-column: 1; grid-row: 1; }
  .hero--with-cube .hero-stage { grid-column: 2; grid-row: 1; }

  .hero--with-cube .hero-stage {
    --cube-size: clamp(12rem, 18vw, 15rem);
    --dock-scale: 0.78;
  }
}

/* --- stage --- */

.hero-stage {
  --cube-size: clamp(9rem, 28vw, 13rem);
  --half: calc(var(--cube-size) / 2);
  --fly: clamp(4.5rem, 18vw, 9rem);
  --dock-scale: 0.32;
  position: relative;
  width: 100%;
  min-height: calc(var(--cube-size) + var(--fly) * 1.15);
  margin: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  perspective-origin: 50% 45%;
  overflow: visible;
  transition:
    min-height 0.55s cubic-bezier(0.4, 0.1, 0.2, 1),
    width 0.55s ease,
    align-self 0.55s ease;
  touch-action: none; /* drag rotate on touch */
  user-select: none;
}

.hero-stage[hidden] {
  display: none !important;
}

/* Full-band intro */
.hero-stage.is-showcase {
  width: 100%;
  cursor: grab;
}

.hero-stage.is-showcase:active {
  cursor: grabbing;
}

/* Docked: small at top of hero, room for hover-expand */
.hero-stage.is-docked {
  width: auto;
  min-height: calc(var(--cube-size) * var(--dock-scale) + 1.25rem);
  align-self: center;
  z-index: 5;
  cursor: grab;
}

.hero-stage.is-docked:active {
  cursor: grabbing;
}

.hero-stage.is-docked.is-expanded,
.hero-stage.is-docked:hover,
.hero-stage.is-docked:focus-within {
  min-height: calc(var(--cube-size) + 1.5rem);
  z-index: 6;
}

.hero-stage.is-inspecting {
  cursor: default;
  z-index: 7;
}

.cube-scene {
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.15, 0.45, 1),
    margin 0.45s cubic-bezier(0.34, 1.15, 0.45, 1);
}

/* Scale down + negative margin so the layout footprint shrinks with the visual. */
.hero-stage.is-docked .cube-scene {
  transform: scale(var(--dock-scale));
  margin: calc(var(--cube-size) * (var(--dock-scale) - 1) / 2);
}

.hero-stage.is-docked.is-expanded .cube-scene,
.hero-stage.is-docked:hover .cube-scene,
.hero-stage.is-docked:focus-within .cube-scene {
  transform: scale(1);
  margin: 0;
}

.hero-stage.is-docked.is-inspecting .cube-scene {
  transform: scale(1);
  margin: 0;
}

.cube {
  position: absolute;
  inset: 0;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(32deg);
  will-change: transform;
  /* Rotation driven by JS after assemble (mouse + auto-spin). */
}

.hero-stage.is-assembling .cube {
  transform: rotateX(-22deg) rotateY(32deg);
}

/* --- faces --- */

.cube-face {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cube-size);
  height: var(--cube-size);
  display: grid;
  place-items: center;
  padding: var(--space-2);
  margin: 0;
  border: 1px solid var(--cube-edge);
  border-radius: 4px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cube-edge) 8%, transparent), transparent 45%),
    var(--cube-face-bg);
  color: var(--cube-face-text);
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 2.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backface-visibility: hidden;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cube-edge) 15%, transparent) inset,
    0 0 18px color-mix(in srgb, var(--cube-edge) 25%, transparent);
  transition: filter 0.25s ease, box-shadow 0.25s ease, opacity 0.35s ease;
  overflow: hidden;
  transform:
    rotateY(var(--face-ry, 0deg))
    rotateX(var(--face-rx, 0deg))
    translateZ(var(--half));
}

.cube-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--cube-edge) 4%, transparent) 2px,
      color-mix(in srgb, var(--cube-edge) 4%, transparent) 3px
    );
  pointer-events: none;
}

.cube-face::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid color-mix(in srgb, var(--cube-edge) 20%, transparent);
  border-radius: 2px;
  pointer-events: none;
}

.cube-face:hover,
.cube-face:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cube-edge) 35%, transparent) inset,
    0 0 28px color-mix(in srgb, var(--cube-edge) 45%, transparent);
  filter: brightness(1.12);
}

.cube-face[data-face="front"]  { --face-ry: 0deg;   --face-rx: 0deg;  --ex: 0;  --ey: 0;  --ez: 1; }
.cube-face[data-face="back"]   { --face-ry: 180deg; --face-rx: 0deg;  --ex: 0;  --ey: 0;  --ez: -1; }
.cube-face[data-face="right"]  { --face-ry: 90deg;  --face-rx: 0deg;  --ex: 1;  --ey: 0;  --ez: 0; }
.cube-face[data-face="left"]   { --face-ry: -90deg; --face-rx: 0deg;  --ex: -1; --ey: 0;  --ez: 0; }
.cube-face[data-face="top"]    { --face-ry: 0deg;   --face-rx: 90deg; --ex: 0;  --ey: -1; --ez: 0; }
.cube-face[data-face="bottom"] { --face-ry: 0deg;   --face-rx: -90deg; --ex: 0; --ey: 1;  --ez: 0; }

/* --- assemble --- */

.hero-stage.is-assembling .cube-face {
  pointer-events: none;
  animation: face-assemble 0.95s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-stage.is-assembling .cube-face[data-face="front"]  { animation-delay: 0.00s; }
.hero-stage.is-assembling .cube-face[data-face="right"]  { animation-delay: 0.07s; }
.hero-stage.is-assembling .cube-face[data-face="top"]    { animation-delay: 0.14s; }
.hero-stage.is-assembling .cube-face[data-face="left"]   { animation-delay: 0.21s; }
.hero-stage.is-assembling .cube-face[data-face="bottom"] { animation-delay: 0.28s; }
.hero-stage.is-assembling .cube-face[data-face="back"]   { animation-delay: 0.35s; }

@keyframes face-assemble {
  0% {
    opacity: 0;
    transform:
      rotateY(var(--face-ry, 0deg))
      rotateX(var(--face-rx, 0deg))
      translateZ(var(--half))
      translate3d(
        calc(var(--ex) * var(--fly)),
        calc(var(--ey) * var(--fly)),
        calc(var(--ez) * var(--fly))
      )
      scale(0.85);
    filter: brightness(1.4);
  }
  70% {
    opacity: 1;
    filter: brightness(1.15);
  }
  100% {
    opacity: 1;
    transform:
      rotateY(var(--face-ry, 0deg))
      rotateX(var(--face-rx, 0deg))
      translateZ(var(--half));
    filter: none;
  }
}

/* --- inspect --- */

.hero-stage.is-inspecting .cube-face:not(.is-selected) {
  opacity: 0;
  pointer-events: none;
  filter: blur(2px);
}

.hero-stage.is-inspecting .cube-face.is-selected {
  animation: face-focus 0.45s ease forwards;
}

.hero-stage.is-inspecting .cube-face.is-selected.is-dissolved {
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: none;
}

@keyframes face-focus {
  to {
    filter: brightness(1.2);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--cube-edge) 50%, transparent) inset,
      0 0 36px color-mix(in srgb, var(--cube-edge) 55%, transparent);
  }
}

/* --- explain card --- */

.cube-explain {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(18rem, 92%);
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--cube-edge) 45%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cube-edge) 10%, transparent), transparent 50%),
    var(--bg-raised);
  box-shadow:
    0 0 24px color-mix(in srgb, var(--cube-edge) 15%, transparent);
  animation: explain-in 0.35s ease both;
  user-select: text;
  touch-action: auto;
}

.cube-explain[hidden] {
  display: none !important;
}

@keyframes explain-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cube-explain-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cube-edge);
  margin: 0;
}

.cube-explain-body {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.cube-explain-continue {
  align-self: flex-start;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

/* --- theme --- (face colors come from tokens.css) */

/* On a light page: softer glow plus a tinted shadow to seat the dark cube. */
:root[data-theme="light"] .cube-face {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cube-edge) 20%, transparent) inset,
    0 0 14px color-mix(in srgb, var(--cube-edge) 18%, transparent),
    0 10px 24px rgb(18 40 40 / 0.16);
}

/* --- responsive --- */

@media (max-width: 40rem) {
  .hero-stage {
    --cube-size: clamp(7.5rem, 42vw, 10rem);
  }

  .hero-stage.is-showcase {
    min-height: calc(var(--cube-size) + var(--fly));
  }

  .hero-stage.is-docked {
    --dock-scale: 0.36;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cube-face,
  .cube-explain,
  .cube-scene {
    animation: none !important;
    transition: none !important;
  }
}