/* ==========================================================================
   Stories Theme - Single Story & Post View Styles
   Enqueued only on singular post views (is_single / is_singular).
   ========================================================================== */

/* =============================================================================
                   S I N G L E   S T O R Y   ( P O S T S )
   ============================================================================= */

.single-story {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    margin-bottom: 3.5rem;

    & .entry-header {
        margin-bottom: 2.25rem;

        & .entry-header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.85rem;
            margin-bottom: 1.5rem;

            & .entry-badges-group {
                display: inline-flex;
                align-items: center;
                gap: 0.6rem;
                flex-wrap: wrap;

                & .post-type-badge {
                    display: flex;
                    align-items: center;
                    gap: .5rem;
                    font-weight: 500;
                    margin-right: 1rem;

                    & svg {
                        width: 16px;
                        height: 16px;
                    }
                }
            }

            & .entry-category-badge {
                display: inline-flex;
                align-items: center;
                padding: 0.35rem 0.85rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                background-color: color-mix(in srgb, var(--color-primary), transparent 88%);
                color: var(--color-primary-accent);
                text-decoration: none;
                border: 1px solid color-mix(in srgb, var(--color-primary), transparent 75%);
                transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

                &:hover {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 60%);
                }
            }

            & .entry-reading-time {
                display: inline-flex;
                align-items: center;
                gap: 0.45rem;
                font-size: 0.8rem;
                font-weight: 600;
                color: var(--color-text-muted);
                background-color: color-mix(in srgb, var(--bg-card), transparent 25%);
                padding: 0.35rem 0.75rem;
                border: 1px solid var(--border-light);
                border-radius: var(--badge-border-radius);

                & svg {
                    width: 14px;
                    height: 14px;
                    fill: currentColor;
                    opacity: 0.75;
                }
            }

            & .entry-meta-top-right {
                display: inline-flex;
                align-items: center;

                & .meta-likes .like-btn-container {
                    position: static;
                    opacity: 1;
                    display: inline-flex;
                }
            }
        }

        & .entry-title {
            font-size: clamp(2.2rem, 5vw, 3.4rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: var(--color-text-heading);
            margin: 0 0 1.25rem 0;
            text-wrap: balance;
            word-break: break-word;
        }

        & .entry-subtitle {
            margin: 0 0 1.75rem 0;
            padding-left: 1.25rem;
            border-left: 3px solid var(--color-primary);

            & p {
                font-size: clamp(1.1rem, 2vw, 1.25rem);
                line-height: 1.6;
                color: var(--color-text-body);
                margin: 0;
                font-weight: 400;
                font-style: italic;
            }
        }

        & .entry-meta-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.25rem;
            padding: 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-card);
            margin-top: 1.5rem;
            margin-bottom: 2rem;

            & .meta-author-side {
                display: flex;
                align-items: center;
                gap: 0.85rem;

                & .author-avatar-link {
                    display: block;
                    position: relative;
                    padding: 2px;
                    border-radius: 50%;
                    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-accent));
                    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

                    &:hover {
                        transform: scale(1.06);
                        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 60%);
                    }

                    & .author-avatar {
                        width: 44px;
                        height: 44px;
                        border-radius: 50%;
                        object-fit: cover;
                        display: block;
                    }
                }

                & .author-info {
                    display: flex;
                    flex-direction: column;
                    gap: 0.15rem;

                    & .author-byline {
                        font-size: 0.72rem;
                        text-transform: uppercase;
                        letter-spacing: 0.06em;
                        font-weight: 700;
                        color: var(--color-text-muted);
                    }

                    & .author-name {
                        font-size: 0.95rem;
                        font-weight: 700;
                        color: var(--color-text-heading);
                        text-decoration: none;
                        transition: color var(--transition-fast);

                        &:hover {
                            color: var(--color-primary-accent);
                        }
                    }
                }
            }

            & .meta-details-side {
                display: flex;
                align-items: center;
                gap: 1.25rem;
                flex-wrap: wrap;

                & .meta-item {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.45rem;
                    font-size: 0.85rem;
                    font-weight: 600;
                    color: var(--color-text-muted);
                    text-decoration: none;
                    transition: color var(--transition-fast);

                    & svg {
                        width: 15px;
                        height: 15px;
                        fill: currentColor;
                        opacity: 0.75;
                    }

                    &.meta-comments:hover {
                        color: var(--color-primary-accent);
                    }
                }

                & .meta-likes {
                    display: inline-flex;
                    align-items: center;
                }
            }

            @media (max-width: 680px) {
                flex-direction: column;
                align-items: stretch;
                padding: 1.1rem;
                gap: 1rem;

                & .meta-details-side {
                    width: 100%;
                    justify-content: space-between;
                    border-top: 1px solid var(--border-light);
                    padding-top: 0.85rem;
                }
            }
        }

        & .like-btn-container {
            position: static;
            opacity: 1;
            display: inline-flex;
            transition: all var(--transition-fast);

            &:hover,
            &.is-liked {
                background: color-mix(in srgb, #f43f5e, transparent 82%);
                border-color: color-mix(in srgb, #f43f5e, transparent 75%);
            }

            & .button__like {
                min-width: var(--size-button, 36px);
                height: var(--size-button, 36px);
                font-family: var(--font-family-base);
                background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                color: var(--color-text-heading);
                border: none;
                cursor: pointer;
                font-size: 0.95rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);

                &:active {
                    transform: scale(0.96);
                }

                & svg {
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    flex-shrink: 0;
                    transition: transform var(--transition-fast), fill var(--transition-fast), color var(--transition-fast);
                }

                & .like-count {
                    font-size: 0.9rem;
                    font-weight: 600;
                    line-height: 1;
                    display: inline-block;
                    max-width: 80px;
                    opacity: 1;
                    transform: scale(1);
                    overflow: hidden;
                    white-space: nowrap;
                    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

                    &.is-entering {
                        max-width: 0;
                        opacity: 0;
                        transform: scale(0.5);
                    }

                    &.is-leaving {
                        max-width: 0 !important;
                        opacity: 0 !important;
                        transform: scale(0.5) !important;
                    }

                    &:empty {
                        display: none;
                    }
                }

                &:has(.like-count:not(.is-leaving):not(:empty)) {
                    width: auto;
                    padding: 0 0.8rem;
                    gap: 0.5rem;
                }

                &:hover,
                &.liked {
                    color: #f43f5e;

                    & svg {
                        fill: #f43f5e;
                    }
                }

                &.liked {
                    background-color: var(--bg-card);
                    box-shadow: 0 0 12px rgba(244, 63, 94, 0.45), 0 3px 8px rgba(244, 63, 94, 0.3);
                }

                &.animating svg,
                &.animating-like svg {
                    animation: likePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }

                &.animating-unlike svg {
                    animation: unlikePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }
            }
        }
    }

    & .post-thumbnail {
        margin: 0 0 2.5rem 0;
        overflow: hidden;
        box-shadow: var(--shadow-card);
        background: #000;

        & img {
            width: 100%;
            height: auto;
            max-height: 560px;
            object-fit: cover;
            display: block;
            transition: transform var(--transition-smooth);

            &:hover {
                transform: scale(1.015);
            }
        }

        & .thumbnail-caption {
            padding: 0.75rem 1.25rem;
            font-size: 0.82rem;
            color: var(--color-text-muted);
            text-align: center;
            background: var(--bg-card);
            font-style: italic;
            border-top: 1px solid var(--border-light);
        }
    }

    & .entry-content {
        font-size: 1.15rem;
        line-height: 1.85;
        color: var(--color-text-body);
        margin-bottom: 2.5rem;

        & p {
            margin-bottom: 1.6rem;
        }

        & img {
            max-width: 100%;
            height: auto;
            border-radius: var(--badge-border-radius);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }
    }

    & .entry-footer {
        padding-top: 2rem;
        border-top: 1px solid var(--border-light);
        margin-top: 3rem;
        font-size: 0.92rem;
        color: var(--color-text-muted);
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        align-items: center;
        justify-content: space-between;

        & .cat-links,
        & .tags-links {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-text-muted);
        }

        & .cat-links {
            & a {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.35rem 0.8rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                line-height: 1;
                text-decoration: none;
                color: var(--color-primary-accent);
                background-color: color-mix(in srgb, var(--color-primary), transparent 88%);
                border: 1px solid color-mix(in srgb, var(--color-primary), transparent 75%);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

                &:hover {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    border-color: var(--color-primary);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 60%);
                }
            }
        }

        & .tags-links {

            & a,
            & .post-tag {
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                padding: 0.32rem 0.75rem;
                font-size: 0.76rem;
                font-weight: 600;
                line-height: 1;
                text-decoration: none;
                color: var(--color-text-heading);
                background-color: color-mix(in srgb, var(--bg-card), transparent 15%);
                border: 1px solid var(--border-light);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
                transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

                &::before {
                    content: '#';
                    color: var(--color-primary-accent);
                    font-weight: 700;
                    opacity: 0.85;
                    transition: color var(--transition-fast);
                }

                &:hover {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    border-color: var(--color-primary);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 55%);

                    &::before {
                        color: var(--color-white);
                        opacity: 1;
                    }
                }
            }
        }

        @media (max-width: 680px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
    }
}

