/* Keep the app's existing identity central; distractions stay at the edges. */
.hero-app-logo {
  display: block;
  width: clamp(12rem, 22vw, 18rem);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: .25rem;
  filter: drop-shadow(0 0 35px #9c8cf52b);
}
.hero-distractions {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  opacity: var(--distraction-opacity, 1);
}
.distraction-icon {
  position: absolute;
  display: block;
  width: clamp(3.5rem, 6.5vw, 5.75rem);
  opacity: .8;
  filter: drop-shadow(0 6px 18px #0005);
  transform:
    translate3d(calc(var(--distraction-progress, 0) * var(--drift-x, 0px)), calc(var(--distraction-rise, 0px) * var(--rise-speed, 1)), 0)
    rotate(calc(var(--icon-tilt, 0deg) + var(--distraction-progress, 0) * var(--flight-tilt, 0deg)))
    scale(var(--distraction-scale, 1));
  will-change: transform;
}
.distraction-icon img { display: block; width: 100%; height: auto; }
.distraction-icon::after {
  content: '';
  position: absolute;
  left: 3%;
  top: calc(50% - 1.5px);
  width: 94%;
  height: 3px;
  border-radius: 3px;
  background: #f292a0;
  box-shadow: 0 1px 5px #10122299;
  transform: rotate(-48deg);
}
.distraction-instagram { left: 8%; top: 28%; --icon-tilt: -10deg; --rise-speed: 1.1; --drift-x: -22px; --flight-tilt: -7deg; }
.distraction-youtube { right: 10%; top: 20%; --icon-tilt: 9deg; --rise-speed: 1.22; --drift-x: 25px; --flight-tilt: 7deg; }
.distraction-tiktok { right: 16%; bottom: 18%; --icon-tilt: -7deg; --rise-speed: .9; --drift-x: 32px; --flight-tilt: 10deg; }
.distraction-threads { left: 22%; top: 17%; --icon-tilt: 8deg; --rise-speed: 1.18; --drift-x: -28px; --flight-tilt: -8deg; }
.distraction-reddit { right: 6%; top: 50%; --icon-tilt: 11deg; --rise-speed: 1; --drift-x: 30px; --flight-tilt: 6deg; }
.distraction-snapchat { left: 16%; bottom: 16%; --icon-tilt: -12deg; --rise-speed: .82; --drift-x: -28px; --flight-tilt: -7deg; }
@media (max-width: 800px) {
  .hero-app-logo { width: 12rem; }
  .distraction-icon { width: 2.875rem; opacity: .7; }
  .distraction-instagram { left: 3%; top: 28%; }
  .distraction-youtube { right: 3%; top: 34%; }
  .distraction-tiktok { right: 4%; bottom: 22%; }
  .distraction-threads { left: auto; right: 5%; top: 16%; --drift-x: 28px; }
  .distraction-reddit { right: auto; left: 4%; top: auto; bottom: 15%; --drift-x: -30px; }
  .distraction-snapchat { left: 3%; bottom: auto; top: 51%; }
  .distraction-icon::after { height: 2px; top: calc(50% - 1px); }
}
@media (max-width: 359px) {
  .hero-app-logo { width: 10.5rem; }
  .distraction-icon { width: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-distractions { opacity: 1; }
  .distraction-icon { transform: rotate(var(--icon-tilt, 0deg)); will-change: auto; }
}
html[data-reduced-motion='true'] .hero-distractions { opacity: 1; }
html[data-reduced-motion='true'] .distraction-icon { transform: rotate(var(--icon-tilt, 0deg)); will-change: auto; }

/* Let the lake dissolve into the next section's pale canvas. */
.minimal-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: auto 0 -1px;
  height: clamp(6rem, 14svh, 10rem);
  pointer-events: none;
  background: linear-gradient(180deg,
    #f5f4f000 0%,
    #f5f4f014 18%,
    #f5f4f052 42%,
    #f5f4f0b8 68%,
    #f5f4f0ed 86%,
    #f5f4f0 100%);
}

.minimal-hero .hero-scroll,
.minimal-hero .hero-motion-control {
  z-index: 3;
  color: #37434b;
}