/* Decorative music echoes remain on the existing plane behind the portrait.
   The scene controller owns this parent's opacity and camera transform. */
.scene-intro .hero-echoes {
  z-index: 0;
  filter: none;
  pointer-events: none;
}

.scene-intro .hero-echoes > span {
  --echo-tilt: -8deg;
  --echo-blur: 1.1px;
  --echo-opacity: .8;
  --echo-duration: 17s;
  --echo-delay: -4s;
  --progress: 42%;
  position: absolute;
  left: 38%;
  top: 18%;
  width: clamp(164px, 16vw, 255px);
  min-height: 124px;
  padding: 18px 20px 14px;
  border: 1px solid rgba(201, 139, 115, .24);
  border-radius: 11px;
  background: linear-gradient(138deg, rgba(104, 50, 46, .17), rgba(37, 22, 24, .17) 54%, rgba(83, 41, 32, .11));
  box-shadow: inset 0 1px 0 rgba(244, 205, 181, .07), 0 5px 24px rgba(0, 0, 0, .12);
  color: #e9d9cd;
  font: 500 clamp(17px, 1.36vw, 23px)/1.17 Manrope, Arial, sans-serif;
  letter-spacing: -.018em;
  opacity: var(--echo-opacity);
  filter: blur(var(--echo-blur));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transform: rotate(var(--echo-tilt));
  transform-origin: center;
  animation: hero-echo-drift var(--echo-duration) ease-in-out var(--echo-delay) infinite alternate;
  will-change: transform;
  pointer-events: none;
}

.scene-intro .hero-echoes > span::after {content: none; display: none;}

.scene-intro .hero-echoes > span > small {
  display: block;
  margin-top: 6px;
  font-size: clamp(10px, .89vw, 14px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: .005em;
  color: #d2b6ab;
  opacity: .8;
}

.scene-intro .hero-echoes .hero-echo-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 23px;
  margin-top: 28px;
  color: #dac8ba;
  font-style: normal;
  opacity: .67;
}

.scene-intro .hero-echoes .hero-echo-controls::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, #b15f50 0, #d29a73 var(--progress), rgba(235, 210, 197, .21) var(--progress));
}

.scene-intro .hero-echoes .hero-echo-controls::after {
  content: '';
  position: absolute;
  top: -13px;
  left: calc(var(--progress) - 1px);
  width: 3px;
  height: 3px;
  background: #ddac8a;
  border-radius: 50%;
}

.scene-intro .hero-echoes .hero-echo-controls > b {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  font-weight: 400;
}

.scene-intro .hero-echoes .hero-echo-controls > b:first-child::before,
.scene-intro .hero-echoes .hero-echo-controls > b:last-child::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 8px;
  left: 3px;
  top: 2px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

.scene-intro .hero-echoes .hero-echo-controls > b:last-child::before {
  left: 1px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.scene-intro .hero-echoes .hero-echo-controls > b:first-child::after,
.scene-intro .hero-echoes .hero-echo-controls > b:last-child::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 2px;
  width: 1px;
  height: 8px;
  background: currentColor;
}

.scene-intro .hero-echoes .hero-echo-controls > b:last-child::after {left: 10px;}

.scene-intro .hero-echoes .hero-echo-controls > b:nth-child(2) {
  width: 23px;
  height: 23px;
  border: 1px solid rgba(226, 202, 186, .17);
  border-radius: 50%;
  background: rgba(238, 219, 202, .035);
}

.scene-intro .hero-echoes .hero-echo-controls > b:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 7px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}

/* Keep the copy's 8–36% column clear. Partial silhouette occlusion provides
   depth, while the upper and lateral openings retain recognisable labels. */
