/*
  The interactive color blocks (originally a p5.js sketch — drag, jump-on-approach,
  hover-recolor). Migrated to plain HTML/CSS/GSAP: the only original behavior kept is
  sound-on-hover. Positions/colors/sizes are the exact Figma values (nodes 6536:4111–
  4116) at the 1920px reference, fluidly scaled the same way as the rest of the hero.
  The blocks are static on the cover (they fall into section 2's organic shapes —
  point 3); assets/js/sound-widget.js only wires up their sounds.
*/
.sound-widget {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sound-widget__block {
  position: absolute;
  border-radius: 8px;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.2s var(--ease-standard);
  /* "floating" blocks: a soft shadow underneath + a slow, always-on vertical bob.
     Uses the individual `translate` property (not `transform`) so it never fights
     any transform set on the blocks by scripts. */
  box-shadow: 0 5px 9px -2px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.45);
  animation: block-float 3.6s ease-in-out infinite;
  animation-delay: calc(var(--float-i, 0) * 0.25s); /* staggered, left to right */
}

@keyframes block-float {
  /* resting: compact, darker shadow right under the block */
  0%, 100% {
    translate: 0 0;
    box-shadow: 0 5px 9px -2px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.45);
  }
  /* raised 12px: shadow drops further, spreads and fades (more separation) */
  50% {
    translate: 0 -12px;
    box-shadow: 0 30px 38px -10px rgba(0, 0, 0, 0.26), 0 16px 22px -8px rgba(0, 0, 0, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sound-widget__block { animation: none; }
}

.sound-widget__block:hover {
  opacity: 0.5;
}

/* Positions: Figma frame 6791:179 (Rectangles 18–24, signature) at 1920px. */
.sound-widget__block--1 {
  --float-i: 5;
  left: clamp(600px, 65vw, 1248px);
  top: clamp(525px, 52.552vw, 1009px);
  width: clamp(90px, 8.698vw, 167px);
  height: clamp(50px, 5vw, 96px);
  background-color: var(--color-mint-2);
}

.sound-widget__block--2 {
  --float-i: 4;
  left: clamp(395px, 42.86vw, 823px);
  top: clamp(510px, 50.99vw, 979px);
  width: clamp(220px, 23.75vw, 456px);
  height: clamp(220px, 23.75vw, 456px);
  background-color: var(--color-green-2);
}

.sound-widget__block--3 {
  --float-i: 3;
  left: clamp(200px, 21.67vw, 416px);
  top: clamp(480px, 47.97vw, 921px);
  width: clamp(220px, 23.75vw, 456px);
  height: clamp(265px, 28.54vw, 548px);
  background-color: var(--color-pink-2);
}

.sound-widget__block--4 {
  --float-i: 2;
  left: clamp(50px, 5.42vw, 104px);
  top: clamp(432px, 43.18vw, 829px);
  width: clamp(220px, 23.75vw, 456px);
  height: clamp(220px, 23.75vw, 456px);
  background-color: var(--color-mint-2);
}

.sound-widget__block--5 {
  --float-i: 1;
  left: clamp(10px, 0.99vw, 19px);
  top: clamp(401px, 40.05vw, 769px);
  width: clamp(225px, 24.27vw, 466px);
  height: clamp(220px, 23.75vw, 456px);
  background-color: var(--color-green-2);
}

.sound-widget__block--6 {
  --float-i: 0;
  left: clamp(-262px, -13.65vw, -136px);
  top: clamp(313px, 31.30vw, 601px);
  width: clamp(220px, 23.75vw, 456px);
  height: clamp(220px, 23.75vw, 456px);
  background-color: var(--color-pink-2);
}

.sound-widget__signature {
  position: absolute;
  left: clamp(600px, 80.16vw, 1539px);
  top: clamp(515px, 51.46vw, 988px);
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-regular);
  font-size: clamp(16px, 1.3vw, 25px);
  letter-spacing: 0.03em;
}

/*
  Phones: the same overlapping, staircase composition as desktop (not a flat
  grid), scaled down from the 1920 reference coordinates. --k maps 1px of the
  desktop collage to the phone; the leftmost block still bleeds off the left edge
  like it does on desktop. Origin = block 6's top (y 3255). Tapping a block plays
  its sound (see sound-widget.js).
*/
@media (max-width: 767px) {
  .sound-widget {
    --k: calc(100vw / 1460);
    position: relative;
    inset: auto;
    height: calc(868 * var(--k));
    margin: 64px calc(-1 * var(--gutter, 20px)) 0;
  }

  .sound-widget__block { border-radius: 6px; }
  .sound-widget__block--1 { left: calc(1248 * var(--k)); top: calc(408 * var(--k)); width: calc(167 * var(--k)); height: calc(96 * var(--k)); }
  .sound-widget__block--2 { left: calc(823 * var(--k));  top: calc(378 * var(--k)); width: calc(456 * var(--k)); height: calc(456 * var(--k)); }
  .sound-widget__block--3 { left: calc(416 * var(--k));  top: calc(320 * var(--k)); width: calc(456 * var(--k)); height: calc(548 * var(--k)); }
  .sound-widget__block--4 { left: calc(104 * var(--k));  top: calc(228 * var(--k)); width: calc(456 * var(--k)); height: calc(456 * var(--k)); }
  .sound-widget__block--5 { left: calc(19 * var(--k));   top: calc(168 * var(--k)); width: calc(466 * var(--k)); height: calc(456 * var(--k)); }
  .sound-widget__block--6 { left: calc(-262 * var(--k)); top: 0;                     width: calc(456 * var(--k)); height: calc(456 * var(--k)); }

  .sound-widget__signature {
    position: static;
    margin-top: 28px;
    font-size: 0.95rem;
    text-align: right;
  }
}