/* =================================================================
   Ephesus Audio Connector — Player Styles
   --------------------------------------------------------------
   Single source of truth for all on-page audio across the EGW
   site. Honours the theme's existing CSS custom properties
   (--color-text, --color-bg, --color-primary, etc.) when present
   and provides safe fallbacks when used outside the theme.
   ================================================================= */

.eac-player {
  --eac-accent: #FFF1D3;
  --eac-bg:        var(--color-background-primary, #0d1015);
  --eac-bg-alt:    var(--color-background-secondary, #161a22);
  --eac-text:      var(--color-text-primary, #f5f6f8);
  --eac-muted:     var(--color-text-secondary, rgba(255,255,255,0.62));
  --eac-line:      var(--color-border-tertiary, rgba(255,255,255,0.10));
  --eac-radius:    var(--border-radius-lg, 18px);
  --eac-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 24px 48px -16px rgba(0,0,0,0.55),
    0 6px 16px -8px rgba(0,0,0,0.4);

  position: relative;
  margin: clamp(16px, 3vw, 28px) 0;
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  color: var(--eac-text);
  border-radius: var(--eac-radius);
  overflow: hidden;
  box-shadow: var(--eac-shadow);
  isolation: isolate;
}

/* ---- Theme variants ---- */
.eac-player.eac-theme-dark { --eac-bg:#0d1015; --eac-bg-alt:#161a22; --eac-text:#f5f6f8; --eac-muted:rgba(255,255,255,0.62); --eac-line:rgba(255,255,255,0.10);}
.eac-player.eac-theme-light{ --eac-bg:#fbfaf6; --eac-bg-alt:#fff7e7; --eac-text:#101216; --eac-muted:rgba(16,18,22,0.6);   --eac-line:rgba(16,18,22,0.10); }
@media (prefers-color-scheme: light){ .eac-player.eac-theme-auto{ --eac-bg:#fbfaf6; --eac-bg-alt:#fff7e7; --eac-text:#101216; --eac-muted:rgba(16,18,22,0.6); --eac-line:rgba(16,18,22,0.10);} }

/* ---- Stage ---- */
.eac-stage {
  position: relative;
  background: var(--eac-bg);
  padding: clamp(20px, 3vw, 32px);
  min-height: 280px;
}
.eac-bg, .eac-bg-veil {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.eac-bg {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(46px) saturate(1.25) brightness(0.6);
  transform: scale(1.18);
}
.eac-theme-light .eac-bg { filter: blur(46px) saturate(1.1) brightness(1.05); opacity:.65; }
.eac-bg-veil {
  background:
    radial-gradient(ellipse at top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 75%),
    linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.45) 100%);
}
.eac-theme-light .eac-bg-veil {
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 75%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 100%);
}

/* ---- Grid ---- */
.eac-grid {
  position: relative; z-index: 2;
  display: grid; gap: clamp(16px, 2.4vw, 32px);
  grid-template-columns: minmax(0, 280px) 1fr;
  align-items: start;
}
@media (max-width: 760px) {
  .eac-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ---- Artwork + visualizer ---- */
.eac-art { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; }
.eac-art-frame {
  position: relative; width: 100%; height: 100%;
  border-radius: 22px; overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 8px 24px -8px rgba(0,0,0,0.45);
}
.eac-art-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s ease;
}
.eac-art-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--eac-bg-alt), var(--eac-bg));
  color: var(--eac-muted);
}
.eac-art-glow {
  position: absolute; inset: -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--eac-accent) 40%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity .35s ease;
}
.eac-player.is-playing .eac-art-glow { opacity: .85; animation: eac-pulse 6.5s ease-in-out infinite; }
.eac-player.is-playing .eac-art-img { transform: scale(1.04); }
@keyframes eac-pulse {
  0%,100%{ transform: scale(1); opacity: .65; }
  50%    { transform: scale(1.08); opacity: 1; }
}
.eac-viz {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: .55; transition: opacity .35s ease;
  /* Sit OVER the cover but BELOW the now-caption + glow. */
  z-index: 1;
}
.eac-player.is-playing .eac-viz { opacity: .92; }

/* ---- Main column ---- */
.eac-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--eac-muted);
}
.eac-eyebrow { font-weight: 600; }
.eac-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  background: rgba(255,255,255,.08); border: 1px solid var(--eac-line);
}
.eac-pill-live { color: #ff5d5d; border-color: rgba(255,93,93,.6); background: rgba(255,93,93,.12); }
.eac-pill-dot { width:6px; height:6px; border-radius:50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: eac-blink 1.4s ease-in-out infinite; }
@keyframes eac-blink { 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.eac-title {
  margin: 8px 0 4px;
  font-family: var(--font-heading, var(--font-body));
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800; letter-spacing: -0.01em; line-height: 1.18;
}
.eac-subtitle { margin: 0; color: var(--eac-muted); font-size: 14px; }
.eac-desc     { margin: 6px 0 0; color: var(--eac-muted); font-size: 13.5px; line-height: 1.55; max-width: 60ch; }

/* ---- Seek bar ---- */
.eac-seek-wrap { margin: 18px 0 8px; }
.eac-seek { position: relative; width: 100%; height: 24px; cursor: pointer; }
.eac-seek-track {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--eac-text) 14%, transparent);
}
.eac-seek-buffered { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--eac-text) 22%, transparent); width: 0%; }
.eac-seek-fill { position: absolute; inset: 0 100% 0 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--eac-accent), color-mix(in srgb, var(--eac-accent) 60%, white));
  box-shadow: 0 0 20px color-mix(in srgb, var(--eac-accent) 30%, transparent);
}
.eac-seek-thumb {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--eac-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 4px color-mix(in srgb, var(--eac-accent) 22%, transparent);
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
  left: 0;
}
.eac-seek:hover .eac-seek-thumb,
.eac-seek:focus-within .eac-seek-thumb { opacity: 1; }
.eac-seek-markers { position: absolute; inset: 0; pointer-events: none; }
.eac-seek-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 12px; border-radius: 2px;
  background: color-mix(in srgb, var(--eac-text) 55%, transparent);
}
.eac-times {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--eac-muted); font-variant-numeric: tabular-nums;
}

