/* ============================================================
   HELAIA — מה הלאה / What Next (shared EP theme)
   Used by BOTH ma-halaa.html (Hebrew, RTL) and what-next.html
   (English, LTR) — same artwork, same palette.
   Theme extension over album.css — palette taken from the
   album cover: deep navy night, pastel pink mountains,
   neon teal pool, cream sky, violet neon tubes.
   RTL-only adjustments are scoped to main[dir="rtl"].
   ============================================================ */

/* --- Page theme — overrides the album.css variables --- */
body.page-ma-halaa {
    --page-bg: #0D102E;
    --page-bg-alt: #131740;
    --page-bg-raised: rgba(243, 231, 206, 0.04);
    --page-text: #F3E7CE;
    --page-text-soft: #CDC6DA;
    --page-text-muted: rgba(243, 231, 206, 0.55);
    --page-accent: #E88BAE;
    --page-accent-deep: #B45C87;
    --page-teal: #56B3AC;
    --page-violet: #8155CB;
    --page-ink: #070921;
    --page-border: rgba(232, 139, 174, 0.16);
    --page-border-strong: rgba(232, 139, 174, 0.32);

    --nav-bg: rgba(13, 16, 46, 0.92);
    --nav-text: #F3E7CE;
    --nav-accent: #E88BAE;

    --footer-bg: #070921;
    --footer-text: #F3E7CE;
    --footer-muted: rgba(243, 231, 206, 0.45);
    --footer-border: rgba(232, 139, 174, 0.1);
    --footer-hover: #E88BAE;

    --font-serif: 'Frank Ruhl Libre', 'Iowan Old Style', 'Times New Roman', serif;
    --font-main: 'Heebo', 'Quicksand', -apple-system, sans-serif;

    background: var(--page-bg);
    color: var(--page-text);
}

/* Confetti-like grain instead of sepia grain */
body.page-ma-halaa::before {
    background-image: radial-gradient(rgba(232, 139, 174, 0.035) 1px, transparent 1px);
}

/* Neon-tube glow: pink from one side, pool-teal from the other,
   like the lights around the cover's window */
body.page-ma-halaa::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 8% 105%,
            rgba(232, 139, 174, 0.13), transparent 70%),
        radial-gradient(ellipse 55% 45% at 92% 105%,
            rgba(86, 179, 172, 0.12), transparent 70%),
        radial-gradient(ellipse 70% 35% at 50% 112%,
            rgba(129, 85, 203, 0.1), transparent 75%);
}

/* Cover frame — neon pink edge over navy */
body.page-ma-halaa .album-cover-wrap {
    border-color: rgba(232, 139, 174, 0.28);
    background: #070921;
    box-shadow:
        0 1px 0 rgba(232, 139, 174, 0.12),
        0 40px 80px -20px rgba(0, 0, 0, 0.65),
        0 20px 40px -10px rgba(129, 85, 203, 0.25);
}

body.page-ma-halaa .album-cover-wrap::after {
    box-shadow: inset 0 0 80px rgba(232, 139, 174, 0.08);
}

/* Teal counterpoint — ornaments between sections */
body.page-ma-halaa .album-ornament {
    color: var(--page-teal);
}

/* ============================================================
   RTL adjustments (main content is dir="rtl")
   ============================================================ */

/* Hebrew display type — no negative tracking on Hebrew glyphs */
body.page-ma-halaa .album-title,
body.page-ma-halaa .section-title,
body.page-ma-halaa .track-title,
body.page-ma-halaa .lyrics-song-title {
    letter-spacing: 0;
}

/* Track rows — mirror the physical padding of album.css (RTL only) */
body.page-ma-halaa main[dir="rtl"] .track {
    padding: var(--sp-md) 0 var(--sp-md) var(--sp-md);
}

body.page-ma-halaa main[dir="rtl"] .track:first-child {
    padding-top: 0;
}

/* Hebrew track numbers (א–ז) sit better a touch lower */
body.page-ma-halaa .track-number {
    padding-top: 4px;
}

