/* DALCOM MUSIC — interaction polish v2 */

/* Prevent the whole application from replaying the entrance animation on every render. */
.shell {
  opacity: 1 !important;
  animation: none !important;
}

/* HERO PLAYBACK VISUAL */
.hero-orbit {
  width: 220px !important;
  height: 220px !important;
  right: 56px !important;
  display: grid;
  place-items: center;
  isolation: isolate;
  border: 0 !important;
}

.hero-orbit::before,
.hero-orbit::after {
  content: none !important;
}

.hero-ring,
.hero-core,
.hero-wave-extra {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero-ring {
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-ring.ring-1 { inset: 0; border-color: rgba(var(--accent-rgb), .2); }
.hero-ring.ring-2 { inset: 32px; border-color: var(--line); }
.hero-ring.ring-3 { inset: 65px; border-color: rgba(255,255,255,.07); }

.hero-core {
  width: 76px;
  height: 76px;
  z-index: 3;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:
    0 0 0 12px rgba(var(--accent-rgb), .055),
    0 0 44px rgba(var(--accent-rgb), .3),
    0 0 92px rgba(var(--accent-rgb), .15);
}

.hero-wave-extra {
  width: 76px;
  height: 76px;
  z-index: 2;
  border: 1.5px solid rgba(var(--accent-rgb), .55);
  opacity: 0;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .12);
}

.hero-orbit.is-playing .hero-wave-extra {
  animation: dalcomWave 2.65s cubic-bezier(.16,.8,.2,1) infinite;
}
.hero-orbit.is-playing .wave-b { animation-delay: .88s; }
.hero-orbit.is-playing .wave-c { animation-delay: 1.76s; }
.hero-orbit.is-playing .hero-core {
  animation: dalcomCore 1.75s ease-in-out infinite;
}

@keyframes dalcomWave {
  0% { transform: scale(.9); opacity: 0; }
  12% { opacity: .78; }
  100% { transform: scale(2.7); opacity: 0; }
}

@keyframes dalcomCore {
  0%,100% { transform: scale(1); filter: saturate(100%); }
  50% { transform: scale(1.075); filter: saturate(118%); }
}

/* PLAYER — BIGGER, CLEARER, MORE PREMIUM */
.shell {
  grid-template-rows: minmax(0, 1fr) 120px !important;
}

.player {
  grid-template-columns: minmax(260px,1fr) minmax(520px,1.45fr) minmax(260px,1fr) !important;
  padding: 14px 24px !important;
}

.player-center {
  gap: 12px !important;
}

.transport {
  width: max-content;
  margin: 0 auto;
  gap: 14px !important;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 14px 34px rgba(0,0,0,.16);
}

.transport-btn {
  width: 46px !important;
  height: 46px !important;
  border: 1px solid transparent !important;
  background: rgba(255,255,255,.035) !important;
  color: var(--muted) !important;
  font-size: 19px !important;
  transition: transform 170ms ease, background 170ms ease, color 170ms ease, border-color 170ms ease, box-shadow 170ms ease !important;
}
.transport-btn:hover {
  color: var(--text) !important;
  background: var(--surface-hover) !important;
  border-color: rgba(var(--accent-rgb), .2) !important;
  transform: translateY(-1px) scale(1.04);
}
.transport-btn.on {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb), .28) !important;
  background: rgba(var(--accent-rgb), .12) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .07);
}

.play-main {
  width: 66px !important;
  height: 66px !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #09090d !important;
  font-size: 22px !important;
  box-shadow: 0 15px 38px rgba(var(--accent-rgb), .34), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.play-main:hover {
  transform: scale(1.075) !important;
  box-shadow: 0 19px 46px rgba(var(--accent-rgb), .42), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.timeline {
  grid-template-columns: 48px 1fr 48px !important;
  gap: 12px !important;
  font-size: 12px !important;
}
.range {
  height: 6px !important;
}
.range::-webkit-slider-thumb {
  width: 15px !important;
  height: 15px !important;
  opacity: .92 !important;
}

.player-right {
  width: max-content;
  justify-self: end;
  padding: 9px 14px 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.volume { width: 138px !important; }

@media (max-width: 1080px) {
  .hero-orbit { right: 18px !important; transform: translateY(-50%) scale(.82) !important; }
  .player { grid-template-columns: minmax(220px,1fr) minmax(420px,1.3fr) 220px !important; }
}

@media (max-width: 820px) {
  .shell { grid-template-rows: auto 1fr 96px !important; }
  .hero-orbit { display: none !important; }
  .player { grid-template-columns: 1fr auto !important; padding: 10px 14px !important; }
  .mobile-play {
    width: 54px !important;
    height: 54px !important;
    display: grid !important;
    background: linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
    color: #09090d !important;
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), .3);
  }
}