/* =============================================================================
   InvestProp — «پادکست اینوست پراپ» (episode card + audio player)
   -----------------------------------------------------------------------------
   Used by `site/index/voice.blade.php` and driven by `podcast.js`.

   What this replaces: a full-bleed blue slab with a composite PNG on one side
   (host name, role and a «پخش ویدیو» badge all baked into the pixels) and, on
   the other, a 117px button beside fifty 2px bars that read as a dotted line
   and could not be clicked.

   The section is now one glass card, and its visual is THE RECORD — a full-size
   vinyl drawn here in CSS (grooves, track bands, two revolving light wedges,
   the host photo as its label), so it stays crisp at any size where the 116px
   photo alone never could. The waveform is the scrubber: a real
   <input type="range"> lies over the bars, so drag, keyboard seeking and the
   screen-reader announcement are the platform's. The bars are the episode's
   actual peaks, drawn twice — a muted layer and a brand layer clipped to the
   playhead — and are `aria-hidden` decoration.

   Composition rule after two rounds of review: ONE saturated object (the
   record's glow + label), ONE primary action (the play pill), and everything
   else quiet. No box-in-box: the old artwork plate and the player sub-panel
   are gone — the record and the controls sit directly on the card.

   Everything is scoped to `.pod`, the section's own root — NOT to a page body
   class — so the card can be dropped onto another public page later (same rule
   as roadmap.css / atlas.css / testimonials.css).

   Layout, in the order it is written
   ---------------------------------
   The STACKED card is the base: record on top, host, copy, then the player.
   The two-column split is an enhancement at 992px and up.

   Conventions this file must respect (see the site design system):
     • dark is the DEFAULT theme (`html.dark`); light is the opt-in override,
       and neither compiled sheet sets a global text colour — every block here
       declares its own.
     • RTL is the default direction, so logical properties throughout. The one
       thing written physically is the waveform clip: audio progress mirrors
       (it fills from the right in RTL, as native range inputs do), so the two
       directions get their own `clip-path`.

   Contract with podcast.js
   ------------------------
     .pod.is-live     — the script is running; it hides the native <audio> and
                        has enabled the custom controls.
     .pod.is-playing  — audio is playing (light wedges revolve, equaliser
                        beats, button state).
     --pod-p on .pod  — playhead position as a percentage.
   ========================================================================== */

.pod {
    /* --- palette (dark = default) -----------------------------------------
       The brand ramp — cyan #5ED2EC → #1C8AFF → #007BFF → deep navy — is the
       identity, spent where it counts: the record's glow and label, the played
       half of the waveform, the play pill. The card around them is navy-tinted
       glass rather than the page's near-black. */
    --pod-accent: #007BFF;
    --pod-accent-2: #1C8AFF;

    --pod-surface:
        radial-gradient(90% 130% at 50% -30%, rgba(0, 123, 255, .16), transparent 62%),
        linear-gradient(135deg, rgba(9, 28, 55, .78) 0%, rgba(5, 16, 33, .74) 55%, rgba(7, 23, 46, .78) 100%);
    --pod-ghost: rgba(141, 196, 255, .09);
    --pod-line: rgba(141, 196, 255, .16);
    --pod-line-2: rgba(141, 196, 255, .3);
    --pod-bar: rgba(141, 196, 255, .34);
    --pod-text: #EAF2FF;
    --pod-text-2: #C3D4EA;
    --pod-muted: #8FA5C2;

    --pod-vinyl-glow: radial-gradient(circle, rgba(0, 123, 255, .42), rgba(28, 138, 255, .14) 50%, transparent 66%);
    --pod-vinyl-floor: rgba(0, 0, 0, .55);

    --pod-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --pod-glow: 0 10px 40px -12px rgba(0, 123, 255, .55);
    --pod-shadow: 0 24px 70px -30px rgba(0, 0, 0, .85);

    position: relative;
    margin-top: 96px;
}