/* Lyrics — let each line pick its own direction (Hebrew lines RTL,
   Latin lines like "Rien de rien" LTR), anchored right (RTL only) */
body.page-ma-halaa main[dir="rtl"] .lyrics-text {
    unicode-bidi: plaintext;
    text-align: right;
}

/* Subtitle accent word */
body.page-ma-halaa .album-subtitle .sub-or {
    color: var(--page-accent);
}

/* The final track's "מכונה" voice marker — pool teal */
body.page-ma-halaa .lyrics-ia {
    color: var(--page-teal);
}

/* ============================================================
   DEDICATION — framed like the cover: teal→pink gradient edge
   ============================================================ */
.album-dedication {
    max-width: 560px;
    padding-top: 0;
    text-align: center;
}

.dedication-frame {
    padding: 1px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--page-teal), var(--page-accent));
    box-shadow:
        0 18px 50px -18px rgba(232, 139, 174, 0.35),
        0 10px 30px -14px rgba(86, 179, 172, 0.28);
}

.dedication-inner {
    padding: var(--sp-lg) var(--sp-md);
    border-radius: calc(var(--radius-md) - 1px);
    background: var(--page-bg-alt);
}

.dedication-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--page-teal);
    margin-bottom: var(--sp-sm);
}

.dedication-text {
    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    line-height: 1.4;
    color: var(--page-text);
    margin: 0 0 10px;
}

.dedication-initials {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3.4vw, 2.2rem);
    font-weight: 500;
    color: var(--page-accent);
    margin: 0;
}

.dedication-sep {
    color: var(--page-teal);
    font-size: 0.6em;
    opacity: 0.8;
}

/* ============================================================
   TRACK PLAYERS — themed audio controls in each track row
   ============================================================ */

/* Hero "listen here" button — filled, the one live action */
body.page-ma-halaa .streaming-btn-listen {
    background: var(--page-accent);
    color: var(--page-ink);
    border-color: var(--page-accent);
}

body.page-ma-halaa .streaming-btn-listen:hover {
    background: var(--page-text);
    border-color: var(--page-text);
    color: var(--page-ink);
}

.track-player {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    max-width: 480px;
}

.track-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    flex-shrink: 0;
    color: var(--page-accent);
    background: transparent;
    border: 1px solid var(--page-border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
}

.track-play svg {
    width: 16px;
    height: 16px;
}

/* SVG elements don't get the UA [hidden] rule — enforce it */
.track-play svg[hidden] {
    display: none;
}

/* Play triangle stays LTR even in the RTL layout */
.track-play .icon-play {
    transform: translateX(1px);
}

.track-play:hover,
.track-play.playing {
    background: var(--page-accent);
    color: var(--page-ink);
    border-color: var(--page-accent);
}

.track-play:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 2px;
}

/* ?play=N deep link when autoplay is blocked — pulse until tapped */
.track-play.attention {
    animation: trackPlayPulse 1.6s ease-out infinite;
}

@keyframes trackPlayPulse {
    0%   { box-shadow: 0 0 0 0 rgba(232, 139, 174, 0.55); }
    70%  { box-shadow: 0 0 0 14px rgba(232, 139, 174, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 139, 174, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .track-play.attention {
        animation: none;
        box-shadow: 0 0 0 4px rgba(232, 139, 174, 0.45);
    }
}

.track-seek {
    --p: 0%;
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: linear-gradient(to left, var(--page-accent) var(--p), rgba(243, 231, 206, 0.14) var(--p));
    cursor: pointer;
}

.track-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--page-accent);
    border: none;
    transition: transform var(--transition-fast);
}

.track-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--page-accent);
    border: none;
}

.track-seek:hover::-webkit-slider-thumb {
    transform: scale(1.25);
}

.track-seek:focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 4px;
}

.track-time {
    flex-shrink: 0;
    min-width: 86px;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--page-text-muted);
    text-align: left;
}

@media (max-width: 480px) {
    .track-player {
        gap: 10px;
    }
    .track-time {
        min-width: 74px;
    }
}