/* =====================================================================
   The one 3D moment: the hero composition on the home page.
   Objects settle into place once on load, then follow the mouse.
   ===================================================================== */

.scene { height: 440px; perspective: 1200px; perspective-origin: 50% 35%; }
.stage {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateX(calc(16deg + var(--py, 0) * -8deg)) rotateY(calc(-24deg + var(--px, 0) * 14deg));
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* soft contact shadow on an invisible floor */
.floor {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px;
  background: radial-gradient(closest-side, rgba(21, 23, 28, .16), rgba(21, 23, 28, .05) 55%, transparent);
  transform: rotateX(90deg) translateZ(-170px);
  border-radius: 50%;
}
@media (prefers-color-scheme: dark) { .floor { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); } }

.obj {
  position: absolute; left: 50%; top: 50%; transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(var(--r, 0deg));
  animation: settle 1.1s cubic-bezier(.16, .84, .3, 1) var(--d, 0s) both, drift 9s ease-in-out calc(var(--d, 0s) + 1.1s) infinite;
}
@keyframes settle {
  from { opacity: 0; transform: translate3d(var(--x), calc(var(--y) + 60px), calc(var(--z) - 260px)) rotateZ(var(--r, 0deg)) rotateX(-25deg); }
}
@keyframes drift {
  50% { transform: translate3d(var(--x), calc(var(--y) - 8px), var(--z)) rotateZ(var(--r, 0deg)); }
}

/* a document = two sheets with real depth between them */
.doc { width: 156px; height: 200px; position: relative; transform-style: preserve-3d; }
.doc .sheet { position: absolute; inset: 0; border-radius: 14px; }
.doc .back { transform: translateZ(-10px) translate(8px, 8px); background: color-mix(in srgb, var(--c) 22%, var(--surface)); }
.doc .top {
  display: flex; flex-direction: column; gap: 9px; padding: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.doc .tag {
  align-self: flex-start; font: 600 12px/1 var(--font); letter-spacing: .02em; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, var(--surface)); padding: 5px 8px; border-radius: 7px;
  transform: translateZ(14px);
}
.doc .ln { height: 7px; border-radius: 99px; background: var(--sunken); }
.doc .ln.s { width: 58%; }
.doc .pic {
  flex: 1; border-radius: 9px; position: relative; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 18%, var(--surface)), color-mix(in srgb, var(--c) 45%, var(--surface)));
}
.doc .pic::before { content: ''; position: absolute; inset: auto -10% -20% -10%; height: 70%; background: var(--c); opacity: .55; clip-path: polygon(0 100%, 28% 35%, 48% 62%, 72% 15%, 100% 100%); }
.doc .pic::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); top: 16%; right: 20%; opacity: .9; }
.doc .code { font: 500 12.5px/1.55 var(--mono); color: var(--muted); white-space: pre; }
.doc .code b { color: var(--c); font-weight: 500; }

/* a solid cube */
.cube { --s: 88px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(32deg); }
.cube > span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px;
  font: 600 30px/1 var(--display); color: var(--surface); background: var(--c); backface-visibility: hidden;
}
.cube > span:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.cube > span:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube > span:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.82); }
.cube > span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.82); }
.cube > span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(1.12); }
.cube > span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.7); }

@media (max-width: 960px) {
  .scene { height: 340px; }
  .stage { transform: rotateX(14deg) rotateY(-20deg) scale(.82); }
}
@media (max-width: 520px) {
  .scene { height: 260px; margin-top: 8px; }
  .stage { transform: rotateX(12deg) rotateY(-16deg) scale(.62); }
}
@media (prefers-reduced-motion: reduce) {
  .obj { animation: none; }
}

/* inside the dark hero panel: glowing glass sheets and a light pool instead of a shadow */
.hero-panel .floor { background: radial-gradient(closest-side, rgba(123, 147, 255, .35), rgba(123, 147, 255, .08) 55%, transparent); }
.hero-panel .doc .top {
  background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)), #121729;
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 24px 50px -22px color-mix(in srgb, var(--c) 80%, transparent);
}
.hero-panel .doc .back { background: color-mix(in srgb, var(--c) 45%, #0b0e1a); opacity: .7; }
.hero-panel .doc .ln { background: rgba(255, 255, 255, .10); }
.hero-panel .cube > span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.hero-panel .cube { filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--calc) 55%, transparent)); }
@media (max-width: 960px) { .scene { height: 320px; } }