html:not(.dark) .pod {
    --pod-surface:
        radial-gradient(90% 130% at 50% -30%, rgba(0, 123, 255, .09), transparent 62%),
        linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(236, 245, 255, .92) 100%);
    --pod-ghost: rgba(0, 123, 255, .07);
    --pod-line: rgba(0, 72, 153, .14);
    --pod-line-2: rgba(0, 72, 153, .22);
    --pod-bar: rgba(11, 98, 196, .26);
    --pod-text: #0A1A30;
    --pod-text-2: #2B4463;
    --pod-muted: #5D7492;

    --pod-vinyl-glow: radial-gradient(circle, rgba(0, 123, 255, .26), rgba(28, 138, 255, .1) 50%, transparent 66%);
    --pod-vinyl-floor: rgba(10, 40, 80, .3);

    --pod-shadow: 0 24px 60px -34px rgba(10, 40, 80, .45);
}

@media (max-width: 767.98px) {
    .pod { margin-top: 64px; }
}

/* -----------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.pod-card {
    position: relative;
    display: grid;
    gap: 28px;
    padding: 24px 20px 28px;
    border-radius: 24px;
    border: 1px solid var(--pod-line);
    background: var(--pod-surface);
    backdrop-filter: blur(28px);
    box-shadow: var(--pod-shadow);
    overflow: hidden;
}

/* The house glass shine: a 1px gradient border painted through a mask, lit
   white at the top-start and warmed with primary at the far corner — the same
   recipe every 2026 card and CTA on the site wears. */
.pod-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(150deg,
        rgba(255, 255, 255, .28) 0%,
        rgba(255, 255, 255, 0) 26%,
        rgba(255, 255, 255, 0) 68%,
        rgba(0, 123, 255, .3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

html:not(.dark) .pod-card::before {
    background: linear-gradient(150deg,
        rgba(0, 123, 255, .32) 0%,
        rgba(0, 123, 255, 0) 30%,
        rgba(0, 123, 255, 0) 66%,
        rgba(0, 123, 255, .2) 100%);
}

/* A whisper of film grain over the glass — it kills gradient banding on the
   big dark panel and gives the surface an actual material. */
.pod-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: .05;
    pointer-events: none;
}

html:not(.dark) .pod-card::after { opacity: .03; }

/* The same grounding glow the video card beside it stands on, so the pair
   sits on the page the same way. */
.pod::before {
    content: "";
    position: absolute;
    inset-inline: 12%;
    bottom: -38px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 123, 255, .4), rgba(0, 123, 255, 0) 70%);
    filter: blur(38px);
    pointer-events: none;
}

html:not(.dark) .pod::before { background: radial-gradient(ellipse, rgba(0, 123, 255, .22), rgba(0, 123, 255, 0) 70%); }

@media (min-width: 992px) {
    .pod-card {
        grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(36px, 4vw, 60px);
        padding: 44px 40px;
    }
}

/* -----------------------------------------------------------------------------
   The record
   -------------------------------------------------------------------------- */

.pod-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    /* Clearance: the glow and floor shadow reach past the disc, and the card
       clips at its edge — without this the halo dies on a hard line. */
    padding-block: 16px 10px;
}

.pod-vinyl {
    position: relative;
    width: min(340px, 82%);
    aspect-ratio: 1;
}

@media (max-width: 991.98px) {
    .pod-vinyl { width: min(240px, 70%); }
}

/* Brand light pooled behind the disc — the section's one glow. */
.pod-vinyl__glow {
    position: absolute;
    inset: -5%;
    border-radius: 50%;
    background: var(--pod-vinyl-glow);
    filter: blur(16px);
    pointer-events: none;
}

/* Soft ellipse under the disc so the record sits on the card instead of
   floating in it. */
.pod-vinyl::after {
    content: "";
    position: absolute;
    inset-inline: 14%;
    bottom: -6%;
    height: 8%;
    border-radius: 50%;
    background: radial-gradient(ellipse, var(--pod-vinyl-floor), transparent 70%);
    filter: blur(5px);
    pointer-events: none;
}

/* The disc itself. Vinyl is near-black in any theme — that IS the realism —
   with a cool navy cast so it still belongs to the palette. */
