/* Original SCHOOL DJs sound sculpture: scroll, sound and space. */
.hero-discover { display: inline-flex; align-items: center; gap: 24px; margin-top: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); font-size: .9rem; color: var(--bone); text-decoration: none; }
.hero-discover span { color: var(--signal); font-size: 1.5rem; }
.gate { isolation: isolate; }
.gate-halo { position: absolute; inset: 0; display: grid; place-items: center; z-index: -1; overflow: hidden; pointer-events: none; opacity: .6; }
.gate-halo i { position: absolute; width: min(85vw,900px); aspect-ratio: 1; border: 1px solid rgba(255,46,136,.4); border-radius: 50%; box-shadow: inset 0 0 40px rgba(255,46,136,.04), 0 0 36px rgba(255,46,136,.06); transform: rotateX(58deg) rotateZ(-25deg); animation: gate-orbit 24s linear infinite; }
.gate-halo i:nth-child(2) { width: min(110vw,1200px); animation-direction: reverse; animation-delay: -8s; }
.gate-halo i:nth-child(3) { width: min(130vw,1400px); animation-delay: -16s; opacity: .5; }
@keyframes gate-orbit { to { transform: rotateX(58deg) rotateZ(335deg) rotateY(30deg); } }
.sound-journey { background: #0b0910; border-block: 1px solid rgba(255,110,166,.2); scroll-margin-top: var(--hud-h); }
.sound-pin { position: relative; isolation: isolate; padding: 40px var(--gutter) 70px; overflow: hidden; }
.sound-visual { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 30% 48%,#28101f,transparent 56%); }
.sound-visual canvas { display: block; width: 100%; height: 100%; }
.sound-orbit { position: absolute; left: 9%; top: 20%; width: 42%; aspect-ratio: 1; border: 1px solid rgba(255,104,168,.16); border-radius: 50%; transform: rotate(-25deg) scaleY(.48); }
.sound-topline { display: flex; justify-content: space-between; gap: 16px; color: #c9becb; font-size: .64rem; }
.sound-panels { position: relative; }
.sound-panel { padding-block: 40px; max-width: 590px; }
.sound-kicker { display: flex; align-items: center; gap: 18px; font-size: .9rem; color: #d5becd; margin-bottom: 26px; }
.sound-kicker .mono { color: #ff7cb0; white-space: nowrap; }
.sound-panel h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(4rem,7.5vw,8.6rem); line-height: .95; letter-spacing: -.01em; margin-bottom: 26px; }
.sound-panel h2 em { color: var(--signal); font-style: normal; }
.sound-body { max-width: 34ch; color: #d1c9d5; font-size: clamp(1rem,1.3vw,1.15rem); line-height: 1.8; }
.sound-link { display: inline-flex; gap: 28px; align-items: center; padding-block: 10px; margin-top: 18px; text-decoration: none; border-bottom: 1px solid var(--signal); font-weight: 500; }
.sound-link span { font-size: 1.7rem; color: var(--signal); transition: transform .3s; }
.sound-link:hover span { transform: translate(-5px,-5px); }
.sound-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.sound-hint { font-size: .87rem; color: #c9becb; }
.sound-hint span { margin-right: 12px; color: var(--signal); }
.sound-skip { font-size: .87rem; text-underline-offset: 5px; }
.sound-progress { display: flex; direction: ltr; gap: 7px; width: 135px; }
.sound-progress i { height: 2px; background: #635160; flex: 1; }
.sound-progress i.is-active { background: var(--signal); box-shadow: 0 0 10px rgba(255,46,136,.5); }
.sound-journey.is-enhanced { height: 270svh; }
.is-enhanced .sound-pin { position: sticky; top: var(--hud-h); height: calc(100svh - var(--hud-h)); min-height: 550px; display: flex; flex-direction: column; justify-content: space-between; }
.is-enhanced .sound-panels { margin-right: 0; width: 43%; margin-block: auto; display: grid; }
.is-enhanced .sound-panel { grid-area: 1/1; opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity .55s,transform .7s var(--ease),visibility .55s; pointer-events: none; padding-block: 30px; }
.is-enhanced .sound-panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nt-enter { order: 4; display: flex; align-items: center; gap: 18px; color: var(--ground); background: var(--signal); border-radius: 99px; padding: 4px 18px 4px 5px; font-size: .9rem; font-weight: 600; margin-top: 20px; }
.nt-enter b { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(12,11,16,.4); border-radius: 50%; font-size: 1.5rem; font-weight: 400; }
.next-track:hover .nt-enter { color: var(--ground); }
.next-track:hover .nt-enter { background: var(--bone); }
.next-track:hover .nt-enter b { border-color: var(--ground); }
@media (max-width: 760px) {
  .menu-list a { grid-template-columns: 25px 1fr; gap: 3px 10px; }
  .menu-list .menu-num { grid-row: 1 / 3; align-self: start; padding-top: 7px; }
  .menu-copy { grid-column: 2; }
  .menu-go { grid-column: 2; font-size: .75rem; gap: 9px; margin-top: 5px; text-decoration: underline; text-underline-offset: 4px; }
  .menu-go b { font-size: 1.35rem; }
  .nt-enter { font-size: .8rem; gap: 10px; }
  .sound-journey.is-enhanced { height: 280svh; }
  .is-enhanced .sound-pin { min-height: 0; padding: 18px 20px 22px; }
  .sound-topline { font-size: .53rem; letter-spacing: .07em; }
  .sound-topline span:last-child { display: none; }
  .is-enhanced .sound-panels { width: 100%; margin-top: auto; margin-bottom: 20px; }
  .is-enhanced .sound-panel { padding-block: 8px; }
  .sound-panel h2 { font-size: clamp(3.2rem,12vw,4.5rem); margin-bottom: 13px; }
  .sound-kicker { font-size: .74rem; gap: 12px; margin-bottom: 12px; }
  .sound-kicker .mono { font-size: .58rem; }
  .sound-body { font-size: .92rem; line-height: 1.65; max-width: 38ch; }
  .sound-link { font-size: .88rem; margin-top: 8px; padding-block: 5px; }
  .sound-visual { background: radial-gradient(ellipse at 50% 27%,#28101f,transparent 57%); }
  .sound-orbit { width: 70%; left: 15%; top: 10%; }
  .sound-bottom { gap: 10px; padding-top: 12px; flex-wrap: wrap; }
  .sound-hint { font-size: .72rem; }
  .sound-skip { font-size: .72rem; }
  .sound-progress { width: 60px; margin-right: auto; }
  .sound-skip { flex-basis: 100%; }
  .hero-discover { font-size: .85rem; }
  .gate-halo { opacity: .38; }
  body.in-sound-journey .bot-tip { display: none; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .sound-panel h2 { font-size: 3rem; }
  .sound-body { font-size: .82rem; }
  .sound-kicker { margin-bottom: 8px; }
  .sound-bottom { padding-top: 8px; }
  .is-enhanced .sound-panels { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gate-halo i { animation: none; }
  .sound-panel { transition: none; }
  .sound-visual { opacity: .35; }
  .sound-hint, .sound-progress { display: none; }
}