/* ───────── EXPLODED ISOMETRIC HERO SCENE ─────────
   Rooms are built in SVG (see hero-scene.html). Each part is a <g>
   with a class matching `.p-<name>` and a --x/--y/--z offset that
   drives the explode position. Animation: pieces travel from their
   exploded offset to origin on `.assemble`, hold with tiny ambient
   motion, then retreat to a different offset on `.disassemble`.   */

.hero-scene{
  position:relative;
  width:100%;
  aspect-ratio: 5 / 4;
  max-width:640px;
  margin-inline:auto;
  perspective: 1600px;
  perspective-origin: 50% 42%;
}

.hero-scene .orbit{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:
    rotateX(var(--orbit-x, 0deg))
    rotateY(var(--orbit-y, 0deg));
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.hero-scene .room{
  position:absolute;inset:0;
  opacity:0;
  transition: opacity .6s ease;
  pointer-events:none;
}
.hero-scene .room.is-active{ opacity:1 }

/* Ambient scene bob (very subtle) */
@keyframes sceneBob{
  from{ transform: translateY(-4px) }
  to  { transform: translateY(4px)  }
}
.hero-scene .bob{
  width:100%;height:100%;
  animation: sceneBob 7s ease-in-out infinite alternate;
}

/* ── Pieces: every <g.piece> is a part of the room.
      Pieces declare their own exploded offset via inline style
      `--ox / --oy / --oz` (px/px/px along viewport axes) and a
      small rotation `--or` (deg) so the explode feels cinematic. */

.hero-scene .piece{
  transform-origin: 50% 50%;
  transition:
    transform 1.2s cubic-bezier(.22, 1, .36, 1),
    opacity   .7s ease;
  will-change: transform, opacity;
}

/* Assembly state: every piece lands at its final position */
.hero-scene .room.assembled .piece{
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
}

/* Exploded: pieces sit at their offset, faded out */
.hero-scene .room.exploded .piece{
  transform:
    translate3d(
      calc(var(--ox, 0px)),
      calc(var(--oy, -180px)),
      calc(var(--oz, 80px))
    )
    rotate(calc(var(--or, 0deg)));
  opacity: 0;
}

/* Dispersing (disassembly): pieces lift upward and rotate away */
.hero-scene .room.dispersing .piece{
  transform:
    translate3d(
      calc(var(--dx, 0px)),
      calc(var(--dy, -260px)),
      calc(var(--dz, 40px))
    )
    rotate(calc(var(--dr, -6deg)));
  opacity: 0;
  transition:
    transform 1.05s cubic-bezier(.5, 0, .75, 0),
    opacity   .85s ease;
}

/* Stagger: order of arrival feels like construction —
   floor + walls first, then structural furniture, then accents. */
.hero-scene .room .piece{ transition-delay: 0ms }
.hero-scene .room.assembled .piece.l1 { transition-delay: 40ms }
.hero-scene .room.assembled .piece.l2 { transition-delay: 120ms }
.hero-scene .room.assembled .piece.l3 { transition-delay: 220ms }
.hero-scene .room.assembled .piece.l4 { transition-delay: 340ms }
.hero-scene .room.assembled .piece.l5 { transition-delay: 470ms }
.hero-scene .room.assembled .piece.l6 { transition-delay: 600ms }
.hero-scene .room.assembled .piece.l7 { transition-delay: 720ms }

/* Reverse stagger for dispersal — accents leave first, floor last */
.hero-scene .room.dispersing .piece.l7 { transition-delay: 0ms }
.hero-scene .room.dispersing .piece.l6 { transition-delay: 60ms }
.hero-scene .room.dispersing .piece.l5 { transition-delay: 120ms }
.hero-scene .room.dispersing .piece.l4 { transition-delay: 180ms }
.hero-scene .room.dispersing .piece.l3 { transition-delay: 240ms }
.hero-scene .room.dispersing .piece.l2 { transition-delay: 300ms }
.hero-scene .room.dispersing .piece.l1 { transition-delay: 360ms }

/* Hold-state life: tiny in-place motion on active accents */
@keyframes tinyFloat{
  0%,100%{ transform: translate3d(0,0,0) }
  50%    { transform: translate3d(0,-2.5px,0) }
}
.hero-scene .room.assembled .piece.breathe{
  animation: tinyFloat 3.8s ease-in-out infinite;
  animation-delay: 1.6s;
}

/* Drop-shadow under the whole room, warms with room */
.hero-scene .ground{
  position:absolute;left:50%;bottom:4%;
  width:62%;height:6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in oklab, var(--navy) 22%, transparent),
    transparent 70%);
  filter: blur(6px);
  opacity:0;
  transition: opacity .9s ease;
  pointer-events:none;
}
.hero-scene .ground.show{ opacity: .65 }

/* Room label */
.hero-scene .tag{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px;border-radius:999px;
  background:var(--bg);
  border:1px solid var(--rule-strong);
  font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);
  box-shadow:0 6px 18px color-mix(in oklab, var(--navy) 8%, transparent);
  z-index:5;
}
.hero-scene .tag .dot{
  width:6px;height:6px;border-radius:50%;background:var(--clay);
  animation:pulse 2s ease-in-out infinite;
}
.hero-scene .tag .txt{
  position:relative;display:inline-block;min-width:92px;height:1em;overflow:hidden;
}
.hero-scene .tag .txt > span{
  position:absolute;left:0;top:0;width:100%;
  opacity:0;transform:translateY(100%);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.hero-scene .tag .txt > span.active{opacity:1;transform:translateY(0)}

/* Dots */
.hero-scene .dots{
  position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);
  display:flex;gap:12px;z-index:5;
}
.hero-scene .dots button{
  width:10px;height:10px;border-radius:50%;
  background:transparent;
  border:1.5px solid color-mix(in oklab, var(--navy) 40%, transparent);
  transition: background .3s, transform .3s, border-color .3s;
  cursor:pointer;padding:0;
}
.hero-scene .dots button:hover{transform:scale(1.25);border-color:var(--navy)}
.hero-scene .dots button.active{background:var(--navy);border-color:var(--navy);transform:scale(1.25)}

/* Progress ring — shows hold progress */
.hero-scene .progress{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;
  z-index:5;pointer-events:none;
}
.hero-scene .progress circle{
  fill:none;stroke-width:1.5;
  stroke:color-mix(in oklab, var(--navy) 30%, transparent);
  cx:19;cy:19;r:16;
}
.hero-scene .progress .bar{
  stroke:var(--navy);
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5;
  transform: rotate(-90deg);
  transform-origin: 19px 19px;
  transition: stroke-dashoffset linear;
}

/* Hint */
.hero-scene .hint{
  position:absolute;left:50%;bottom:-82px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy-soft);
}
.hero-scene .hint .live{
  width:6px;height:6px;border-radius:50%;background:#3bb36e;
  box-shadow:0 0 0 3px color-mix(in oklab, #3bb36e 22%, transparent);
  animation:pulse 1.8s ease-in-out infinite;
}

@media (max-width: 900px){
  .hero-scene{ max-width: 520px }
}
@media (max-width: 640px){
  .hero-scene{ max-width: 420px }
  .hero-scene .hint{ display:none }
}