/* ---- Controls ---- */
.eac-controls {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  flex-wrap: wrap;
}
.eac-controls-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eac-btn {
  -webkit-appearance: none; appearance: none; border: 0; background: transparent;
  color: var(--eac-text); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.eac-btn:hover { background: color-mix(in srgb, var(--eac-text) 8%, transparent); }
.eac-btn:active { transform: scale(.94); }
.eac-btn:focus-visible { outline: 2px solid var(--eac-accent); outline-offset: 3px; }
.eac-btn-text { width:auto; min-width: 44px; padding: 0 10px; font-size: 12.5px; font-weight: 700; }

.eac-btn-play {
  width: 64px; height: 64px;
  background: var(--eac-accent); color: #111;
  box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--eac-accent) 70%, transparent);
}
.eac-btn-play:hover { background: color-mix(in srgb, var(--eac-accent) 80%, white); }
.eac-btn-play .eac-icon-play { margin-left: 3px; }

.eac-volume { display: inline-flex; align-items: center; gap: 6px; }
.eac-volume-slider {
  -webkit-appearance: none; appearance: none; height: 4px; width: 90px;
  background: color-mix(in srgb, var(--eac-text) 18%, transparent);
  border-radius: 999px; outline: none;
}
.eac-volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width: 12px; height: 12px; border-radius: 50%; background: var(--eac-text); cursor:pointer; }
.eac-volume-slider::-moz-range-thumb { width: 12px; height: 12px; border:none; border-radius: 50%; background: var(--eac-text); cursor:pointer; }

/* Active states */
.eac-btn-subs[aria-pressed="false"]    { color: var(--eac-muted); }
.eac-btn-chapters[aria-expanded="true"]{ background: color-mix(in srgb, var(--eac-accent) 18%, transparent); color: var(--eac-accent); }

/* ---- Chapters drawer ---- */
.eac-chapters[hidden] { display: none; }
.eac-chapters {
  margin-top: 14px;
  border-top: 1px solid var(--eac-line);
  padding-top: 12px;
}
.eac-chapters-list { list-style: none; padding: 0; margin: 0; max-height: 240px; overflow: auto; }
.eac-chapter-row {
  display: flex; gap: 14px; align-items: baseline;
  width: 100%; border: 0; background: transparent; color: var(--eac-text);
  text-align: left; padding: 8px 4px; cursor: pointer; font: inherit;
  border-radius: 8px;
}
.eac-chapter-row:hover { background: color-mix(in srgb, var(--eac-text) 6%, transparent); }
.eac-chapter-row.is-active { color: var(--eac-accent); }
.eac-chapter-row.is-active::before { content: '▸'; margin-right: 4px; }
.eac-chapter-time {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px;
  color: var(--eac-muted); min-width: 56px; flex-shrink: 0;
}
.eac-chapter-label { font-size: 14px; }

