.music-page { color: #fff; background: #020b18; }
.music-kicker { margin: 0 0 18px; color: var(--gold-light); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.music-actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 13px; }
.music-button { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gold); border-radius: 999px; color: #fff; background: rgba(3,20,45,.72); font-size: var(--text-sm); font-weight: 800; letter-spacing: .09em; line-height: 1.2; text-decoration: none; text-transform: uppercase; transition: transform .22s ease,background .22s ease,color .22s ease; }
.music-button--gold { color: #010711; background: linear-gradient(135deg,var(--gold-light),var(--gold)); }
.music-button:hover,.music-button:focus-visible { transform: translateY(-2px); color: #010711; background: var(--gold-light); }
.music-button:focus-visible,.music-player button:focus-visible,.music-player input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.music-intro { position: relative; isolation: isolate; padding: clamp(54px,6.3vw,82px) 24px; overflow: hidden; background: radial-gradient(circle at 50% -28%,rgba(221,184,86,.23),transparent 36%),radial-gradient(circle at 84% 18%,rgba(82,162,211,.2),transparent 31%),radial-gradient(circle at 12% 82%,rgba(44,111,166,.1),transparent 32%),linear-gradient(145deg,#fffdf7,#f5f9fc 58%,#eaf3f9); color: #17283b; }
.music-intro::before { content: ""; position: absolute; inset: -45% -12%; z-index: -2; background: repeating-radial-gradient(ellipse at 50% 50%,transparent 0 58px,rgba(36,93,142,.08) 59px,transparent 61px 84px); mask-image: linear-gradient(90deg,transparent 3%,#000 24%,#000 76%,transparent 97%); transform: scaleX(1.35) rotate(-3deg); animation: music-intro-waves 16s ease-in-out infinite alternate; }
.music-intro::after { content: ""; position: absolute; top: -130px; left: 50%; z-index: -1; width: min(74vw,920px); aspect-ratio: 1; border: 1px solid rgba(202,157,48,.17); border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.72) 0 4%,rgba(95,169,214,.12) 18%,transparent 51%); box-shadow: 0 0 90px rgba(63,134,181,.1),inset 0 0 80px rgba(214,174,72,.08); transform: translateX(-50%); animation: music-intro-halo 10s ease-in-out infinite; }
.music-intro__inner { position: relative; z-index: 1; width: min(100%,1040px); margin: auto; text-align: center; }
.music-intro .music-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; color: #896419; animation: music-intro-reveal .8s ease-out both; }
.music-intro .music-kicker::before,.music-intro .music-kicker::after { content: ""; width: clamp(28px,4vw,52px); height: 1px; background: linear-gradient(90deg,transparent,#c79a31); }
.music-intro .music-kicker::after { background: linear-gradient(90deg,#c79a31,transparent); }
.music-intro h2,.music-experiences h1 { margin: 0; font: 500 clamp(35px,5vw,56px)/1.08 Georgia,serif; }
.music-intro h2 { color: #123b63; background: linear-gradient(110deg,#0a2949 8%,#1b5682 46%,#0b3155 70%,#936f20 118%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(2.55rem,5.3vw,4.5rem); letter-spacing: -.025em; text-shadow: 0 18px 42px rgba(38,87,126,.13); text-wrap: balance; animation: music-intro-reveal .9s .12s ease-out both; }
.music-intro p { max-width: 860px; margin: 18px auto 0; color: #405a72; font-size: var(--text-base); line-height: 1.68; animation: music-intro-reveal .9s .24s ease-out both; }
.music-intro .music-quote { position: relative; max-width: 900px; margin-top: 24px; padding: 15px clamp(18px,4vw,34px); border-top: 1px solid rgba(183,137,37,.58); border-bottom: 1px solid rgba(183,137,37,.58); color: #173c63; background: linear-gradient(90deg,transparent,rgba(255,255,255,.64) 18%,rgba(255,255,255,.64) 82%,transparent); font-family: Georgia,serif; font-size: clamp(1.125rem,2vw,1.3125rem); line-height: 1.5; animation: music-intro-reveal .9s .38s ease-out both; }
@keyframes music-intro-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes music-intro-waves { from { opacity: .48; transform: scaleX(1.3) translateX(-1.5%) rotate(-3deg); } to { opacity: .82; transform: scaleX(1.38) translateX(1.5%) rotate(1deg); } }
@keyframes music-intro-halo { 0%,100% { opacity: .56; transform: translateX(-50%) scale(.96); } 50% { opacity: .9; transform: translateX(-50%) scale(1.035); } }
.music-experiences { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px,8vw,104px) 24px clamp(82px,9vw,124px); background: radial-gradient(ellipse at 50% 2%,rgba(105,197,240,.34),transparent 30%),radial-gradient(circle at 20% 25%,rgba(70,151,205,.18),transparent 24%),radial-gradient(circle at 12% 60%,rgba(231,198,109,.075),transparent 24%),radial-gradient(circle at 88% 48%,rgba(31,112,170,.2),transparent 28%),linear-gradient(145deg,#010711,#062345 46%,#020b18); }
.music-experiences::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .32; background-image: radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(231,198,109,.65) 0 1px,transparent 1.4px); background-position: 13px 19px,67px 83px; background-size: 127px 127px,181px 181px; mask-image: linear-gradient(180deg,#000,transparent 82%); }
.music-experiences::after { content: ""; position: absolute; top: 68px; left: -5%; z-index: -1; width: 110%; height: 190px; opacity: .16; background: repeating-linear-gradient(180deg,transparent 0 21px,rgba(178,218,241,.48) 22px,transparent 23px 29px); mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); transform: rotate(-2deg); }
.music-experiences__head { position: relative; width: min(100%,760px); margin: 0 auto clamp(42px,6vw,66px); text-align: center; }
.music-experiences__head h1 { color: #fff; letter-spacing: -.015em; text-wrap: balance; text-shadow: 0 14px 42px rgba(0,0,0,.42); }
.music-experiences__lead { max-width: 650px; margin: 22px auto 0; color: rgba(245,250,255,.9); font-size: clamp(1.125rem,1.6vw,1.25rem); line-height: 1.7; text-wrap: balance; }
.music-grid { width: min(100%,1380px); margin: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(22px,3vw,34px); }
.music-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(231,198,109,.25); border-radius: 22px; background: linear-gradient(160deg,rgba(9,37,68,.96),rgba(2,12,27,.98)); box-shadow: 0 28px 70px rgba(0,0,0,.26); }
.music-card__visual { margin: 0; overflow: hidden; display: block; background: #010711; }
.music-card__visual img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.music-card__body { flex: 1; padding: 27px; display: flex; flex-direction: column; }
.music-card__type { margin: 0 0 10px; color: var(--gold-light); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.music-card h3 { margin: 0; font: 500 29px/1.15 Georgia,serif; }
.music-card__description { min-height: 78px; margin: 16px 0 22px; color: rgba(238,246,255,.86); font-size: var(--text-base); line-height: 1.7; }
.music-player { padding: 16px; border: 1px solid rgba(231,198,109,.22); border-radius: 15px; background: rgba(1,7,17,.62); }
.music-player__track { margin: 0 0 12px; color: #f5f9ff; font-size: var(--text-sm); font-weight: 700; }
.music-player__controls { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.music-player__toggle { width: 42px; height: 42px; padding: 0; border: 1px solid var(--gold); border-radius: 50%; color: #010711; background: var(--gold); font-size: 15px; cursor: pointer; }
.music-player__toggle:disabled { color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); cursor: not-allowed; }
.music-player__timeline { min-width: 0; }
.music-player__range { --progress: 0%; width: 100%; height: 30px; margin: 0; appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.music-player__range::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(to right,var(--gold) 0 var(--progress),rgba(238,246,255,.22) var(--progress) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.music-player__range::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6.5px; -webkit-appearance: none; border: 2px solid #fff4c9; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(231,198,109,.14),0 2px 8px rgba(0,0,0,.35); }
.music-player__range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(238,246,255,.22); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.music-player__range::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--gold); }
.music-player__range::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff4c9; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(231,198,109,.14),0 2px 8px rgba(0,0,0,.35); }
.music-player__range:focus-visible { outline: 2px solid #fff4c9; outline-offset: 3px; border-radius: 8px; }
.music-player__range:disabled { cursor: not-allowed; opacity: .45; }
.music-player__time { margin-top: 6px; display: flex; justify-content: space-between; color: rgba(238,246,255,.82); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.music-player__status { margin: 11px 0 0; color: rgba(238,246,255,.82); font-size: .9375rem; line-height: 1.5; }
.music-player__sample-note { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(231,198,109,.14); color: rgba(238,246,255,.84); font-size: var(--text-sm); line-height: 1.55; }
.music-card__platform { margin-top: auto; padding-top: 18px; display: inline-flex; color: var(--gold-light); font-size: var(--text-sm); font-weight: 800; letter-spacing: .08em; line-height: 1.4; text-decoration: none; text-transform: uppercase; }
.music-card__platform:hover,.music-card__platform:focus-visible { color: #fff; }
.music-final { width: min(100%,1180px); margin: clamp(48px,6vw,76px) auto 0; padding: clamp(28px,4vw,42px); display: grid; grid-template-columns: minmax(260px,1.15fr) minmax(260px,1fr) auto; align-items: center; gap: clamp(24px,4vw,48px); border: 1px solid rgba(217,174,66,.58); border-radius: 22px; background: radial-gradient(circle at 92% 10%,rgba(92,170,219,.17),transparent 32%),linear-gradient(140deg,#fffef9,#f2f8fc); color: #17304d; box-shadow: 0 24px 62px rgba(0,5,18,.3),inset 0 1px 0 #fff; }
.music-final h2 { margin: 0; font: 500 clamp(28px,3.5vw,42px)/1.12 Georgia,serif; text-wrap: balance; }
.music-final p { max-width: 520px; margin: 0; color: #506176; line-height: 1.7; }
.music-final .music-actions { margin: 0; }
.music-final .music-button { min-height: 58px; padding: 10px 26px; gap: 10px; border: 1px solid #f2d989; border-radius: 12px; color: #07172b; background: linear-gradient(135deg,#f8e7a9 0%,#dfbd5e 48%,#b98725 100%); box-shadow: 0 8px 20px rgba(91,61,5,.2),0 0 16px rgba(231,198,109,.22),inset 0 1px 0 rgba(255,255,255,.62); font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: .09em; white-space: nowrap; transition: transform .22s ease,filter .22s ease,box-shadow .22s ease; }
.music-final .music-button span { display: inline-block; font-size: 15px; line-height: 1; transition: transform .22s ease; }
.music-final .music-button:hover { transform: translateY(-2px); color: #061426; background: linear-gradient(135deg,#fff0b9 0%,#e8c96d 48%,#c4932d 100%); filter: brightness(1.035); box-shadow: 0 12px 28px rgba(91,61,5,.27),0 0 22px rgba(231,198,109,.32),inset 0 1px 0 rgba(255,255,255,.72); }
.music-final .music-button:hover span { transform: translate(2px,-2px); }
.music-final .music-button:focus-visible { outline: 2px solid #fff2bd; outline-offset: 4px; box-shadow: 0 0 0 4px rgba(183,137,37,.3),0 10px 25px rgba(91,61,5,.24); }
.music-final .music-button:active { transform: translateY(1px) scale(.99); box-shadow: 0 5px 14px rgba(91,61,5,.22),0 0 12px rgba(231,198,109,.2); }
@media (max-width: 1100px) { .music-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .music-card__description { min-height: 0; } .music-final { grid-template-columns: 1fr 1fr; } .music-final .music-actions { grid-column: 1 / -1; } }
@media (max-width: 720px) { .music-intro { padding: 46px 18px; } .music-intro::before { inset: -20% -55%; opacity: .42; } .music-intro::after { top: -38px; width: 135vw; } .music-intro .music-kicker { gap: 9px; letter-spacing: .13em; } .music-intro .music-kicker::before,.music-intro .music-kicker::after { width: 24px; } .music-intro h2 { font-size: clamp(2.35rem,11.5vw,3.4rem); line-height: 1.02; } .music-intro p { margin-top: 16px; font-size: 1.0625rem; line-height: 1.65; } .music-intro .music-quote { margin-top: 20px; padding: 14px 8px; font-size: 1.125rem; } .music-experiences { padding: 62px 15px 76px; } .music-experiences::after { top: 50px; height: 140px; opacity: .09; } .music-experiences__head { width: min(100%,560px); margin-bottom: 38px; } .music-experiences__head h1 { font-size: clamp(2.375rem,11vw,3.25rem); } .music-experiences__lead { font-size: 1.0625rem; line-height: 1.65; } .music-grid { grid-template-columns: 1fr; width: min(100%,680px); } .music-final { grid-template-columns: 1fr; gap: 18px; padding: 28px 22px; border-radius: 18px; text-align: center; } .music-final p { margin: 0 auto; } .music-final .music-actions { grid-column: auto; display: grid; margin-top: 6px; } .music-final .music-button { width: 100%; min-height: 58px; padding: 10px 17px; font-size: var(--text-sm); letter-spacing: .08em; white-space: normal; } .music-actions { display: grid; } .music-button { width: 100%; } .music-card__body { padding: 23px 20px; } }
@media (prefers-reduced-motion:reduce) { .music-button { transition:none; } .music-intro::before,.music-intro::after,.music-intro .music-kicker,.music-intro h2,.music-intro p,.music-intro .music-quote { animation:none; } }