/* Interactive Soft Squares — DREAM 2 HERO preview.
   Separated scales, living pulse, collision-safe flight corridors, visible depth shadows,
   geometric hit-testing through HERO content, and radial dust dissolve. */

.hero[data-ambient-squares="hero"] {
  position: relative;
  isolation: isolate;
}

.hero[data-ambient-squares="hero"] > .hero-layout {
  position: relative;
  z-index: 2;
}

.ambient-squares-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.ambient-square {
  position: absolute;
  left: var(--ambient-left);
  top: var(--ambient-top);
  width: var(--ambient-size);
  height: var(--ambient-size);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.ambient-square-motion,
.ambient-square-sway,
.ambient-square-shape {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ambient-square-motion {
  animation: ambient-square-rise var(--ambient-rise-duration) linear forwards;
  will-change: transform;
}

.ambient-square-sway {
  animation: ambient-square-sway var(--ambient-sway-duration) ease-in-out var(--ambient-sway-delay) infinite alternate;
  will-change: transform;
}

.ambient-square-shape {
  border-radius: 31% 14% 31% 14%;
  background: var(--ambient-color);
  opacity: .02;
  filter: blur(var(--ambient-blur));
  transform: rotate(var(--ambient-rotation)) scale(var(--ambient-start-scale));
  transform-origin: center;
  box-shadow:
    0 16px 34px rgba(32, 54, 74, .18),
    0 5px 14px rgba(32, 54, 74, .12),
    0 1px 0 rgba(255, 255, 255, .20) inset;
  transition:
    opacity var(--ambient-grow-duration) linear,
    transform var(--ambient-grow-duration) cubic-bezier(.16,.7,.18,1),
    filter 900ms ease,
    box-shadow 900ms ease,
    border-radius 320ms ease;
  touch-action: manipulation;
  will-change: transform, opacity, filter, box-shadow;
}

.ambient-square.is-ready .ambient-square-shape {
  opacity: clamp(.80, calc(var(--ambient-opacity) + .28), .94);
  transform: rotate(var(--ambient-rotation)) scale(1);
}

.ambient-size-xs .ambient-square-shape,
.ambient-size-s .ambient-square-shape {
  box-shadow:
    0 10px 22px rgba(32, 54, 74, .16),
    0 4px 10px rgba(32, 54, 74, .10),
    0 1px 0 rgba(255, 255, 255, .18) inset;
}

.ambient-size-m .ambient-square-shape,
.ambient-size-l .ambient-square-shape {
  box-shadow:
    0 18px 40px rgba(32, 54, 74, .20),
    0 6px 16px rgba(32, 54, 74, .12),
    0 1px 0 rgba(255, 255, 255, .20) inset;
}

.ambient-size-xl .ambient-square-shape {
  box-shadow:
    0 26px 58px rgba(32, 54, 74, .24),
    0 9px 22px rgba(32, 54, 74, .14),
    0 1px 0 rgba(255, 255, 255, .22) inset;
}

.ambient-square.is-grown .ambient-square-shape {
  animation: ambient-square-breathe 4.9s ease-in-out infinite;
}

.ambient-size-m.is-grown .ambient-square-shape,
.ambient-size-l.is-grown .ambient-square-shape {
  animation-name: ambient-square-breathe-medium;
  animation-duration: 4.4s;
}

.ambient-size-xl.is-grown .ambient-square-shape {
  animation-name: ambient-square-breathe-xl;
  animation-duration: 3.55s;
}

.ambient-square.is-compressing .ambient-square-shape {
  animation: none;
  opacity: .96;
  filter: blur(0);
  transform: rotate(var(--ambient-rotation)) scale(.84);
  box-shadow:
    0 12px 28px rgba(32, 54, 74, .18),
    0 4px 10px rgba(32, 54, 74, .10);
  transition:
    opacity 125ms ease,
    transform 125ms cubic-bezier(.32,.02,.52,1),
    filter 125ms ease,
    box-shadow 125ms ease;
}

.ambient-square.is-clouding .ambient-square-shape {
  animation: none;
  opacity: .15;
  filter: blur(7px);
  border-radius: 50%;
  transform: rotate(var(--ambient-rotation)) scale(1.17);
  box-shadow: 0 16px 34px rgba(32, 54, 74, .06);
  transition:
    opacity 235ms ease-out,
    transform 235ms cubic-bezier(.16,.58,.18,1),
    filter 235ms ease-out,
    border-radius 235ms ease-out,
    box-shadow 235ms ease-out;
}

.ambient-cloud-speck,
.ambient-particle {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.ambient-cloud-speck {
  width: var(--cloud-size);
  height: var(--cloud-size);
  border-radius: 50%;
  background: var(--cloud-color);
  box-shadow: 0 0 5px color-mix(in srgb, var(--cloud-color) 34%, transparent);
}

.ambient-particle {
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: var(--particle-color);
  opacity: var(--particle-opacity);
}

@keyframes ambient-square-rise {
  0% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(0, calc(var(--ambient-rise-y) * .35), 0); }
  68% { transform: translate3d(0, calc(var(--ambient-rise-y) * .68), 0); }
  100% { transform: translate3d(0, var(--ambient-rise-y), 0); }
}

@keyframes ambient-square-sway {
  0% {
    transform: translate3d(calc(var(--ambient-sway-x) * -.32), 0, 0) rotate(calc(var(--ambient-sway-rotation) * -.32));
  }
  50% {
    transform: translate3d(calc(var(--ambient-sway-x) * .2), 0, 0) rotate(calc(var(--ambient-sway-rotation) * .14));
  }
  100% {
    transform: translate3d(var(--ambient-sway-x), 0, 0) rotate(var(--ambient-sway-rotation));
  }
}

@keyframes ambient-square-breathe {
  0%, 100% {
    transform: rotate(var(--ambient-rotation)) scale(1);
    border-radius: 31% 14% 31% 14%;
  }
  50% {
    transform: rotate(calc(var(--ambient-rotation) + 1.1deg)) scale(1.035);
    border-radius: 27% 18% 34% 12%;
  }
}

@keyframes ambient-square-breathe-medium {
  0%, 100% {
    transform: rotate(var(--ambient-rotation)) scale(1);
    border-radius: 31% 14% 31% 14%;
  }
  50% {
    transform: rotate(calc(var(--ambient-rotation) + 1.35deg)) scale(1.052);
    border-radius: 26% 19% 35% 12%;
  }
}

@keyframes ambient-square-breathe-xl {
  0%, 100% {
    transform: rotate(var(--ambient-rotation)) scale(1);
    border-radius: 31% 14% 31% 14%;
    box-shadow:
      0 26px 58px rgba(32, 54, 74, .24),
      0 9px 22px rgba(32, 54, 74, .14),
      0 1px 0 rgba(255, 255, 255, .22) inset;
  }
  48% {
    transform: rotate(calc(var(--ambient-rotation) + 1.8deg)) scale(1.085);
    border-radius: 25% 20% 36% 11%;
    box-shadow:
      0 34px 70px rgba(32, 54, 74, .27),
      0 12px 28px rgba(32, 54, 74, .16),
      0 1px 0 rgba(255, 255, 255, .22) inset;
  }
  62% {
    transform: rotate(calc(var(--ambient-rotation) + 1.3deg)) scale(1.06);
  }
}

@media (max-width: 820px) {
  .ambient-square.is-ready .ambient-square-shape {
    opacity: clamp(.74, calc(var(--ambient-opacity) + .22), .88);
  }

  .ambient-square.is-grown .ambient-square-shape {
    animation-duration: 4.4s;
  }

  .ambient-size-l.is-grown .ambient-square-shape {
    animation-name: ambient-square-breathe-medium;
    animation-duration: 3.9s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-square-motion,
  .ambient-square-sway,
  .ambient-square.is-grown .ambient-square-shape {
    animation: none;
  }

  .ambient-square-shape {
    transition-duration: 240ms;
  }

  .ambient-square.is-clouding .ambient-square-shape {
    transition-duration: 150ms;
  }
}