/* ---- Subtitles ---- */
.eac-subs {
  position: relative; margin-top: 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--eac-text) 4%, transparent);
  border: 1px solid var(--eac-line);
  padding: 12px 14px;
  height: 168px; overflow: hidden;
}
.eac-subs-track { height: 100%; overflow: hidden; }
.eac-subs-list  {
  list-style: none; padding: 60px 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .55s cubic-bezier(.25,.7,.3,1);
}
.eac-subs-list li {
  font-size: 16px; line-height: 1.45; color: var(--eac-muted);
  padding: 4px 6px; border-radius: 8px;
  transition: color .35s ease, opacity .35s ease, transform .35s ease, background .35s ease;
  opacity: .35;
  text-wrap: balance;
}
.eac-subs-list li.is-active {
  color: var(--eac-text); opacity: 1; transform: scale(1.05);
  font-weight: 700;
}
.eac-subs-glow .eac-subs-list li.is-active {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--eac-accent) 18%, transparent) 0%,
    transparent 70%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--eac-accent) 30%, transparent) inset;
}
.eac-subs-compact     .eac-subs-list li { font-size: 14px; }
.eac-subs-large       .eac-subs-list li { font-size: 19px; }
.eac-subs-fade-top, .eac-subs-fade-bot {
  position: absolute; left: 0; right: 0; height: 36px; pointer-events: none; z-index: 2;
}
.eac-subs-fade-top { top: 0;    background: linear-gradient(to bottom, var(--eac-bg) 0%, transparent 100%); }
.eac-subs-fade-bot { bottom: 0; background: linear-gradient(to top,    var(--eac-bg) 0%, transparent 100%); }
.eac-theme-light .eac-subs-fade-top { background: linear-gradient(to bottom, var(--eac-bg) 0%, transparent 100%); }
.eac-theme-light .eac-subs-fade-bot { background: linear-gradient(to top,    var(--eac-bg) 0%, transparent 100%); }

/* ---- Compact mode ---- */
.eac-player.is-compact .eac-stage { padding: 14px 18px; min-height: 0; }
.eac-player.is-compact .eac-art { max-width: 88px; }
.eac-player.is-compact .eac-grid { grid-template-columns: 88px 1fr; gap: 14px; }
.eac-player.is-compact .eac-title { font-size: 16px; }
.eac-player.is-compact .eac-desc, .eac-player.is-compact .eac-subs { display: none; }

/* ---- Audio element hidden — controls drive native audio ---- */
.eac-audio { display: none; }

/* ---- Sticky mini-player ---- */
.eac-mini {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: rgba(15,17,22,.97); color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 30px rgba(0,0,0,.45);
}
.eac-mini.is-visible { transform: translateY(0); }
.eac-mini-progress {
  position: absolute; top: 0; left: 0; height: 2px;
  background: var(--eac-accent, #FFF1D3); width: 0%;
  transition: width .25s linear;
}
.eac-mini-thumb {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: #1a1d23;
}
.eac-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eac-mini-info { flex: 1 1 auto; min-width: 0; cursor: pointer; }
.eac-mini-title { display: block; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eac-mini-meta  { display: block; font-size: 11.5px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eac-mini-btn   { width: 38px; height: 38px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,.08); color: #fff; display:inline-flex; align-items:center; justify-content:center; }
.eac-mini-btn:hover { background: rgba(255,255,255,.18); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .eac-art-img, .eac-art-glow, .eac-pill-dot { animation: none !important; transition: none !important; }
  .eac-subs-list { transition: none; }
}


/* ---- Now-playing caption overlay (active VTT cue) ----
   Sits over the artwork/visualizer and shows the currently
   spoken line in big, glowing text — like a karaoke caption. */
.eac-now-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(14px, 4%, 22px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  color: #fff;
  pointer-events: none;
  display: flex; align-items: flex-end;
  min-height: 42%;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.eac-now-caption.is-visible { opacity: 1; transform: translateY(0); }
.eac-now-caption-text {
  font-family: var(--font-heading, var(--font-body));
  font-weight: 800;
  font-size: clamp(15px, 2.2vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 0 18px color-mix(in srgb, var(--eac-accent) 65%, transparent),
    0 0 6px rgba(0,0,0,.4);
  text-wrap: balance;
}
.eac-theme-light .eac-now-caption {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,.45) 100%);
}

/* Compact mode hides the prominent overlay (player itself is too small) */
.eac-player.is-compact .eac-now-caption { display: none; }