.pod-vinyl__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* one soft specular spot where the room light lands */
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .085), transparent 34%),
        radial-gradient(circle at 33% 28%, #1B3050 0%, #0C1A2E 44%, #060D18 76%, #0B1830 100%);
    box-shadow:
        inset 0 0 0 1px rgba(141, 196, 255, .22),
        inset 0 0 0 7px rgba(2, 8, 18, .85),   /* the glossy lead-in band at the rim */
        inset 0 0 26px rgba(0, 0, 0, .5),
        inset 0 2px 22px rgba(255, 255, 255, .05),
        0 30px 60px -30px rgba(0, 0, 0, .9);
    overflow: hidden;
}

/* Two layers of engraving: fine grooves every 4px, and broader "track" bands
   every 34px — the darker rings that separate songs on a real pressing. Both
   are masked off the label area and the outer lead-in. */
.pod-vinyl__grooves {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(2, 8, 16, .55) 0 2px, transparent 2px 34px),
        repeating-radial-gradient(circle at 50% 50%, rgba(141, 196, 255, .085) 0 1px, transparent 1px 4px);
    -webkit-mask: radial-gradient(circle, transparent 0 21%, #000 23% 95%, transparent 97%);
            mask: radial-gradient(circle, transparent 0 21%, #000 23% 95%, transparent 97%);
}

/* The two light wedges a spotlight throws across a pressing, sitting opposite
   each other. They hold still — it is the etched ring below that revolves
   while the episode plays: a record turns under a lamp, not the reverse. */
.pod-vinyl__sheen {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 212deg,
        transparent 0deg,
        rgba(141, 196, 255, .17) 24deg,
        rgba(255, 255, 255, .05) 38deg,
        transparent 64deg,
        transparent 178deg,
        rgba(28, 138, 255, .19) 204deg,
        rgba(255, 255, 255, .045) 220deg,
        transparent 246deg);
}

/* The run-out etching: micro-type pressed near the rim. Latin on purpose —
   matrix etchings are — and quiet enough to be found, not read. While the
   episode plays the ring revolves, and because the grooves are radially
   symmetric this is the one honest way the record can visibly turn. */
.pod-vinyl__etch {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pod-vinyl__etch text {
    /* The page is `dir="rtl"`, and SVG text inherits it: an RTL Latin run on a
       textPath lays out backwards from the path start and collapses. The ring
       is Latin micro-type, so it opts out explicitly. */
    direction: ltr;
    unicode-bidi: isolate;
    text-anchor: start;
    font-family: Poppins, sans-serif;
    /* Sized against the 100-unit viewBox: ~11px on the full-width record,
       ~7px in the narrow column — found, not read. */
    font-size: 3.7px;
    font-weight: 600;
    letter-spacing: .12em;
    fill: rgba(141, 196, 255, .42);
}

.pod.is-playing .pod-vinyl__etch { animation: pod-spin 14s linear infinite; }

@keyframes pod-spin {
    to { transform: rotate(360deg); }
}

/* The label: brand ring, host photo, and the beat badge. Capped at 124px so
   the 116px source is never stretched far past itself. */
.pod-vinyl__label {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(38%, 124px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    padding: 4px;
    border-radius: 50%;
    background: var(--pod-grad);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .22),
        0 0 0 4px rgba(4, 10, 20, .9),        /* the dead-wax gap between label and grooves */
        0 0 0 5px rgba(141, 196, 255, .14),
        0 12px 32px -8px rgba(0, 0, 0, .8);
}

/* A curved varnish highlight across the top of the label — the printed-paper
   gloss a pressed label actually has. */
.pod-vinyl__label::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: linear-gradient(205deg, rgba(255, 255, 255, .2), transparent 36%);
    pointer-events: none;
}

.pod-vinyl__photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Four bars under the label — beats only while something actually plays. */
.pod-vinyl__eq {
    position: absolute;
    inset-block-end: -10px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 16px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 5px 16px -5px rgba(0, 20, 50, .8);
    opacity: 0;
    transition: opacity .25s ease;
}

