/* =========================================================
   Spatial Hero V2.1 — Layout
   Dimensional float / settle with rupture-aware motion
========================================================= */

.sv-spatial-hero__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(600px, 50vw, 760px);
  perspective: 1600px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
  overflow: visible;
  touch-action: pan-y;
}

.sv-spatial-entry {
  position: absolute;
  top: 6%;
  left: 50%;
  width: clamp(240px, 27vw, 360px);
  margin: 0;
  transform: translate3d(-50%, 0, 0);
  transform-origin: center center;
  opacity: 0.55;
  filter: blur(2.2px);
  z-index: 1;
  backface-visibility: hidden;
  transition:
    transform 880ms var(--sv-ease-snap),
    top 880ms var(--sv-ease-snap),
    left 880ms var(--sv-ease-snap),
    width 880ms var(--sv-ease),
    opacity 620ms var(--sv-ease),
    filter 620ms var(--sv-ease);
}

/* INTRO — floating constellation */
.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry:nth-child(1),
.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry[data-spatial-index="0"] {
  transform: translate3d(calc(-50% - 42px), 28px, -50px) rotate(-6deg) scale(0.84);
  opacity: 0.52;
  filter: blur(2.6px);
  z-index: 2;
}

.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry:nth-child(2),
.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry[data-spatial-index="1"] {
  transform: translate3d(calc(-50% + 36px), 4px, -80px) rotate(5deg) scale(0.82);
  opacity: 0.56;
  filter: blur(2.3px);
  z-index: 3;
}

.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry:nth-child(3),
.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry[data-spatial-index="2"] {
  transform: translate3d(calc(-50% + 6px), 56px, -110px) rotate(-3deg) scale(0.78);
  opacity: 0.48;
  filter: blur(2.8px);
  z-index: 1;
}

.sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry__content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* FOCUSED — settle / drift */
.sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="side"][data-spatial-position="left"] {
  top: 9%;
  left: 20%;
  width: clamp(170px, 18vw, 250px);
  transform: translate3d(-50%, 56px, -100px) rotate(-8deg) scale(0.82);
  opacity: 0.58;
  filter: blur(1.8px);
  z-index: 2;
}

.sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="side"][data-spatial-position="right"] {
  top: 9%;
  left: 80%;
  width: clamp(170px, 18vw, 250px);
  transform: translate3d(-50%, 56px, -100px) rotate(8deg) scale(0.82);
  opacity: 0.58;
  filter: blur(1.8px);
  z-index: 2;
}

.sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="active"] {
  top: 2%;
  left: 50%;
  width: clamp(280px, 34vw, 440px);
  transform: translate3d(-50%, 0, 70px) rotate(0deg) scale(1);
  opacity: 1;
  filter: none;
  z-index: 6;
}

.sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="active"] .sv-spatial-entry__content {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* MOBILE */
@media (max-width: 767px) {
  .sv-spatial-hero__stage {
    height: clamp(500px, 138vw, 620px);
    perspective: 1100px;
    touch-action: pan-y pinch-zoom;
  }

  .sv-spatial-entry {
    top: 4%;
    width: min(64vw, 280px);
  }

  .sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry:nth-child(1),
  .sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry[data-spatial-index="0"] {
    transform: translate3d(calc(-50% - 28px), 18px, -30px) rotate(-5deg) scale(0.8);
  }

  .sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry:nth-child(2),
  .sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry[data-spatial-index="1"] {
    transform: translate3d(calc(-50% + 28px), 8px, -55px) rotate(5deg) scale(0.8);
  }

  .sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry:nth-child(3),
  .sv-spatial-hero[data-spatial-state="intro"] .sv-spatial-entry[data-spatial-index="2"] {
    transform: translate3d(-50%, 36px, -75px) rotate(-2deg) scale(0.76);
  }

  .sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="side"][data-spatial-position="left"] {
    left: 8%;
    width: 20vw;
    transform: translate3d(-50%, 30px, -70px) rotate(-7deg) scale(0.78);
  }

  .sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="side"][data-spatial-position="right"] {
    left: 92%;
    width: 20vw;
    transform: translate3d(-50%, 30px, -70px) rotate(7deg) scale(0.78);
  }

  .sv-spatial-hero[data-spatial-state="focused"] .sv-spatial-entry[data-spatial-state="active"] {
    top: 1%;
    width: min(74vw, 320px);
    transform: translate3d(-50%, 0, 55px) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-spatial-entry {
    transition: none !important;
  }
}