.scene-intro .hero-echoes > span:nth-child(1) {
  left: 33%; top: 13%; width: clamp(178px, 18vw, 285px);
  --echo-tilt: -13deg; --echo-blur: .9px; --echo-opacity: .86; --echo-duration: 18s; --echo-delay: -7s;
}
.scene-intro .hero-echoes > span:nth-child(2) {
  left: 71%; top: 10%; width: clamp(160px, 15vw, 235px);
  --echo-tilt: 7deg; --echo-blur: 1.8px; --echo-opacity: .63; --echo-duration: 22s; --echo-delay: -12s;
}
.scene-intro .hero-echoes > span:nth-child(3) {
  left: 85%; top: 24%; width: clamp(180px, 18vw, 280px);
  --echo-tilt: -11deg; --echo-blur: 1.05px; --echo-opacity: .83; --echo-duration: 19s; --echo-delay: -3s;
}
.scene-intro .hero-echoes > span:nth-child(4) {
  left: 39%; top: 36%; width: clamp(159px, 15vw, 230px);
  --echo-tilt: 8deg; --echo-blur: 1.45px; --echo-opacity: .76; --echo-duration: 23s; --echo-delay: -16s;
}
.scene-intro .hero-echoes > span:nth-child(5) {
  left: 40%; top: 56%; width: clamp(170px, 16.5vw, 255px);
  --echo-tilt: -9deg; --echo-blur: 1.2px; --echo-opacity: .77; --echo-duration: 20s; --echo-delay: -10s;
}
.scene-intro .hero-echoes > span:nth-child(6) {
  left: 85%; top: 47%; width: clamp(183px, 18vw, 280px);
  --echo-tilt: -8deg; --echo-blur: 1.3px; --echo-opacity: .76; --echo-duration: 24s; --echo-delay: -9s;
}
.scene-intro .hero-echoes > span:nth-child(7) {
  left: 89%; top: 65%; width: clamp(174px, 16vw, 250px);
  --echo-tilt: 8deg; --echo-blur: 1.65px; --echo-opacity: .62; --echo-duration: 21s; --echo-delay: -13s;
}
.scene-intro .hero-echoes > span:nth-child(8) {
  left: 35%; top: 82%; width: clamp(175px, 17vw, 260px);
  --echo-tilt: 9deg; --echo-blur: 1.55px; --echo-opacity: .68; --echo-duration: 25s; --echo-delay: -19s;
}

@keyframes hero-echo-drift {
  from {transform: translate3d(-1px, -5px, 0) rotate(var(--echo-tilt));}
  to {transform: translate3d(2px, 5px, 0) rotate(var(--echo-tilt));}
}

@media (max-width: 1050px) and (min-width: 761px) {
  .scene-intro .hero-echoes > span {padding: 14px 15px 12px; min-height: 110px; font-size: 17px;}
  .scene-intro .hero-echoes > span > small {font-size: 11px;}
  .scene-intro .hero-echoes > span:nth-child(4) {left: 41%;}
  .scene-intro .hero-echoes > span:nth-child(5) {left: 43%;}
  .scene-intro .hero-echoes > span:nth-child(8) {left: 38%;}
}

@media (max-width: 760px) {
  .scene-intro .hero-echoes {filter: none;}
  .scene-intro .hero-echoes > span {
    padding: 13px 15px 11px;
    min-height: 105px;
    border-radius: 9px;
    font-size: 15px;
    --echo-opacity: .88;
    --echo-blur: 1.05px;
  }
  .scene-intro .hero-echoes > span > small {font-size: 10px; margin-top: 5px;}
  .scene-intro .hero-echoes .hero-echo-controls {margin-top: 24px; gap: 14px; height: 19px;}
  .scene-intro .hero-echoes .hero-echo-controls > b:nth-child(2) {width: 20px; height: 20px;}
  .scene-intro .hero-echoes .hero-echo-controls > b:nth-child(2)::before {left: 7px; top: 5px;}
  .scene-intro .hero-echoes > span:nth-child(1) {left: -16%; top: 19%; width: 151px; --echo-tilt: -11deg;}
  .scene-intro .hero-echoes > span:nth-child(2) {left: 73%; top: 18%; width: 147px; --echo-tilt: 8deg;}
  .scene-intro .hero-echoes > span:nth-child(3) {left: 79%; top: 31%; width: 153px; --echo-tilt: -7deg;}
  .scene-intro .hero-echoes > span:nth-child(4) {left: -15%; top: 33%; width: 145px; --echo-tilt: 7deg;}
  .scene-intro .hero-echoes > span:nth-child(7) {left: 86%; top: 42%; width: 140px; --echo-tilt: 9deg;}
  .scene-intro .hero-echoes > span:nth-child(5),
  .scene-intro .hero-echoes > span:nth-child(6),
  .scene-intro .hero-echoes > span:nth-child(8) {display: none;}
}

@media (prefers-reduced-motion: reduce) {
  .scene-intro .hero-echoes > span {animation: none; will-change: auto;}
}