html[dir="rtl"] .pod-vinyl__eq { transform: translateX(50%); }

.pod-vinyl__eq i {
    width: 2.5px;
    height: 4px;
    border-radius: 2px;
    background: var(--pod-accent);
}

.pod.is-playing .pod-vinyl__eq { opacity: 1; }

.pod.is-playing .pod-vinyl__eq i { animation: pod-eq .9s ease-in-out infinite; }
.pod.is-playing .pod-vinyl__eq i:nth-child(2) { animation-duration: .68s; }
.pod.is-playing .pod-vinyl__eq i:nth-child(3) { animation-duration: 1.05s; }
.pod.is-playing .pod-vinyl__eq i:nth-child(4) { animation-duration: .82s; }

@keyframes pod-eq {
    0%, 100% { height: 3px; }
    50%      { height: 10px; }
}

.pod-host {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.pod-host__name {
    font-size: 17px;
    font-weight: 800;
    color: var(--pod-text);
}

.pod-host__role {
    font-size: 13px;
    line-height: 1.7;
    color: var(--pod-muted);
    max-width: 34ch;
}

/* -----------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */

.pod-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pod-title {
    margin: 0;
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 900;
    line-height: 1.5;
    color: var(--pod-text);
}

/* The brand name inside the title, in the house gradient-text treatment. */
.pod-title .pod-grad-text {
    background: linear-gradient(96deg, var(--pod-accent-2) 0%, #8DC4FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

/* Light blue on white washes out — the light theme runs the ramp darker. */
html:not(.dark) .pod-title .pod-grad-text {
    background: linear-gradient(96deg, #0455B8 0%, #1C8AFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.pod-desc {
    /* `text-align: justify` (what the old block used) tears Persian lines apart
       at this measure — start-aligned, capped at a readable line length. */
    margin: 14px 0 0;
    max-width: 62ch;
    text-align: start;
    font-size: 15px;
    line-height: 2.05;
    color: var(--pod-muted);
}

/* -----------------------------------------------------------------------------
   Player — no panel around it; the wave and controls sit on the card
   -------------------------------------------------------------------------- */

.pod-player {
    margin-top: 22px;
    /* Reserved airspace for the scrub bubble, which floats above the wave. */
    padding-top: 34px;
}

@media (min-width: 992px) {
    /* Pin the player to the bottom of the card so its edge lines up with the
       record's, however long the copy runs. */
    .pod-player { margin-top: auto; }
    .pod-body .pod-desc { margin-bottom: 12px; }
}

/* --- waveform + scrubber -------------------------------------------------- */

.pod-track {
    position: relative;
    border-radius: 12px;
}

/* The range input is transparent, so the focus ring has to be drawn by the
   wrapper — otherwise a keyboard user gets nothing at all. */
.pod-track:has(.pod-seek:focus-visible) {
    outline: 2px solid var(--pod-accent-2);
    outline-offset: 6px;
}

.pod-wave {
    position: relative;
    height: 64px;
    /* The episode fades in from silence at both ends — reads finished, and
       symmetric, so it survives RTL untouched. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

@media (max-width: 767.98px) {
    .pod-wave { height: 52px; }
}

.pod-wave__layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* `space-between` rather than a fixed gap: the bars are capped at 5px, so
       whatever the track's width, the leftover becomes even spacing instead of
       a half-empty comb packed against the start. */
    justify-content: space-between;
    gap: 2px;
}

.pod-bar {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 5px;
    height: calc(var(--h, .4) * 100%);
    min-height: 4px;
    border-radius: 999px;
    background: var(--pod-bar);
}

/* Played portion. `--pod-p` is written by podcast.js; the clip is the one thing
   in this file that is physical, because it must mirror with the direction. */
.pod-wave__layer--fill {
    clip-path: inset(0 calc(100% - var(--pod-p, 0%)) 0 0);
    /* `timeupdate` only lands ~4×/s; easing between the steps turns the fill's
       tick into a glide. Linear on purpose — playback time is linear. */
    transition: clip-path .3s linear;
}

html[dir="rtl"] .pod-wave__layer--fill {
    clip-path: inset(0 0 0 calc(100% - var(--pod-p, 0%)));
}

.pod-wave__layer--fill .pod-bar {
    background: linear-gradient(180deg, #8DC4FF 0%, var(--pod-accent-2) 45%, var(--pod-accent) 100%);
    box-shadow: 0 0 12px -3px rgba(0, 123, 255, .6);
}

.pod-seek {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -4px;
    width: calc(100% + 8px);
    height: 44px;
    margin: 0;
    transform: translateY(-50%);
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    direction: inherit;
}

.pod-seek:focus { outline: none; }
.pod-seek:disabled { cursor: default; }

.pod-seek::-webkit-slider-runnable-track {
    height: 44px;
    background: transparent;
    border: 0;
}

.pod-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: 14px;
    border-radius: 50%;
    border: 3px solid var(--pod-accent-2);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.pod-seek::-moz-range-track { height: 44px; background: transparent; border: 0; }

.pod-seek::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid var(--pod-accent-2);
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.pod-seek:disabled::-webkit-slider-thumb { opacity: .4; }
.pod-seek:disabled::-moz-range-thumb { opacity: .4; }

/* A time chip riding the playhead — visible only mid-scrub, so the exact
   second being aimed for is under the eye, not down in the corner. */
.pod-bubble {
    position: absolute;
    inset-block-start: -32px;
    inset-inline-start: var(--pod-p, 0%);
    transform: translateX(-50%);
    padding: 3px 10px;
    border-radius: 8px;
    background: var(--pod-grad);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(0, 123, 255, .65);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

html[dir="rtl"] .pod-bubble { transform: translateX(50%); }

.pod.is-scrubbing .pod-bubble { opacity: 1; }

/* The playhead answers the pointer before it is touched. */
.pod-track:hover .pod-seek:not(:disabled)::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px rgba(28, 138, 255, .22), 0 2px 12px rgba(0, 0, 0, .5);
}

.pod-track:hover .pod-seek:not(:disabled)::-moz-range-thumb {
    box-shadow: 0 0 0 6px rgba(28, 138, 255, .22), 0 2px 12px rgba(0, 0, 0, .5);
}

/* --- times: just the two numbers under the wave's ends -------------------- */

.pod-times {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--pod-muted);
}

/* First span is the elapsed time — the one that moves gets the weight. */
.pod-times span:first-child {
    color: var(--pod-text-2);
    font-weight: 700;
}

/* --- transport ------------------------------------------------------------ */

.pod-transport {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.pod-play,
.pod-skip,
.pod-rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* The one primary action. */
.pod-play {
    position: relative;
    gap: 10px;
    min-height: 52px;
    /* Wide enough that swapping the label for «توقف» / "Pause" does not resize
       the button under the pointer that just clicked it. */
    min-width: 168px;
    padding-inline: 24px;
    border: 0;
    border-radius: 14px;
    background: var(--pod-grad);
    box-shadow: var(--pod-glow);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}

/* The 1px shine along the top-start edge is the house style for the CTA. */
.pod-play::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(106.61deg, #FFFFFF 2.5%, rgba(255, 255, 255, 0) 18.15%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.pod-play i { font-size: 20px; }

/* Quiet secondaries: hairline ghost circles, one family with the rate pill. */
.pod-skip {
    width: 44px;
    height: 44px;
    border: 1px solid var(--pod-line);
    border-radius: 50%;
    background: var(--pod-ghost);
    color: var(--pod-text-2);
    font-size: 19px;
}

.pod-rate {
    position: relative;
    height: 34px;
    min-width: 50px;
    margin-inline-start: auto;
    padding-inline: 12px;
    border: 1px solid var(--pod-line);
    border-radius: 999px;
    background: var(--pod-ghost);
    color: var(--pod-text-2);
    font-size: 13px;
    font-weight: 800;
    font-family: Poppins, sans-serif;
}

/* A 34px pill reads better beside the icons than a 44px one, so the tap area
   is extended past the visual bounds rather than the pill being grown. */
.pod-rate::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
}

/* Phones: the pill takes a full row of its own and the quiet controls centre
   under it — 168px of button and two 44px circles cannot share a 250px line,
   and letting them wrap put every control on a line of its own. */
@media (max-width: 575.98px) {
    .pod-transport {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .pod-play { flex: 1 0 100%; }

    .pod-rate { margin-inline-start: 0; }
}

.pod-play:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 16px 46px -12px rgba(0, 123, 255, .75); }
.pod-play:not(:disabled):active { transform: translateY(0) scale(.985); }

.pod-skip:not(:disabled):hover,
.pod-rate:not(:disabled):hover {
    color: var(--pod-text);
    border-color: var(--pod-accent-2);
    background: rgba(0, 123, 255, .1);
}

/* The circular arrows give a little turn in their own direction on press. */
.pod-skip i { transition: transform .18s ease; }

.pod-skip[data-pod-skip="-15"]:not(:disabled):active i { transform: rotate(-30deg); }
.pod-skip[data-pod-skip="15"]:not(:disabled):active i { transform: rotate(30deg); }

.pod-play:focus-visible,
.pod-skip:focus-visible,
.pod-rate:focus-visible {
    outline: 2px solid var(--pod-accent-2);
    outline-offset: 3px;
}

.pod-play:disabled,
.pod-skip:disabled,
.pod-rate:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
}

/* --- native fallback ------------------------------------------------------ */

/* Shown until podcast.js takes over, so the episode is playable even if the
   script never arrives. */
.pod-native {
    display: block;
    width: 100%;
    margin-top: 16px;
}

.pod.is-live .pod-native { display: none; }

/* -----------------------------------------------------------------------------
   Entrance — keyed to the home page's reveal observer putting `.is-in` on the
   card (the `hx-reveal` contract). Everything here is written so that WITHOUT
   that class — another page, a blocked script — nothing animates and the card
   simply sits complete: the animations exist only under `.pod-card.is-in`.
   -------------------------------------------------------------------------- */

.pod-card.is-in .pod-vinyl {
    animation: pod-vinyl-in .9s cubic-bezier(.22, 1, .36, 1) both;
}

.pod-card.is-in .pod-host {
    animation: pod-rise .6s .3s cubic-bezier(.22, 1, .36, 1) both;
}

.pod-card.is-in .pod-title { animation: pod-rise .6s .08s cubic-bezier(.22, 1, .36, 1) both; }
.pod-card.is-in .pod-desc { animation: pod-rise .6s .18s cubic-bezier(.22, 1, .36, 1) both; }
.pod-card.is-in .pod-player { animation: pod-rise .6s .28s cubic-bezier(.22, 1, .36, 1) both; }

/* The waveform draws itself in, bar by bar from the episode's start —
   `--i` comes inline from the blade. Only the idle layer: the fill layer is
   clipped to 0% until something plays. */
.pod-card.is-in .pod-wave__layer--idle .pod-bar {
    transform-origin: center;
    animation: pod-bar-in .45s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(.4s + var(--i, 0) * 9ms);
}

@keyframes pod-vinyl-in {
    from {
        opacity: 0;
        transform: scale(.92) rotate(-5deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pod-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pod-bar-in {
    from {
        opacity: .2;
        transform: scaleY(.12);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pod-card.is-in .pod-vinyl,
    .pod-card.is-in .pod-host,
    .pod-card.is-in .pod-title,
    .pod-card.is-in .pod-desc,
    .pod-card.is-in .pod-player,
    .pod-card.is-in .pod-wave__layer--idle .pod-bar { animation: none; }

    .pod-wave__layer--fill { transition: none; }

    .pod.is-playing .pod-vinyl__etch { animation: none; }

    .pod-skip i { transition: none; }

    .pod.is-playing .pod-vinyl__eq i { animation: none; height: 9px; }

    .pod-play,
    .pod-skip,
    .pod-rate { transition: none; }

    .pod-play:not(:disabled):hover { transform: none; }
}