/* =============================================================================
                   GUTENBERG FONT SIZE UTILITY CLASSES
   ============================================================================= */

.has-small-font-size {
    font-size: 0.875rem;
}

.has-normal-font-size,
.has-medium-font-size {
    font-size: 1.125rem;
}

.has-large-font-size {
    font-size: 1.5rem;
    line-height: 1.29;
    margin-top: 1.2rem;
    margin-bottom: 1.2lh;
}

.has-x-large-font-size {
    font-size: 2rem;
}

.has-xx-large-font-size,
.has-huge-font-size {
    font-size: 2.5rem;
    line-height: 1.2;
}

/* =============================================================================
                   S I N G L E   A U D I O   S T O R Y
   ============================================================================= */

.single-audio-story {
    & .single-audio-player-hero {
        position: relative;
        isolation: isolate;
        z-index: 0;
        margin: 2rem 0 2.5rem;
        min-height: 280px;
        height: 320px;
        box-shadow: var(--shadow-card);
        display: grid;
        grid-template-rows: 1fr auto;
        overflow: hidden;
        border-radius: var(--badge-border-radius);
        transition: box-shadow var(--transition-fast);

        & .audio-cover-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 50% 35%, var(--header-background) 0%, var(--color-secondary) 50%, color-mix(in srgb, var(--color-tertiary), var(--color-quaternary) 55%) 100%);

            & .audio-bg-glow {
                position: absolute;
                top: 45%;
                left: 50%;
                width: 320px;
                height: 320px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                background: radial-gradient(circle, color-mix(in srgb, var(--color-primary), transparent 46%) 0%, color-mix(in srgb, var(--accent-background-1), transparent 86%) 45%, transparent 70%);
                filter: blur(36px);
                opacity: 0.75;
                animation: audioGlowPulse 4.5s ease-in-out infinite alternate;
                pointer-events: none;
            }

            & .audio-bg-frequency-rings {
                position: absolute;
                top: 45%;
                left: 50%;
                width: 220px;
                height: 220px;
                margin-top: -110px;
                margin-left: -110px;
                border-radius: 50%;
                background: radial-gradient(circle,
                        color-mix(in srgb, var(--color-primary-accent, #47b23c) 22%, transparent) 0%,
                        color-mix(in srgb, var(--color-primary, #8bc34a) 12%, transparent) 40%,
                        color-mix(in srgb, var(--accent-background-2, #89c39d) 6%, transparent) 70%,
                        transparent 100%);
                box-shadow:
                    0 0 0 30px color-mix(in srgb, var(--color-primary-accent, #47b23c) 12%, transparent),
                    0 0 0 70px color-mix(in srgb, var(--color-primary, #8bc34a) 8%, transparent),
                    0 0 0 120px color-mix(in srgb, var(--accent-background-2, #89c39d) 5%, transparent),
                    0 0 0 180px color-mix(in srgb, var(--color-primary-light, #eff1e1) 25%, transparent);
                pointer-events: none;
                animation: audioWaveExpand 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    border-radius: 50%;
                    background: inherit;
                    box-shadow: inherit;
                    animation: audioWaveExpand 6s cubic-bezier(0.25, 1, 0.5, 1) infinite 3s;
                }
            }

            & .audio-bg-bars {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 55%;
                display: flex;
                align-items: flex-end;
                overflow: hidden;
                pointer-events: none;
                box-sizing: border-box;
                mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
                -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);

                & .audio-bars-spectrum {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: flex-end;
                    justify-content: space-between;
                    gap: 4px;
                    padding: 0 1rem;

                    & .spectrum-bar {
                        flex: 1 1 0;
                        max-width: 8px;
                        height: 100%;
                        border-radius: 4px 4px 1px 1px;
                        background: linear-gradient(180deg,
                                color-mix(in srgb, var(--accent-background-1, #89c39d) 90%, transparent) 0%,
                                color-mix(in srgb, var(--color-primary-accent, #47b23c) 75%, transparent) 45%,
                                color-mix(in srgb, var(--color-primary, #8bc34a) 40%, transparent) 100%);
                        box-shadow: 0 -2px 6px color-mix(in srgb, var(--color-primary-accent, #47b23c) 25%, transparent);
                        opacity: 0.35;
                        transform-origin: bottom center;
                        transform: scaleY(0.14);
                        transition: opacity var(--transition-normal), filter var(--transition-normal);
                        animation: spectrumDanceAmbient 2.2s ease-in-out infinite alternate;

                        /* Staggered Rhythm & Frequencies for Spectrum Bars */
                        &:nth-child(odd) {
                            animation-duration: 2.1s;
                        }

                        &:nth-child(even) {
                            animation-duration: 1.7s;
                        }

                        &:nth-child(3n) {
                            animation-duration: 2.5s;
                        }

                        &:nth-child(4n) {
                            animation-duration: 1.4s;
                        }

                        &:nth-child(5n) {
                            animation-duration: 2.8s;
                        }

                        &:nth-child(1) {
                            animation-delay: -0.2s;
                        }

                        &:nth-child(2) {
                            animation-delay: -0.7s;
                        }

                        &:nth-child(3) {
                            animation-delay: -1.3s;
                        }

                        &:nth-child(4) {
                            animation-delay: -0.5s;
                        }

                        &:nth-child(5) {
                            animation-delay: -1.8s;
                        }

                        &:nth-child(6) {
                            animation-delay: -0.9s;
                        }

                        &:nth-child(7) {
                            animation-delay: -1.5s;
                        }

                        &:nth-child(8) {
                            animation-delay: -0.3s;
                        }

                        &:nth-child(9) {
                            animation-delay: -1.1s;
                        }

                        &:nth-child(10) {
                            animation-delay: -1.7s;
                        }

                        &:nth-child(11) {
                            animation-delay: -0.4s;
                        }

                        &:nth-child(12) {
                            animation-delay: -1.2s;
                        }

                        &:nth-child(13) {
                            animation-delay: -0.8s;
                        }

                        &:nth-child(14) {
                            animation-delay: -1.6s;
                        }

                        &:nth-child(15) {
                            animation-delay: -0.6s;
                        }

                        &:nth-child(16) {
                            animation-delay: -1.4s;
                        }

                        &:nth-child(17) {
                            animation-delay: -0.1s;
                        }

                        &:nth-child(18) {
                            animation-delay: -1.9s;
                        }

                        &:nth-child(19) {
                            animation-delay: -0.7s;
                        }

                        &:nth-child(20) {
                            animation-delay: -1.3s;
                        }

                        &:nth-child(21) {
                            animation-delay: -0.4s;
                        }

                        &:nth-child(22) {
                            animation-delay: -1.5s;
                        }

                        &:nth-child(23) {
                            animation-delay: -0.8s;
                        }

                        &:nth-child(24) {
                            animation-delay: -1.2s;
                        }

                        &:nth-child(25) {
                            animation-delay: -0.5s;
                        }

                        &:nth-child(26) {
                            animation-delay: -1.7s;
                        }

                        &:nth-child(27) {
                            animation-delay: -0.9s;
                        }

                        &:nth-child(28) {
                            animation-delay: -0.3s;
                        }
                    }
                }
            }

            & .audio-bg-notes {
                position: absolute;
                inset: 0;
                overflow: hidden;
                pointer-events: none;

                & .music-note {
                    position: absolute;
                    color: color-mix(in srgb, var(--color-primary-accent, #47b23c), transparent 75%);
                    font-size: 1.25rem;
                    user-select: none;
                    animation: floatMusicNotes 8s ease-in-out infinite;

                    &.note-1 {
                        top: 20%;
                        left: 12%;
                        animation-delay: 0s;
                        font-size: 1.4rem;
                    }

                    &.note-2 {
                        top: 60%;
                        left: 8%;
                        animation-delay: 2.5s;
                        font-size: 1.1rem;
                    }

                    &.note-3 {
                        top: 18%;
                        right: 14%;
                        animation-delay: 1.2s;
                        font-size: 1.5rem;
                    }

                    &.note-4 {
                        top: 65%;
                        right: 10%;
                        animation-delay: 3.8s;
                        font-size: 1.2rem;
                    }

                    &.note-5 {
                        top: 40%;
                        right: 20%;
                        animation-delay: 5s;
                        font-size: 1rem;
                    }
                }
            }

            & .audio-cover-backdrop-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, color-mix(in srgb, var(--color-white), transparent 70%) 0%, transparent 40%, color-mix(in srgb, var(--footer-background), transparent 80%) 100%);
            }
        }

        & .audio-artwork-wrapper {
            position: relative;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto 0;
            cursor: pointer;
            perspective: 520px;
            perspective-origin: 50% 30%;

            & .audio-artwork-3d {
                position: relative;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                transform-style: preserve-3d;
                transform-origin: 50% 50%;
                transform: rotateX(50deg) rotateY(0deg) rotateZ(0deg) translateY(0) scale(1.4);
                transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
                will-change: transform;
            }

            & .audio-cover-art {
                position: relative;
                z-index: 2;
                width: 120px;
                height: 120px;
                border-radius: 4px;
                overflow: hidden;
                transform: translateZ(10px);
                box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.4), -2px 4px 0 rgba(0, 0, 0, 0.35);
                transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), box-shadow 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
                background: var(--bg-card);

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(130deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 60%);
                    pointer-events: none;
                    z-index: 3;
                }

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                & .audio-cover-placeholder {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: linear-gradient(135deg, var(--accent-background-1), var(--accent-background-2));
                    color: var(--color-white);
                }

                & .audio-cover-title-badge {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    z-index: 4;
                    padding: 2.5rem 0.35rem 0.25rem;
                    background: linear-gradient(0deg, #00000080, transparent);
                    pointer-events: none;
                    box-sizing: border-box;

                    & .audio-cover-title-text {
                        display: block;
                        color: var(--color-white);
                        font-size: 0.85rem;
                        font-weight: 700;
                        line-height: 1.2;
                        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        letter-spacing: 0.015em;
                        text-shadow: 0 1px 3px color-mix(in srgb, var(--color-black), transparent 20%);
                    }
                }
            }

            & .audio-vinyl-disc {
                position: absolute;
                width: 116px;
                height: 116px;
                border-radius: 50%;
                background: radial-gradient(circle, var(--color-text-body) 0%, var(--bg-dark) 40%, color-mix(in srgb, var(--bg-dark), var(--color-black) 70%) 75%, var(--color-black) 100%);
                transform: translateX(14px) translateZ(0);
                opacity: 0.95;
                transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.4s ease;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;

                &::before {
                    content: '';
                    position: absolute;
                    inset: 5px;
                    border-radius: 50%;
                    border: 1px dashed color-mix(in srgb, var(--color-white), transparent 92%);
                    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--color-black), transparent 45%),
                        inset 0 0 0 12px color-mix(in srgb, var(--color-white), transparent 96%),
                        inset 0 0 0 18px color-mix(in srgb, var(--color-black), transparent 35%);
                    pointer-events: none;
                }

                & .vinyl-center-label {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 2px solid var(--color-black);
                    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white), transparent 75%);
                    background: var(--color-primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }

                    & .vinyl-center-icon {
                        color: var(--color-white);
                        display: flex;
                    }
                }
            }
        }

        /* Hover and Playing States for Artwork and Vinyl */
        &:hover,
        &.is-playing {
            & .audio-cover-bg .audio-bg-bars .audio-bars-spectrum .spectrum-bar {
                opacity: 0.85;
                filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary-accent, #47b23c) 65%, transparent));
                animation-name: spectrumDanceActive;
                animation-direction: alternate;
                animation-iteration-count: infinite;
            }

            & .audio-artwork-wrapper {
                & .audio-artwork-3d {
                    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-15%) translateY(0) scale(1.4);
                }

                & .audio-cover-art {
                    transform: translateZ(16px);
                    box-shadow: -2px 3px 0 rgba(0, 0, 0, 0.45), -4px 6px 0 rgba(0, 0, 0, 0.35);
                }

                & .audio-vinyl-disc {
                    transform: translateX(48px) translateZ(0);
                    opacity: 1;
                }
            }
        }

        &.is-playing {
            & .audio-artwork-wrapper .audio-vinyl-disc {
                animation: vinylSpin 3.2s linear infinite;
            }

            & .audio-wave-equalizer {
                & .eq-bar-1 {
                    animation: eqDance 0.8s ease-in-out infinite alternate;
                }

                & .eq-bar-2 {
                    animation: eqDance 0.5s ease-in-out infinite 0.15s alternate;
                }

                & .eq-bar-3 {
                    animation: eqDance 0.7s ease-in-out infinite 0.3s alternate;
                }

                & .eq-bar-4 {
                    animation: eqDance 0.6s ease-in-out infinite 0.05s alternate;
                }
            }
        }

        & .custom-audio-controls {
            position: relative;
            z-index: 8;
            margin: 0 .5rem .5rem;
            padding: 0.65rem 1rem;
            background: color-mix(in srgb, var(--bg-card), transparent 10%);
            border: 1px solid color-mix(in srgb, var(--color-white), transparent 80%);
            box-shadow: var(--shadow-glass-controls);
            display: flex;
            align-items: center;
            gap: 0.65rem;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            isolation: isolate;

            & .audio-btn {
                background: transparent;
                border: none;
                color: var(--color-text-heading);
                cursor: pointer;
                padding: 0;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);

                &:hover {
                    color: var(--color-primary-accent);
                }

                &:active {
                    transform: scale(0.92);
                }

                & svg {
                    display: block;
                    width: 1.1rem;
                    height: 1.1rem;
                    flex-shrink: 0;
                    fill: currentColor;
                }

                &.play-pause-btn {
                    width: 34px;
                    height: 34px;
                    min-width: 34px;
                    border-radius: 50%;
                    background: var(--color-primary);
                    color: var(--color-white);
                    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-black), transparent 75%);

                    &:hover {
                        background: var(--color-primary-accent);
                        color: var(--color-white);
                        transform: scale(1.08);
                    }

                    &:active {
                        transform: scale(0.94);
                    }

                    & svg {
                        width: 1rem;
                        height: 1rem;
                    }
                }

                &.mute-btn {
                    width: 26px;
                    height: 26px;
                    min-width: 26px;

                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }

            & .audio-progress-container {
                flex: 1;
                height: 6px;
                background: color-mix(in srgb, var(--color-text-heading), transparent 85%);
                border-radius: 999px;
                cursor: pointer;
                position: relative;
                overflow: visible;
                display: flex;
                align-items: center;
                transition: height var(--transition-fast);

                &:hover {
                    height: 8px;

                    & .audio-progress-handle {
                        opacity: 1;
                        transform: scale(1);
                    }
                }

                & .audio-buffer-bar {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 0%;
                    background: color-mix(in srgb, var(--color-text-heading), transparent 75%);
                    border-radius: 999px;
                    pointer-events: none;
                    transition: width 0.2s ease;
                }

                & .audio-progress-bar {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 0%;
                    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-accent));
                    border-radius: 999px;
                    pointer-events: none;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    transition: width 0.05s linear;
                }

                & .audio-progress-handle {
                    position: absolute;
                    right: -4px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: var(--color-white);
                    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-black), transparent 60%);
                    opacity: 0;
                    transform: scale(0.7);
                    transition: opacity var(--transition-fast), transform var(--transition-fast);
                }
            }

            & .audio-time-display {
                color: var(--color-text-heading);
                font-size: 0.8rem;
                font-weight: 600;
                letter-spacing: 0.02em;
                white-space: nowrap;
                font-variant-numeric: tabular-nums;
                opacity: 0.85;
            }

            & .audio-wave-equalizer {
                display: flex;
                align-items: flex-end;
                gap: 2px;
                height: 16px;
                padding: 0 2px;

                & .eq-bar {
                    width: 3px;
                    height: 4px;
                    background: var(--color-primary-accent);
                    border-radius: 1px;
                    transition: height 0.2s ease;
                }
            }
        }

        & .entry-audio-iframe {
            position: relative;
            z-index: 5;
            margin: 0 1rem 1rem;
            border-radius: var(--badge-border-radius);
            overflow: hidden;

            & iframe {
                width: 100%;
                border: none;
                display: block;
            }
        }
    }
}

/* =============================================================================
                   S I N G L E   I M A G E   S T O R Y
   ============================================================================= */

.single-image-story {
    & .image-theater-section {
        margin: 0;
        position: relative;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;

        & .theater-media-frame {
            margin: 0;
            position: relative;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            & .theater-image-wrapper {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                max-height: 78vh;
                width: 100%;
                overflow: hidden;

                & .theater-image {
                    width: auto;
                    max-width: 100%;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
                    cursor: zoom-in;
                    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

                    &:hover {
                        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
                    }
                }
            }

            & .theater-info-bar {
                width: 100%;
                box-sizing: border-box;
                background: var(--bg-card, #ffffff);
                border: 1px solid var(--border-light, #e1e8ed);
                display: flex;
                flex-direction: column;
                box-shadow: var(--shadow-card);

                & .theater-header {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    padding: 1rem;

                    & .theater-title {
                        margin: 0;
                        color: var(--color-text-heading, #1a1a1a);
                        font-size: 1.15rem;
                        font-weight: 700;
                        line-height: 1.3;
                    }

                    & .theater-caption {
                        margin: 0;
                        color: var(--color-text-muted, #718096);
                        font-size: 0.88rem;
                        font-style: italic;
                        line-height: 1.4;
                    }
                }

                & .theater-meta-group {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 0.5rem;
                    border-top: 1px solid var(--border-light, #e1e8ed);
                    padding: 1rem;

                    & .theater-meta-item {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.35rem;
                        background: var(--bg-body, #f5f7f5);
                        border: 1px solid var(--border-light, #e1e8ed);
                        padding: 0.28rem 0.7rem;
                        font-size: 0.75rem;
                        font-weight: 600;
                        color: var(--color-text-body, #4a5568);

                        & svg {
                            color: var(--color-primary-accent, #47b23c);
                            flex-shrink: 0;
                        }
                    }

                    & .theater-btn {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.4rem;
                        margin-left: auto;
                        padding: 0.41rem 0.85rem;
                        height: 29.34px;
                        background: var(--color-primary, #8bc34a);
                        color: #0b1510;
                        border: none;
                        font-size: 0.75rem;
                        font-weight: 700;
                        cursor: pointer;
                        transition: background-color var(--transition-fast), transform var(--transition-fast);

                        &:hover {
                            background: var(--color-primary-hover, #7cb342);
                            color: #000000;
                            transform: translateY(-1px);
                        }

                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }

    & .image-story-content {
        font-size: 1.15rem;
        line-height: 1.8;
    }
}

/* =============================================================================
                   S I N G L E   G A L L E R Y   S T O R Y
   ============================================================================= */

.single-gallery-story {
    & .gallery-theater-section {
        margin: 2rem 0 2.5rem;
        position: relative;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;

        & .theater-media-frame {
            margin: 0;
            position: relative;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            & .gallery-theater-slideshow {
                margin: 0;
                width: 100%;
                max-width: 100%;
                background-color: transparent;
                box-shadow: none;

                & .theater-slides-wrapper {
                    height: 70vh;
                    min-height: 440px;
                    max-height: 760px;
                    position: relative;
                    width: 100%;
                    overflow: hidden;

                    & .slide-item {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        visibility: hidden;
                        transform: scale(1.01);
                        transition: opacity var(--transition-smooth, 0.4s ease), transform var(--transition-smooth, 0.4s ease), visibility 0.4s ease;
                        z-index: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.is-active {
                            opacity: 1;
                            visibility: visible;
                            transform: scale(1);
                            z-index: 2;
                        }

                        & .theater-image {
                            max-width: 100%;
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            border: none;
                            box-shadow: none;
                            cursor: zoom-in;
                        }
                    }
                }

                & .theater-slideshow-bottom-bar {
                    position: relative;
                    bottom: 0;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1rem;
                    padding: 0.5rem 0;
                    z-index: 8;

                    & .slideshow-control-container {
                        opacity: 1;
                    }

                    & .slideshow-control {
                        min-width: var(--size-button, 36px);
                        height: var(--size-button, 36px);
                        font-family: var(--font-family-base);
                        background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                        color: var(--color-text-heading);
                        border: none;
                        cursor: pointer;
                        font-size: 1.05rem;
                        font-weight: 600;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        line-height: 1;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                        transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);

                        &:hover {
                            color: var(--color-primary-accent);
                        }

                        &:active {
                            transform: scale(.96);
                        }

                        & svg {
                            display: block;
                            width: 1.1rem;
                            height: 1.1rem;
                            flex-shrink: 0;
                        }
                    }

                    & .slideshow-dots {
                        display: flex;
                        align-items: center;
                        gap: 1rem;

                        & .dot-nav {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: color-mix(in srgb, var(--color-text-muted, #718096), transparent 50%);
                            cursor: pointer;
                            transition: background var(--transition-normal), transform var(--transition-normal);

                            &:hover,
                            &.is-active {
                                background: var(--color-primary, #8bc34a);
                                transform: scale(1.3);
                            }
                        }
                    }

                    & .slideshow-counter-container {
                        opacity: 1;

                        & .slideshow-counter {
                            height: var(--size-button, 36px);
                            padding: 0 0.75rem;
                            background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                            color: var(--color-text-heading);
                            border: 1px solid var(--border-light, #e1e8ed);
                            font-size: 0.85rem;
                            font-weight: 600;
                            letter-spacing: 0.05em;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            line-height: 1;
                            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                        }
                    }
                }
            }

            & .theater-info-bar {
                width: 100%;
                box-sizing: border-box;
                background: var(--bg-card, #ffffff);
                border: 1px solid var(--border-light, #e1e8ed);
                border-radius: var(--badge-border-radius);
                display: flex;
                flex-direction: column;
                box-shadow: var(--shadow-card);

                & .theater-header {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    padding: 1rem;

                    & .theater-title {
                        margin: 0;
                        color: var(--color-text-heading, #1a1a1a);
                        font-size: 1.15rem;
                        font-weight: 700;
                        line-height: 1.3;
                    }

                    & .theater-caption {
                        margin: 0;
                        color: var(--color-text-muted, #718096);
                        font-size: 0.88rem;
                        font-style: italic;
                        line-height: 1.4;
                    }
                }

                & .theater-meta-group {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 0.5rem;
                    padding: 1rem;
                    border-top: 1px solid var(--border-light, #e1e8ed);

                    & .theater-meta-item {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.35rem;
                        background: var(--bg-body, #f5f7f5);
                        border: 1px solid var(--border-light, #e1e8ed);
                        padding: 0.28rem 0.7rem;
                        font-size: 0.75rem;
                        font-weight: 600;
                        color: var(--color-text-body, #4a5568);

                        & svg {
                            color: var(--color-primary-accent, #47b23c);
                            flex-shrink: 0;
                        }
                    }

                    & .theater-btn {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.4rem;
                        margin-left: auto;
                        padding: 0.41rem 0.85rem;
                        height: 29.34px;
                        background: var(--color-primary, #8bc34a);
                        color: #0b1510;
                        border: none;
                        font-size: 0.75rem;
                        font-weight: 700;
                        cursor: pointer;
                        transition: background-color var(--transition-fast), transform var(--transition-fast);

                        &:hover {
                            background: var(--color-primary-hover, #7cb342);
                            color: #000000;
                            transform: translateY(-1px);
                        }

                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }

    & .gallery-story-content {
        font-size: 1.15rem;
        line-height: 1.8;

        & .wp-block-gallery,
        & .gallery {
            display: none !important;
        }
    }
}

/* =============================================================================
                   S I N G L E   A S I D E   S T O R Y
   ============================================================================= */

.single-aside-story {
    & .aside-post-thumbnail {
        margin: 2rem 0;

        & img {
            width: 100%;
            height: auto;
            border-radius: var(--badge-border-radius);
            box-shadow: var(--shadow-card);
            display: block;
        }

        & .thumbnail-caption {
            font-size: 0.85rem;
            color: var(--color-text-muted);
            margin-top: 0.5rem;
            font-style: italic;
        }
    }

    & .aside-single-card {
        border: 1px solid var(--border-light, #e1e8ed);
        box-shadow: var(--shadow-card);
        margin: 2rem 0 3rem;
        min-height: 280px;
        height: auto;
        overflow: hidden;
        position: relative;
        isolation: isolate;
        --notebook-line-height: 2rem;
        background-color: #fefefa;
        background-image:
            repeating-linear-gradient(to bottom,
                transparent,
                transparent calc(var(--notebook-line-height) - 1px),
                #d1dbe6 calc(var(--notebook-line-height) - 1px),
                #d1dbe6 var(--notebook-line-height));
        background-size: 100% var(--notebook-line-height);
        background-position: 0 calc(var(--notebook-line-height) - 0.35rem);

        /* Red margin line spanning full height */
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 48px;
            width: 0;
            height: 100%;
            border-left: 2px solid #e8747480;
            pointer-events: none;
            z-index: 2;
        }

        & .aside-decor {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;

            & .aside-holes {
                position: absolute;
                top: 0;
                left: 18px;
                width: 16px;
                height: 100%;
                pointer-events: none;
                z-index: 3;

                & .aside-hole {
                    position: absolute;
                    left: 0;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: var(--bg-body, #f5f7f5);
                    box-shadow:
                        inset 0 2px 6px color-mix(in srgb, var(--shadow-color), transparent 80%),
                        inset 0 1px 4px color-mix(in srgb, var(--shadow-color), transparent 74%),
                        0 1px 0 color-mix(in srgb, var(--bg-body), transparent 80%);

                    /* Renglones pares en single aside (2, 4, 6, 8, 10, 12, 14, 16...) */
                    &:nth-child(1) {
                        top: calc(var(--notebook-line-height) * 2 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(2) {
                        top: calc(var(--notebook-line-height) * 4 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(3) {
                        top: calc(var(--notebook-line-height) * 6 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(4) {
                        top: calc(var(--notebook-line-height) * 8 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(5) {
                        top: calc(var(--notebook-line-height) * 10 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(6) {
                        top: calc(var(--notebook-line-height) * 12 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(7) {
                        top: calc(var(--notebook-line-height) * 14 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(8) {
                        top: calc(var(--notebook-line-height) * 16 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(9) {
                        top: calc(var(--notebook-line-height) * 18 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(10) {
                        top: calc(var(--notebook-line-height) * 20 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(11) {
                        top: calc(var(--notebook-line-height) * 22 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(12) {
                        top: calc(var(--notebook-line-height) * 24 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(13) {
                        top: calc(var(--notebook-line-height) * 26 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(14) {
                        top: calc(var(--notebook-line-height) * 28 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(15) {
                        top: calc(var(--notebook-line-height) * 30 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(16) {
                        top: calc(var(--notebook-line-height) * 32 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(17) {
                        top: calc(var(--notebook-line-height) * 34 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(18) {
                        top: calc(var(--notebook-line-height) * 36 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(19) {
                        top: calc(var(--notebook-line-height) * 38 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(20) {
                        top: calc(var(--notebook-line-height) * 40 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(21) {
                        top: calc(var(--notebook-line-height) * 42 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(22) {
                        top: calc(var(--notebook-line-height) * 44 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(23) {
                        top: calc(var(--notebook-line-height) * 46 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(24) {
                        top: calc(var(--notebook-line-height) * 48 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(25) {
                        top: calc(var(--notebook-line-height) * 50 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(26) {
                        top: calc(var(--notebook-line-height) * 52 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(27) {
                        top: calc(var(--notebook-line-height) * 54 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(28) {
                        top: calc(var(--notebook-line-height) * 56 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(29) {
                        top: calc(var(--notebook-line-height) * 58 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(30) {
                        top: calc(var(--notebook-line-height) * 60 - (var(--notebook-line-height) / 2) - 14px);
                    }
                }
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23faf8f4'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23f0ece4' fill-opacity='0.4'/%3E%3C/svg%3E");
                opacity: 0.5;
                pointer-events: none;
                z-index: 0;
            }
        }

        & .aside-single-content {
            font-size: 1.2rem;
            line-height: var(--notebook-line-height, 2rem);
            padding: 1.5rem 2rem 1.5rem 4.5rem;
            color: var(--color-text-body, #2d3748);
            position: relative;
            z-index: 3;

            & p {
                margin: 0 0 var(--notebook-line-height, 2rem);
                line-height: var(--notebook-line-height, 2rem);
                color: inherit;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

/* ==========================================================================
   Dedicated Post Navigation Section Styling - Loop Cards Design
   ========================================================================== */
/* Custom post navigation section override - Expanding Corner Wave Animation */
section.block.posts--body.container--related-posts.post-navigation-block {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary-light, #eff1e1) 60%, var(--bg-card, #ffffff)) 0%,
            var(--bg-card, #ffffff) 30%,
            var(--bg-card, #ffffff) 70%,
            color-mix(in srgb, var(--accent-background-2, #89c39d) 15%, var(--bg-card, #ffffff)) 100%);
    border-top: 1px solid color-mix(in srgb, var(--color-primary-accent, #47b23c) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary-accent, #47b23c) 18%, transparent);

    /* Expanding Wave Animation originating from Top-Left corner expanding towards Bottom-Right */
    &::before {
        content: '';
        position: absolute;
        top: -100px;
        left: -100px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle,
                color-mix(in srgb, var(--color-primary-accent, #47b23c) 22%, transparent) 0%,
                color-mix(in srgb, var(--color-primary, #8bc34a) 12%, transparent) 40%,
                color-mix(in srgb, var(--accent-background-2, #89c39d) 6%, transparent) 70%,
                transparent 100%);
        box-shadow:
            0 0 0 35px color-mix(in srgb, var(--color-primary-accent, #47b23c) 12%, transparent),
            0 0 0 80px color-mix(in srgb, var(--color-primary, #8bc34a) 8%, transparent),
            0 0 0 135px color-mix(in srgb, var(--accent-background-2, #89c39d) 5%, transparent),
            0 0 0 200px color-mix(in srgb, var(--color-primary-light, #eff1e1) 25%, transparent);
        pointer-events: none;
        z-index: 0;
        animation: cornerWaveExpand 7s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }

    /* Rich multi-corner ambient radial gradients */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 45% 55% at 0% 0%, color-mix(in srgb, var(--color-primary, #8bc34a) 18%, transparent) 0%, transparent 70%),
            radial-gradient(ellipse 45% 55% at 100% 100%, color-mix(in srgb, var(--color-primary-accent, #47b23c) 18%, transparent) 0%, transparent 70%),
            radial-gradient(ellipse 35% 45% at 100% 0%, color-mix(in srgb, var(--accent-background-2, #89c39d) 14%, transparent) 0%, transparent 65%),
            radial-gradient(ellipse 35% 45% at 0% 100%, color-mix(in srgb, var(--color-primary-light, #eff1e1) 60%, transparent) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
    }

    & .post-nav-bg-decor {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
        background-image: radial-gradient(color-mix(in srgb, var(--color-primary-accent, #47b23c) 10%, transparent) 1px, transparent 1px);
        background-size: 24px 24px;
    }

    & .content.related-posts--title,
    & .content.slideshow-wrapper,
    & .slideshow-mask-container {
        position: relative;
        z-index: 2;
    }

    & .content.related-posts--title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(100% - 2rem, var(--container-max-width, 1366px));
        margin-inline: auto;
        padding-bottom: 1rem;

        & .title-section {
            margin: 0;
        }

        & .navigation.post-nav-title-controls {
            height: auto;
            padding: 4px;
            background-color:
                color-mix(in srgb, var(--color-text-heading), transparent 80%);
            border: 1px solid color-mix(in srgb, var(--color-text-heading), transparent 86%);
            box-shadow: inset 0 2px 4px color-mix(in srgb, var(--color-text-heading), transparent 86%), inset 0 1px 2px color-mix(in srgb, var(--color-text-heading), transparent 80%), 0 1px 0 color-mix(in srgb, var(--color-white), transparent 50%);
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            opacity: 1;
            position: relative;
            flex-shrink: 0;
            gap: 5px;

            & .btn-pagination {
                min-width: var(--size-button, 36px);
                height: var(--size-button, 36px);
                font-family: var(--font-family-base);
                background-color:
                    color-mix(in srgb, var(--bg-card), transparent 8%);
                color: var(--color-text-heading);
                border: none;
                cursor: pointer;
                font-size: 1.05rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
            }
        }
    }

    & .slideshow-mask-container {
        padding-bottom: 3.5rem;
    }
}

@keyframes cornerWaveExpand {
    0% {
        transform: scale(0.4) translate(0, 0);
        opacity: 0.25;
    }

    50% {
        transform: scale(2.4) translate(25%, 25%);
        opacity: 0.85;
    }

    100% {
        transform: scale(4.8) translate(50%, 50%);
        opacity: 0;
    }
}

.nav-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    & .story-card {
        width: 100%;
    }

    & .nav-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.65rem;
        width: 100%;

        & .nav-badge.time-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: lowercase;
            letter-spacing: 0.03em;
            color: var(--color-primary-accent, #47b23c);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.25s ease, transform 0.25s ease;
            white-space: nowrap;

            &:hover {
                color: var(--color-primary, #8bc34a);
                transform: translateY(-1px);
            }
        }

        & .nav-badge.count-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.25rem 0.65rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            background-color: var(--color-primary-light, #eff1e1);
            color: var(--color-primary-accent, #47b23c);
            border: 1px solid color-mix(in srgb, var(--color-primary-accent, #47b23c) 25%, transparent);
            white-space: nowrap;
        }
    }
}
/* =============================================================================
                            K E Y F R A M E S
   ============================================================================= */

/* format audio */
@keyframes audioGlowPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.65;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.16);
        opacity: 0.95;
    }
}

@keyframes audioWaveExpand {
    0% {
        transform: scale(0.35);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.85;
    }

    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

@keyframes floatMusicNotes {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(-40px) rotate(15deg);
        opacity: 0;
    }
}

@keyframes spectrumDanceAmbient {
    0% {
        transform: scaleY(0.08);
    }

    50% {
        transform: scaleY(0.32);
    }

    100% {
        transform: scaleY(0.18);
    }
}

@keyframes spectrumDanceActive {
    0% {
        transform: scaleY(0.12);
    }

    25% {
        transform: scaleY(0.72);
    }

    50% {
        transform: scaleY(0.38);
    }

    75% {
        transform: scaleY(0.96);
    }

    100% {
        transform: scaleY(0.22);
    }
}

@keyframes eqDance {
    0% {
        height: 3px;
    }

    50% {
        height: 12px;
    }

    100% {
        height: 6px;
    }
}

/* Vinyl Disc Spin Animation */
@keyframes vinylSpin {
    0% {
        transform: translateX(40px) translateZ(0) rotate(0deg);
    }

    100% {
        transform: translateX(40px) translateZ(0) rotate(360deg);
    }
}

/* Like Button animation */
@keyframes likePulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes unlikePulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Post Tags Scroll Mask Animation */
@keyframes post-tags-mask-fade {
    0% {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
    }

    4%,
    96% {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
    }

    100% {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black 100%);
    }
}

@supports (animation-timeline: scroll()) {
    .post--tags {
        animation: post-tags-mask-fade linear both;
        animation-timeline: scroll(self inline);
    }

    .entry-body {
        animation: entry-body-mask-fade linear both;
        animation-timeline: scroll(self block);
    }
}

/* Entry Body Scroll Mask Animation (Vertical) */
@keyframes entry-body-mask-fade {
    0% {
        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
        mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
    }

    4%,
    96% {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
        mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
    }

    100% {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black 100%), linear-gradient(black, black);
        mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black 100%), linear-gradient(black, black);
    }
}