/* =========================================
   HERO CARD DECK — Fanned hand-of-cards
   5 marketing screenshot tiles, auto-cycling
   with swipe/drag interaction.
   ========================================= */

.card-deck {
    position: relative;
    width: clamp(200px, 26vh, 250px);
    height: clamp(430px, 56vh, 540px);
    z-index: 1;
}

.card-deck__card {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    overflow: hidden;
    transform-origin: bottom center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    /* Shadow depth per card offset */
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06);
    transition:
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.45s ease,
        box-shadow 0.45s ease;
    will-change: transform, opacity;
}

.card-deck__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Card positions by index offset from active ─────────────────── */

/* Active card */
.card-deck__card[data-offset="0"] {
    transform: rotate(0deg) translateY(0px) scale(1);
    opacity: 1;
    z-index: 5;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(244, 123, 37, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* -1 card (left of active) */
.card-deck__card[data-offset="-1"] {
    transform: rotate(-10deg) translateY(20px) translateX(-20px) scale(0.93);
    opacity: 0.82;
    z-index: 4;
}

/* -2 card */
.card-deck__card[data-offset="-2"] {
    transform: rotate(-20deg) translateY(36px) translateX(-38px) scale(0.86);
    opacity: 0.6;
    z-index: 3;
}

/* +1 card (right of active) */
.card-deck__card[data-offset="1"] {
    transform: rotate(10deg) translateY(20px) translateX(20px) scale(0.93);
    opacity: 0.82;
    z-index: 4;
}

/* +2 card */
.card-deck__card[data-offset="2"] {
    transform: rotate(20deg) translateY(36px) translateX(38px) scale(0.86);
    opacity: 0.6;
    z-index: 3;
}

/* Cards far out of view */
.card-deck__card[data-offset="hidden"] {
    transform: rotate(0deg) translateY(60px) scale(0.7);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Active state lift ───────────────────────────────────────────── */

.card-deck:hover .card-deck__card[data-offset="0"] {
    transform: rotate(0deg) translateY(-12px) scale(1.03);
}

/* ── Dot indicators ──────────────────────────────────────────────── */

.card-deck__dots {
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    z-index: 10;
}

.card-deck__dot {
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.card-deck__dot::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(26, 18, 8, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.card-deck__dot.is-active::after {
    background: var(--clr-primary);
    transform: scale(1.4);
}

/* ── Pause/play toggle ───────────────────────────────────────────── */

.card-deck__pause {
    position: absolute;
    bottom: -54px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--clr-text-dark, #1a1208);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card-deck__pause:hover {
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    transform: translateX(-50%) scale(1.08);
}

.card-deck__pause .icon-play {
    display: none;
}

.card-deck__pause.is-paused .icon-pause {
    display: none;
}

.card-deck__pause.is-paused .icon-play {
    display: block;
    /* optical centering: triangle has more visual weight on the right */
    margin-left: 1px;
}

/* ── Drag state ──────────────────────────────────────────────────── */

.card-deck.is-dragging .card-deck__card {
    transition: none;
    cursor: grabbing;
}

/* ── Mobile ──────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .card-deck {
        width: clamp(200px, 70vw, 280px);
        height: clamp(430px, 150vw, 600px);
        margin: 0 auto;
    }

    .card-deck__card[data-offset="-1"],
    .card-deck__card[data-offset="1"] {
        transform: rotate(var(--rot)) translateY(16px) translateX(var(--tx)) scale(0.9);
        opacity: 0.75;
    }

    .card-deck__card[data-offset="-2"],
    .card-deck__card[data-offset="2"] {
        opacity: 0.45;
    }
}