/* ── Section ── */
.promos-section {
    position: relative;
    margin-top: -132px;
    margin-bottom: 132px;
    overflow: hidden;
}

/* ── Header ── */
.promos-header {
    text-align: center;
    margin-top: 3rem;
    padding: 0 1.5rem;
}

.promos-label {
    display: inline-block;
    font-family: var(--font-heading-family);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red, #cc0000);
    background: rgba(204, 0, 0, 0.08);
    border: 1.5px solid rgba(204, 0, 0, 0.2);
    border-radius: 999px;
    padding: 0.3rem 1rem;
    margin-bottom: 1rem;
}

.promos-title {
    font-family: var(--font-heading-family);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: #1a1a1a;
    line-height: 1;
    margin: 0 0 0.75rem;
}

    .promos-title span {
        color: var(--red, #cc0000);
    }

.promos-sub {
    font-family: var(--font-heading-family);
    font-size: 1rem;
    color: var(--red);
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Collage wrapper ── */
.promos-collage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ── Row shell ── */
.promos-row {
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

    .promos-row::-webkit-scrollbar {
        display: none;
    }

    .promos-row.is-dragging {
        cursor: grabbing;
        user-select: none;
    }

.promos-row-track {
    display: flex;
    gap: 14px;
    width: max-content;
    padding: 0.5rem 4rem;
}

/* ── Card ── */
.promo-card {
    position: relative;
    flex-shrink: 0;
    width: auto;
    height: 420px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .promo-card:hover {
        box-shadow: 8px 8px 0px var(--yellow);
        z-index: 2;
    }

    .promo-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
        transition: transform 0.4s cubic-bezier(.22,1,.36,1);
    }

    .promo-card:hover img {
        transform: scale(1.05);
    }

/* ── View button ── */
.promo-card__view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-end;
    font-family: var(--font-heading-family);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark-red);
    background: var(--yellow);
    border: 2px solid var(--dark-red);
    border-radius: 6px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--dark-red);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    pointer-events: auto;
    position: relative;
    z-index: 5;
}

    .promo-card__view-btn:hover {
        box-shadow: 4px 4px 0 var(--dark-red);
        transform: translateY(-2px);
    }

    .promo-card__view-btn:active {
        box-shadow: 1px 1px 0 var(--dark-red);
        transform: translateY(0);
    }

/* ── Limited-time chip (shared base + placement variants) ── */
.limited-chip-base {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading-family);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dark-red);
    background: var(--yellow, #ffd200);
    border: solid 1.5px var(--yellow);
    border-radius: 4px;
    padding: 0.22rem 0.65rem 0.22rem 0.45rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.75);
    animation: chipPop 0.4s cubic-bezier(.22,1,.36,1) both;
    animation-delay: 0.15s;
}

.promo-card__limited-chip {
    top: 18px;
    right: 18px;
}

.promo-modal__limited-chip {
    top: 18px;
    right: 52px;
}

@keyframes chipPop {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Pulsing dot inside chip */
.promo-card__limited-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red, #cc0000);
    flex-shrink: 0;
    animation: dotPulse 1.4s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

/* ── Animated spinning border (limited cards) ── */
@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes borderSpin {
    to {
        --border-angle: 360deg;
    }
}

.promo-card.is-limited::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 14px;
    padding: 8px;
    background: conic-gradient( from var(--border-angle, 0deg), rgba(255, 210, 0, 0), rgba(255, 210, 0, 0.9) 20%, var(--red) 40%, rgba(255, 210, 0, 0.9) 60%, rgba(255, 210, 0, 0) );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderSpin 3s linear infinite;
    pointer-events: none;
}

.promo-card.is-limited:hover {
    box-shadow: 0 0 0 3px rgba(255, 210, 0, 0.9), 0 0 32px rgba(255, 210, 0, 0.5), 8px 8px 0px var(--red);
}

/* ── Overlay ── */
.promo-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #ffad2d87 0%, transparent 55%);
    display: flex;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    gap: 0.3rem;
    z-index: 2;
    transition: background 0.3s ease;
    flex-direction: row;
    align-items: flex-end;
    overflow-wrap: break-word;
}

.promo-card:hover .promo-card__overlay {
    background: linear-gradient(to top, rgba(140,0,0,0.82) 0%, transparent 65%);
}

.promo-card__tag {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-sheading-family);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--yellow, #ffcc00);
    color: #1a1a1a;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}

.promo-card__name {
    font-family: var(--font-heading-family);
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.3;
    width: 50%;
    text-overflow: ellipsis;
}

/* ── Rays canvas overlay ── */
.promos-rays-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Lightbox backdrop ── */
.promo-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: backdropIn 0.25s ease both;
    overflow: hidden;
}

@keyframes backdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── Rays inside backdrop (modal) ── */
.promo-modal-backdrop__rays {
    position: absolute;
    width: 300vmax;
    height: 300vmax;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    background: conic-gradient( from 0deg, transparent 0deg, rgba(255, 210, 0, 0.18) 6deg, transparent 14deg, transparent 58deg, rgba(255, 210, 0, 0.18) 64deg, transparent 72deg, transparent 118deg, rgba(255, 210, 0, 0.18) 124deg, transparent 132deg, transparent 178deg, rgba(255, 210, 0, 0.18) 184deg, transparent 192deg, transparent 238deg, rgba(255, 210, 0, 0.18) 244deg, transparent 252deg, transparent 298deg, rgba(255, 210, 0, 0.18) 304deg, transparent 312deg );
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 35%, transparent 65%);
    mask-image: radial-gradient(ellipse at center, black 0%, black 35%, transparent 65%);
    animation: shineRotate 12s linear infinite;
    pointer-events: none;
    opacity: 50%;
}

@keyframes shineRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Modal sits above rays */
.promo-modal {
    position: relative;
    z-index: 1;
    max-width: min(90vw, 680px);
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    animation: modalIn 0.35s cubic-bezier(.22,1,.36,1) both;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(28px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.promo-modal-backdrop.is-limited .promo-modal {
    animation: modalIn 0.35s cubic-bezier(.22,1,.36,1) both, modalBorderPulse 2s ease-in-out infinite;
}

@keyframes modalBorderPulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(255, 210, 0, 0.4), 0 0 24px rgba(255, 210, 0, 0.2);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(255, 210, 0, 0.9), 0 0 24px rgba(255, 210, 0, 0.4);
    }
}

.promo-modal__img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 52px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.promo-modal__caption {
    width: 100%;
    font-family: var(--font-heading-family);
    font-size: 1.25rem;
    color: var(--off-white);
    text-align: center;
    padding: 1rem;
    margin: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--red);
    border-top: 7px solid white;
    flex-shrink: 0;
}

/* ── Close button ── */
.promo-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .promo-modal__close:hover {
        background: var(--red, #cc0000);
        transform: rotate(90deg);
    }

    .promo-modal__close span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 999px;
    }

        .promo-modal__close span:nth-child(1) {
            transform: translateY(1px) rotate(45deg);
        }

        .promo-modal__close span:nth-child(2) {
            transform: translateY(-1px) rotate(-45deg);
        }

/* ── Mobile ── */
@media (max-width: 959px) {
    .promos-section {
        padding-top: 24px;
        margin-top: 0;
    }

    .promos-row-track {
        padding: 0.5rem 1rem;
    }

    .promo-card {
        width: 200px;
        height: auto;
    }
}