/* Force text to stay neutral/white (not accent-blue) */
.page-contact{
  color: rgba(255,255,255,0.88);
}
.page-contact h1,
.page-contact h2,
.page-contact h3,
.page-contact p,
.page-contact small{
  color: inherit;
}
.page-contact a,
.page-contact a:visited{
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   OUTLXW — CONTACT (LISTEN) — SCOPED + SMOOTH CAROUSEL
   Works with: pages/contact-listen.js (pos-* + step-next/step-prev)
   Mode-safe for OUTLXW 3-mode system (body[data-mode])
   Uses: --panel, --panel2, --stroke, --text, --muted, --accent, --spot-1
   ========================================================= */

/* Scope to this page block only (won't leak to other pages) */
.page-contact .listen-block{
  margin-top: 14px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--panel2) 80%, transparent),
    color-mix(in srgb, var(--panel) 92%, transparent)
  );
  box-shadow: 0 18px 46px rgba(0,0,0,0.82);
  padding: 18px 18px 22px;
  position: relative;
  overflow: hidden;
}

/* soft glow in block */
.page-contact .listen-block::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--spot-1) 35%, transparent),
    color-mix(in srgb, var(--spot-1) 14%, transparent) 35%,
    rgba(0,0,0,0) 70%
  );
  filter: blur(22px);
  opacity: .75;
  pointer-events:none;
}

/* headings inside block */
.page-contact .contact-heading{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
.page-contact .contact-text{
  margin: 0 0 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* ===== CAROUSEL ===== */
.page-contact .listen-carousel{
  position: relative;
  height: 230px;
  display: grid;
  place-items: center;
  z-index: 2;
  user-select: none;
  touch-action: pan-y;
}

/* rail is the parent surface (items animate, rail doesn't snap) */
.page-contact .listen-rail{
  position: relative;
  width: min(900px, 100%);
  height: 210px;
}

/* item base */
.page-contact .listen-item{
  position: absolute;
  top: 12px;
  left: 50%;
  width: 170px;
  height: 170px;
  border-radius: 28px;

  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  box-shadow: 0 16px 34px rgba(0,0,0,0.45);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-decoration: none;
  cursor: pointer;

  transform: translateX(-50%);
  opacity: .18;

  transition:
    transform 260ms ease,
    opacity 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease,
    background 260ms ease;
}

/* subtle inner sheen */
.page-contact .listen-item::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at top,
    color-mix(in srgb, var(--text) 10%, transparent),
    rgba(0,0,0,0) 60%
  );
  opacity: 0.65;
  pointer-events:none;
}

/* positions (5 slots) */
.page-contact .listen-item.pos-farleft{
  transform: translateX(calc(-50% - 360px)) scale(0.86);
  opacity: 0.08;
}
.page-contact .listen-item.pos-left{
  transform: translateX(calc(-50% - 210px)) scale(0.92);
  opacity: 0.22;
}
.page-contact .listen-item.pos-center{
  transform: translateX(-50%) scale(1.05);
  opacity: 1;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--panel2) 78%, transparent);
  box-shadow:
    0 26px 60px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.page-contact .listen-item.pos-right{
  transform: translateX(calc(-50% + 210px)) scale(0.92);
  opacity: 0.22;
}
.page-contact .listen-item.pos-farright{
  transform: translateX(calc(-50% + 360px)) scale(0.86);
  opacity: 0.08;
}

/* Smooth slot movement (no rail snap-back) */
.page-contact .listen-rail.is-animating .listen-item{
  transition:
    transform 420ms cubic-bezier(.22,.9,.22,1),
    opacity 420ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

/* step-next: everything moves LEFT one slot visually */
.page-contact .listen-item.step-next.pos-farleft{
  transform: translateX(calc(-50% - 210px)) scale(0.92);
  opacity: 0.22;
}
.page-contact .listen-item.step-next.pos-left{
  transform: translateX(-50%) scale(1.05);
  opacity: 1;
}
.page-contact .listen-item.step-next.pos-center{
  transform: translateX(calc(-50% + 210px)) scale(0.92);
  opacity: 0.22;
}
.page-contact .listen-item.step-next.pos-right{
  transform: translateX(calc(-50% + 360px)) scale(0.86);
  opacity: 0.08;
}
.page-contact .listen-item.step-next.pos-farright{
  transform: translateX(calc(-50% + 520px)) scale(0.82);
  opacity: 0;
  pointer-events: none;
}

/* step-prev: everything moves RIGHT one slot visually */
.page-contact .listen-item.step-prev.pos-farright{
  transform: translateX(calc(-50% + 210px)) scale(0.92);
  opacity: 0.22;
}
.page-contact .listen-item.step-prev.pos-right{
  transform: translateX(-50%) scale(1.05);
  opacity: 1;
}
.page-contact .listen-item.step-prev.pos-center{
  transform: translateX(calc(-50% - 210px)) scale(0.92);
  opacity: 0.22;
}
.page-contact .listen-item.step-prev.pos-left{
  transform: translateX(calc(-50% - 360px)) scale(0.86);
  opacity: 0.08;
}
.page-contact .listen-item.step-prev.pos-farleft{
  transform: translateX(calc(-50% - 520px)) scale(0.82);
  opacity: 0;
  pointer-events: none;
}

/* Glow on hover */
.page-contact .listen-item:hover{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 26px 70px rgba(0,0,0,0.70),
    0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}
.page-contact .listen-item.pos-center:hover{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 34px 85px rgba(0,0,0,0.74),
    0 0 28px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ICON + LABEL */
.page-contact .listen-bubble{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 90%, transparent);
  opacity: .92;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--stroke) 70%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.page-contact .listen-item:hover .listen-bubble{
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) 16%, transparent);
  opacity: 1;
}

