/* =========================================================
   Learning Rewired Lab — Podcast page
   Signal Room aesthetic. Layout is inline in podcast/index.html;
   this file holds keyframes, hover states, and responsive rules.
   ========================================================= */

.pod-page * , .pod-page *::before, .pod-page *::after { box-sizing: border-box; }
.pod-page a { color: inherit; }

@keyframes pod-pulse   { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes pod-orbit   { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pod-wave    { 0%,100% { transform: scaleY(.32); opacity:.55; } 50% { transform: scaleY(1); opacity:1; } }
@keyframes pod-ring    { 0% { transform: scale(.7); opacity:.7; } 100% { transform: scale(1.9); opacity:0; } }
@keyframes pod-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pod-drift   { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); opacity:.9; } 50% { transform: translateX(-46%) translateY(14px) scale(1.08); opacity:1; } }

.pod-glow-drift { animation: pod-drift 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pod-page [class*="pod-anim"], .pod-wave span, .pod-orbit, .pod-ring, .pod-float { animation: none !important; }
}

/* ---- waveform ---- */
.pod-wave { display:flex; align-items:center; gap:5px; height:60px; }
.pod-wave span { display:block; width:6px; height:100%; border-radius:3px; background: linear-gradient(180deg,#6ee7d8,#16b8d9); transform-origin:center; animation: pod-wave 1.6s ease-in-out infinite; }
.pod-wave span:nth-child(odd) { animation-duration: 1.3s; }
.pod-wave span:nth-child(3n) { animation-delay: .2s; }
.pod-wave span:nth-child(4n) { animation-delay: .4s; }

/* ---- orbit + pulse ring ---- */
.pod-orbit { animation: pod-orbit 14s linear infinite; }
.pod-ring { animation: pod-ring 2.6s ease-out infinite; }
.pod-live-dot { animation: pod-pulse 2s ease-in-out infinite; }
.pod-float { animation: pod-float 8s ease-in-out infinite; }

/* ---- episode board ---- */
.pod-ep-btn { all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:center; padding:16px 16px 16px 14px; border-radius:14px; width:100%; transition:background .2s ease, border-color .2s ease, transform .2s ease; border:1px solid transparent; border-left:3px solid transparent; }
.pod-ep-btn:hover { background: rgba(255,255,255,.05); transform: translateX(2px); }
.pod-ep-btn:focus-visible { outline:2px solid #6ee7d8; outline-offset:2px; }
.pod-ep-btn.is-active { background: rgba(110,231,216,.09); border-color: rgba(110,231,216,.28); border-left-color: #6ee7d8; }
.pod-ep-btn-num { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:13px; font-weight:900; color: rgba(226,242,247,.5); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.pod-ep-btn.is-active .pod-ep-btn-num { background: linear-gradient(145deg,#16b8d9,#0f766e); border-color: transparent; color:#fff; box-shadow: 0 6px 16px rgba(22,184,217,.3); }
.pod-ep-btn-text { display:grid; gap:5px; text-align:left; }
.pod-ep-btn-text strong { font-size:14.5px; font-weight:800; color:#fff; line-height:1.3; }
.pod-ep-btn-text span { font-size:11.5px; font-weight:700; color: rgba(226,242,247,.4); letter-spacing:.02em; }
.pod-ep-btn.is-active .pod-ep-btn-text span { color:#6ee7d8; }
.pod-ep-mini { display:flex; align-items:flex-end; gap:2px; height:18px; }
.pod-ep-mini i { display:block; width:3px; border-radius:2px; background: rgba(255,255,255,.18); }
.pod-ep-btn.is-active .pod-ep-mini i { background: #6ee7d8; animation: pod-wave 1.4s ease-in-out infinite; }

/* ---- platform cards ---- */
.pod-platform { display:flex; flex-direction:column; gap:6px; padding:22px 20px; border-radius:18px; border:1px solid #e6ebf1; background:#fff; text-decoration:none; transition:border-color .2s ease, transform .2s ease; }
.pod-platform:hover { border-color: rgba(22,184,217,.4); transform: translateY(-2px); }
.pod-platform span:first-child { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background: rgba(22,184,217,.1); border:1px solid rgba(22,184,217,.28); color:#0789a2; font-size:12px; font-weight:900; }
.pod-platform strong { font-size:15.5px; font-weight:850; color:#07111f; }
.pod-platform em { font-style:normal; font-size:12px; font-weight:800; color:#94a3b8; }

/* ---- topic lanes ---- */
.pod-lane { transition: border-color .2s ease, background .2s ease; }
.pod-lane:hover { border-color: rgba(22,184,217,.32); background: rgba(22,184,217,.04); }

/* ---- buttons (shared with homepage system) ---- */
.h-cyan:hover  { background:#0ea5c2 !important; }
.h-mint:hover  { background:#ffffff !important; }
.h-glass:hover { background:rgba(255,255,255,.14) !important; }
.h-ghost:hover { border-color:#16b8d9 !important; color:#0789a2 !important; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  [data-r="pod-hero"] { grid-template-columns: 1fr !important; gap:36px !important; }
  [data-r="pod-board"] { grid-template-columns: 1fr !important; }
  [data-r="pod-platforms"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="pod-lanes"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  [data-r="pod-h1"] { font-size: 36px !important; }
  [data-r="pod-platforms"] { grid-template-columns: 1fr !important; }
  [data-r="pod-lanes"] { grid-template-columns: 1fr !important; }
}