/* Shared 3D stage, fallback sculptures, and motion. Theme files place the stage. */

.scene-frame {
  position: relative;
  isolation: isolate;
  pointer-events: none;
  transform-style: preserve-3d;
}

.scene-frame-hero {
  width: 100%;
  height: min(420px, 52vw);
  min-height: 260px;
}

.scene-frame-page {
  width: min(280px, 42vw);
  height: 210px;
  min-height: 160px;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.scene-fallback {
  position: absolute;
  inset: 12%;
  transform-style: preserve-3d;
  animation: sculp-orbit 18s linear infinite;
}

.scene-fallback span {
  position: absolute;
  inset: 18% 32%;
  background: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--fg)));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  transform-style: preserve-3d;
}

.sculp-midnight span:nth-child(1) { transform: translate3d(-70px, 20px, 20px) rotateY(-18deg) scaleY(1.35); }
.sculp-midnight span:nth-child(2) { transform: translate3d(-24px, 46px, 8px) rotateY(-8deg) scaleY(0.9); }
.sculp-midnight span:nth-child(3) { transform: translate3d(22px, 30px, 28px) rotateY(8deg) scaleY(1.15); }
.sculp-midnight span:nth-child(4) { transform: translate3d(68px, 58px, 4px) rotateY(16deg) scaleY(0.75); }

.sculp-ivory span {
  background: linear-gradient(180deg, #fffdf8, #efe4d2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.sculp-ivory span:nth-child(1) { transform: translate3d(-40px, 10px, 30px) rotateX(-62deg) rotateZ(-12deg); }
.sculp-ivory span:nth-child(2) { transform: translate3d(-8px, 18px, 10px) rotateX(-58deg) rotateZ(-4deg); }
.sculp-ivory span:nth-child(3) { transform: translate3d(24px, 8px, -6px) rotateX(-64deg) rotateZ(8deg); }
.sculp-ivory span:nth-child(4) { transform: translate3d(52px, 22px, -24px) rotateX(-60deg) rotateZ(16deg); }

.sculp-slate span {
  background: transparent;
  border: 2px solid var(--accent);
  box-shadow: none;
}
.sculp-slate span:nth-child(1) { inset: 30% 30%; transform: translate3d(-50px, 10px, 40px) rotateX(64deg) rotateZ(45deg); }
.sculp-slate span:nth-child(2) { inset: 34% 34%; transform: translate3d(10px, -20px, 10px) rotateX(64deg) rotateZ(45deg); }
.sculp-slate span:nth-child(3) { inset: 28% 38%; transform: translate3d(40px, 30px, -10px) rotateX(64deg) rotateZ(45deg); }
.sculp-slate span:nth-child(4) { inset: 40% 20%; transform: translate3d(0, 40px, -30px) rotateX(64deg) rotateZ(45deg); }

.sculp-cedar span {
  border-radius: 50%;
  background: transparent;
  border: 3px solid var(--accent);
  box-shadow: none;
  inset: 12%;
}
.sculp-cedar span:nth-child(1) { transform: rotateX(68deg) scale(1); }
.sculp-cedar span:nth-child(2) { transform: rotateX(68deg) scale(0.72); }
.sculp-cedar span:nth-child(3) { transform: rotateX(68deg) scale(0.46); }
.sculp-cedar span:nth-child(4) { inset: 38% 46%; border-radius: 2px; background: var(--accent); transform: rotateX(8deg) scaleY(1.6); }

.scene-frame.has-web .scene-fallback {
  opacity: 0;
}

.hero,
.page-hero,
main {
  position: relative;
  transform-style: preserve-3d;
}

main {
  perspective: 1400px;
}

.card,
.service-card,
.market-card,
.principle-card,
.process-step,
.letter-block,
.contact-panel,
.spec-row,
.chapter,
.feature-row,
.quote-panel {
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease, border-color 200ms ease;
  will-change: transform;
}

.is-tilting {
  transition: transform 80ms linear;
}

.reveal-3d {
  animation: rise-3d 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sculp-orbit {
  to { transform: rotateY(360deg) rotateX(12deg); }
}

@keyframes rise-3d {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, -40px) rotateX(8deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-fallback,
  .reveal-3d,
  .card,
  .service-card,
  .process-step {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}