/* ==========================================================================
   Music page — follows the original Squarespace layout:
   banner → music videos → record room → collaborate → connect
   ========================================================================== */

:root { --crimson: #8d0d22; }

.m-section { position: relative; text-align: center; padding: clamp(80px, 10vw, 130px) 0; }
.m-section h2 { font-family: var(--body); font-weight: 700; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.1; }
.m-section .lede { font-size: clamp(16px, 1.4vw, 19px); max-width: 52ch; margin: 22px auto 0; opacity: .9; }
.m-section .emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-weight: 400; margin-right: .2em; }

/* Grain overlay used on the banner and the record room */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(2%, 2%); } }

/* ---------- Banner ---------- */
.m-banner {
  position: relative; min-height: 78svh; display: grid; place-items: center; text-align: center; overflow: hidden;
  padding: 140px var(--gutter) 140px; background: var(--ink);
}
.m-banner__bg { position: absolute; inset: -6%; background: url("/assets/img/web-bg.webp") center/cover; filter: blur(3px) brightness(.62); transform: translateY(calc(var(--py, 0) * 1px)) scale(1.08); }
.m-banner__inner { position: relative; z-index: 2; }
.m-banner h1 { font-size: clamp(64px, 12vw, 180px); text-shadow: 0 0 30px rgba(0,0,0,.35); }
.m-banner p { font-size: clamp(17px, 1.6vw, 21px); max-width: 46ch; margin: 18px auto 0; }
.m-banner p em { color: #ff6b6b; font-weight: 700; }
.m-banner .wave { position: absolute; left: 0; bottom: -1px; z-index: 3; }

/* ---------- Videos ---------- */
.m-videos { background: #000; }
.m-videos .frame {
  position: relative; aspect-ratio: 16/9; width: min(1080px, 100%); margin: 48px auto 0; border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 120px rgba(141,13,34,.35);
}
.m-videos iframe, .m-videos .poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-videos .poster { display: grid; place-items: center; cursor: pointer; background: #000 center/cover; padding: 0; }
.m-videos .poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 50%); }
.m-videos .poster span {
  position: relative; z-index: 1; width: 92px; height: 64px; border-radius: 18px; background: #e00; display: grid; place-items: center;
  transition: transform .4s var(--ease-out); box-shadow: 0 10px 40px rgba(230,0,0,.45);
}
.m-videos .poster span::before { content: ""; border-left: 24px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.m-videos .poster:hover span { transform: scale(1.12); }
.m-videos .poster b { position: absolute; z-index: 1; left: 22px; bottom: 18px; font-family: var(--body); font-size: clamp(14px, 1.6vw, 20px); text-align: left; color: #fff; }

.m-tilt { margin-top: -1px; display: block; width: 100%; height: clamp(30px, 5vw, 70px); }

/* ---------- Record room ---------- */
.m-listen { background: var(--crimson); padding: 0; overflow: hidden; }
.m-listen h2 { color: var(--cream); text-shadow: 0 0 2px #fff, 0 0 18px rgba(255,255,255,.35); font-family: var(--serif); font-weight: 400; }
.room-wrap { position: relative; width: 100%; }
#room { width: 100%; height: min(925px, 118vw); }
.room-hint { position: absolute; left: 50%; top: 40%; translate: -50% -50%; font-family: var(--serif); color: var(--cream); opacity: .8; transition: opacity .6s; pointer-events: none; }
.room-hint.gone { opacity: 0; }
.room-hint::before { content: ""; display: block; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--cream); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Collaborate ---------- */
.m-collab { background: var(--cream); color: var(--ink); }
.m-collab h2 { color: var(--crimson); }
.m-collab .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3.5vw, 56px); margin-top: 56px; text-align: center; }
.card__media { aspect-ratio: 1.1; overflow: hidden; background: #ddd; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); animation: kenburns 14s ease-in-out infinite alternate; }
.card:hover .card__media img { transform: scale(1.06); }
@keyframes kenburns { from { object-position: 50% 30%; } to { object-position: 50% 60%; } }
.card__media--beats { background: #1a0006; display: grid; place-items: center; }
.card__media--beats .bars { position: absolute; inset: auto 6% 22% 6%; height: 34%; display: flex; align-items: end; gap: 3px; }
.card__media--beats .bars i { flex: 1; background: #c66; height: calc(var(--h) * 1%); animation: eq 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1s); transform-origin: bottom; }
@keyframes eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.card__media--beats strong { position: absolute; top: 18%; font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(22px, 2.4vw, 32px); }
.card__media--beats small { position: absolute; top: 33%; letter-spacing: .3em; font-size: 11px; color: #f6b; text-transform: uppercase; }
.card h3 { font-family: var(--body); font-weight: 700; color: var(--crimson); font-size: clamp(22px, 2.2vw, 30px); margin: 28px 0 18px; }
.card p { font-size: 16.5px; line-height: 1.55; }
.card .btn-outline {
  display: inline-block; margin-top: 18px; padding: 16px 30px; min-width: 70%; border: 1.5px solid var(--ink); border-radius: 6px;
  font-family: var(--body); font-weight: 700; font-size: 16px; text-decoration: none; transition: background .3s, color .3s, transform .4s var(--ease-out);
}
.card .btn-outline:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; transform: translateY(-3px); }
.card .btn-outline[aria-disabled="true"] { pointer-events: none; opacity: .6; }
@media (max-width: 860px) { .m-collab .cards { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- Connect ---------- */
.m-connect { overflow: hidden; color: #fff; padding: clamp(120px, 14vw, 200px) 0; }
.m-connect__bg { position: absolute; inset: -60px; background: url("/assets/img/headshot-2.webp") center/cover; filter: blur(36px) saturate(1.2) brightness(.8); animation: drift 18s ease-in-out infinite alternate; }
.m-connect .wrap { position: relative; }
.m-connect .sparkles img { position: absolute; width: 60px; pointer-events: none; }
.m-connect .btn-outline {
  display: block; width: min(800px, 100%); margin: 40px auto 0; padding: 22px; border: 1.5px solid rgba(255,255,255,.8); border-radius: 6px;
  font-family: var(--body); font-weight: 700; font-size: 18px; text-decoration: none; transition: background .3s, color .3s;
}
.m-connect .btn-outline:hover { background: #fff; color: var(--crimson); }
.m-connect .wave-top { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(30px, 4vw, 60px); z-index: 2; }

/* ---------- Spanish Moss release page ---------- */
.release { min-height: 100svh; position: relative; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; overflow: hidden; }
.release__bg { position: absolute; inset: 0; background: url("/assets/img/spanish-moss.webp") center/cover; animation: drift 24s ease-in-out infinite alternate; }
.release__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,.85)); }
@keyframes drift { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.18) translate(-2%, 2%); } }
.release__inner { position: relative; }
.release__logo { width: min(640px, 90vw); margin: 0 auto 30px; mix-blend-mode: screen; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* phones: the 3D title gets cropped, so show the heading and blurb as page text above the room instead */
.m-listen.is-compact { padding-top: 70px; }
.m-listen.is-compact .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.m-listen.is-compact h2.sr-only { display: block; padding: 0 16px; color: #f3ede3; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 8.6vw, 40px); text-shadow: 0 0 2px #fff, 0 0 16px rgba(255,255,255,.3); }
.m-listen.is-compact p.sr-only { display: block; padding: 0 20px; margin: 14px auto 0; max-width: 40ch; font-size: 15.5px; color: #f3ede3; opacity: .92; }
.m-listen.is-compact #room { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 110px); mask-image: linear-gradient(to bottom, transparent 0, #000 110px); }
.card__media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.card:hover .card__media video { transform: scale(1.04); }