/* Scroll reveal and the now-featuring bar.
   Reveal stays visible unless html.js is set and the visitor has no
   reduced-motion preference. motion.js adds that class only after it
   has marked items already on screen. */

.cover-grid > :nth-child(4n + 1),
.stories-grid > :nth-child(4n + 1) {
    --reveal-i: 0;
}

.cover-grid > :nth-child(4n + 2),
.stories-grid > :nth-child(4n + 2) {
    --reveal-i: 1;
}

.cover-grid > :nth-child(4n + 3),
.stories-grid > :nth-child(4n + 3) {
    --reveal-i: 2;
}

.cover-grid > :nth-child(4n + 4),
.stories-grid > :nth-child(4n + 4) {
    --reveal-i: 3;
}

@media (prefers-reduced-motion: no-preference) {
    html.js .cover-grid > :not(.is-revealed),
    html.js .stories-grid > :not(.is-revealed) {
        opacity: 0;
        transform: translateY(var(--space-12));
    }

    html.js .cover-grid > .is-revealed,
    html.js .stories-grid > .is-revealed {
        opacity: 1;
        transform: none;
        transition:
            opacity var(--duration-reveal) var(--ease-standard),
            transform var(--duration-reveal) var(--ease-standard);
        transition-delay: calc(var(--reveal-i, 0) * var(--duration-reveal));
    }

    html.js .cover-grid > :focus,
    html.js .cover-grid > :focus-within,
    html.js .stories-grid > :focus,
    html.js .stories-grid > :focus-within {
        opacity: 1;
        transform: none;
    }
}

html.motion-off .cover-grid > *,
html.motion-off .stories-grid > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.now-bar {
    position: fixed;
    z-index: 1020;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: var(--space-8) var(--page-gutter);
    background: var(--color-ink-900);
    color: var(--color-text);
    border-top: 1px solid var(--color-line);
    box-shadow: var(--shadow-raised);
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition:
        transform var(--duration-reveal) var(--ease-standard),
        visibility 0s linear var(--duration-reveal);
}

.now-bar.is-visible {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        transform var(--duration-reveal) var(--ease-standard),
        visibility 0s linear 0s;
}

.now-bar-cover {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    object-fit: cover;
    border-radius: var(--radius-6);
}

.now-bar-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.now-bar-kicker {
    color: var(--color-brand-text);
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    font-weight: 500;
    letter-spacing: var(--tracking-meta);
    line-height: var(--leading-heading);
    text-transform: uppercase;
}

.now-bar-title {
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-16);
    font-weight: 700;
    letter-spacing: var(--tracking-display-open);
    line-height: var(--leading-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.now-bar-listen,
.now-bar-listen:visited {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-16);
    border-radius: var(--radius-pill);
    background: var(--color-green-400);
    color: #0b0c0b;
    font-family: var(--font-display);
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.now-bar-listen:hover {
    background: var(--color-green-600);
    color: #fff;
}

.now-bar-dismiss {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font-size: var(--fs-20);
    line-height: 1;
}

@media (max-width: 430px) {
    .now-bar {
        gap: var(--space-8);
        padding-inline: var(--space-12);
    }

    .now-bar-listen,
    .now-bar-listen:visited {
        padding-inline: var(--space-12);
        font-size: var(--fs-12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .now-bar,
    .now-bar.is-visible {
        transition: none;
    }
}