/* Isometric scene styles + build-in animation.
 *
 * Elements carry a role class (iso-rise, iso-pop, iso-draw, ...) and a --d
 * delay. Nothing animates until an ancestor gets .iso--play, which the player
 * adds when the scene scrolls into view. Removing and re-adding .iso--play
 * replays the whole build.
 */

.iso-scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--iso-font, "Google Sans Flex", system-ui, -apple-system, sans-serif);
}

.iso-t-text { font-size: 13px; font-weight: 500; }
.iso-t-label { font-size: 11px; font-weight: 600; }
.iso-t-chip { font-size: 10.5px; font-weight: 600; }
.iso-t-col { font-size: 8.5px; font-weight: 600; letter-spacing: 0.01em; }
.iso-t-node { font-size: 8px; font-weight: 600; }
.iso-t-file { font-size: 6px; font-weight: 600; }
.iso-t-bubble { font-size: 6.5px; font-weight: 600; }

/* Hidden until played. */
.iso-scene .iso-rise,
.iso-scene .iso-pop,
.iso-scene .iso-pulse,
.iso-scene .iso-blink {
  opacity: 0;
}

.iso-scene .iso-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.iso-scene .iso-pop,
.iso-scene .iso-pulse {
  transform-box: fill-box;
  transform-origin: center;
}

/* Second beat: a state change after the build-in. Hidden or empty until played.
 * iso-out and iso-tick are "before" states: they show at --d and leave at --d2.
 * iso-show and iso-fill are "after" states: they stay. */
.iso-scene .iso-out,
.iso-scene .iso-tick,
.iso-scene .iso-show {
  opacity: 0;
}

.iso-scene .iso-out {
  transform-box: fill-box;
  transform-origin: center;
}

.iso-scene .iso-fill {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
}

.iso--play .iso-rise {
  animation: iso-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) forwards;
}

.iso--play .iso-pop {
  animation: iso-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) forwards;
}

.iso--play .iso-float {
  animation: iso-float 4s ease-in-out 1.6s infinite;
}

.iso--play .iso-draw {
  animation: iso-draw var(--t, 0.6s) cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s) forwards;
}

.iso--play .iso-pulse {
  animation:
    iso-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) forwards,
    iso-pulse 2.4s ease-in-out calc(var(--d, 0s) + 0.6s) infinite;
}

.iso--play .iso-blink {
  animation:
    iso-pop 0.3s ease var(--d, 0s) forwards,
    iso-blink 1s steps(1) calc(var(--d, 0s) + 0.3s) infinite;
}

.iso--play .iso-fill {
  animation: iso-fill var(--t, 1s) cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s) forwards;
}

.iso--play .iso-out {
  animation:
    iso-pop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) forwards,
    iso-out 0.35s cubic-bezier(0.4, 0, 1, 1) var(--d2, 0s) forwards;
}

.iso--play .iso-tick {
  animation:
    iso-show 0.01s linear var(--d, 0s) forwards,
    iso-hide 0.01s linear var(--d2, 0s) forwards;
}

.iso--play .iso-show {
  animation: iso-show 0.01s linear var(--d, 0s) forwards;
}

@keyframes iso-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes iso-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes iso-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes iso-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes iso-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}

@keyframes iso-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes iso-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes iso-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: scale(0.6); }
}

@keyframes iso-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes iso-hide {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Final frame, no motion: for screenshots, no-JS and reduced motion. */
.iso--static .iso-rise,
.iso--static .iso-pop,
.iso--static .iso-float,
.iso--static .iso-draw,
.iso--static .iso-pulse,
.iso--static .iso-blink,
.iso--static .iso-fill,
.iso--static .iso-show {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  stroke-dashoffset: 0 !important;
}

/* "Before" states are gone in the final frame. */
.iso--static .iso-out,
.iso--static .iso-tick {
  animation: none !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .iso-scene .iso-rise,
  .iso-scene .iso-pop,
  .iso-scene .iso-float,
  .iso-scene .iso-draw,
  .iso-scene .iso-pulse,
  .iso-scene .iso-blink,
  .iso-scene .iso-fill,
  .iso-scene .iso-show {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }

  .iso-scene .iso-out,
  .iso-scene .iso-tick {
    animation: none !important;
    opacity: 0 !important;
  }
}