.page-contact .listen-label{
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* CONTROLS */
.page-contact .listen-controls{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  z-index: 2;
  position: relative;
}

.page-contact .listen-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding: 12px 18px;
  min-width: 112px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);

  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;

  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.page-contact .listen-nav:hover{
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40), 0 0 22px var(--glow);
  transform: translateY(-1px);
}

/* MOBILE */
@media (max-width: 900px){
  .page-contact .listen-item{
    width: 155px;
    height: 155px;
    border-radius: 24px;
  }
  .page-contact .listen-item.pos-left{ transform: translateX(calc(-50% - 185px)) scale(0.92); }
  .page-contact .listen-item.pos-right{ transform: translateX(calc(-50% + 185px)) scale(0.92); }
  .page-contact .listen-item.pos-farleft{ transform: translateX(calc(-50% - 320px)) scale(0.86); }
  .page-contact .listen-item.pos-farright{ transform: translateX(calc(-50% + 320px)) scale(0.86); }

  .page-contact .listen-item.step-next.pos-farleft{ transform: translateX(-50%) scale(1.05); opacity: 1; }
  .page-contact .listen-item.step-next.pos-left{ transform: translateX(calc(-50% + 185px)) scale(0.92); opacity: 0.22; }
  .page-contact .listen-item.step-next.pos-center{ transform: translateX(calc(-50% + 320px)) scale(0.86); opacity: 0.08; }
  .page-contact .listen-item.step-next.pos-right{ transform: translateX(calc(-50% + 450px)) scale(0.82); opacity: 0; pointer-events:none; }
  .page-contact .listen-item.step-next.pos-farright{ transform: translateX(calc(-50% + 520px)) scale(0.82); opacity: 0; pointer-events:none; }

  .page-contact .listen-item.step-prev.pos-farright{ transform: translateX(-50%) scale(1.05); opacity: 1; }
  .page-contact .listen-item.step-prev.pos-right{ transform: translateX(calc(-50% - 185px)) scale(0.92); opacity: 0.22; }
  .page-contact .listen-item.step-prev.pos-center{ transform: translateX(calc(-50% - 320px)) scale(0.86); opacity: 0.08; }
  .page-contact .listen-item.step-prev.pos-left{ transform: translateX(calc(-50% - 450px)) scale(0.82); opacity: 0; pointer-events:none; }
  .page-contact .listen-item.step-prev.pos-farleft{ transform: translateX(calc(-50% - 520px)) scale(0.82); opacity: 0; pointer-events:none; }
}

@media (max-width: 640px){
  .page-contact .listen-carousel{ height: 220px; }
  .page-contact .listen-rail{ height: 200px; }

  .page-contact .listen-item{
    width: 145px;
    height: 145px;
  }

  .page-contact .listen-item.pos-left{ transform: translateX(calc(-50% - 165px)) scale(0.90); opacity: .18; }
  .page-contact .listen-item.pos-right{ transform: translateX(calc(-50% + 165px)) scale(0.90); opacity: .18; }
  .page-contact .listen-item.pos-farleft,
  .page-contact .listen-item.pos-farright{ opacity: 0; pointer-events:none; }
}

/* =========================================================
   mp logos inside bubbles (png)
   - bubble shows background image centered + contained
   ========================================================= */

.page-contact .listen-bubble{
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 72% 72%;
}


.page-contact .listen-nav:active{ transform: translateY(0px) scale(.99); }