/* CONTAINER */
.p1-deck-wrapper {
    position: relative; width: 100%; display: flex; align-items: center; justify-content: center;
    perspective: 1200px; overflow: visible;
}
.p1-deck-stage {
    width: 80%; max-width: 900px; aspect-ratio: 16 / 9; position: relative;
    transform-style: preserve-3d; transition: transform 0.1s ease-out;
}
.p1-deck-container { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }

/* CARDS */
.p1-card {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: top center; border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    backface-visibility: hidden; transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); /* Slower for nice shuffle */
    transform-origin: center bottom;
    text-decoration: none !important; border: none !important; display: block;
}

/* --- 1. DEFAULT STATE (DESKTOP) --- */
.card-back {
    transform: translate3d(-15%, -10px, -60px) rotateZ(-4deg) scale(0.9);
    opacity: 0.6; filter: blur(1px) grayscale(80%); z-index: 1;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.card-mid {
    transform: translate3d(15%, -5px, -30px) rotateZ(4deg) scale(0.95);
    opacity: 0.8; filter: grayscale(40%); z-index: 2;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
.card-front {
    transform: translate3d(0, 10px, 0) scale(1);
    opacity: 1; z-index: 10;
    border: 1px solid rgba(255,255,255,0.2) !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

/* --- 2. HOVER / SELECTION --- */
/* Fan out wide on hover */
.p1-deck-wrapper:hover .card-back { transform: translate3d(-40%, -15px, -40px) rotateZ(-6deg) scale(0.9); opacity: 0.9; filter: grayscale(20%); }
.p1-deck-wrapper:hover .card-mid { transform: translate3d(40%, -10px, -20px) rotateZ(6deg) scale(0.95); opacity: 0.9; filter: grayscale(20%); }

/* Selected State (Pop Forward) */
.p1-card.is-selected {
    transform: translate3d(0, 15px, 120px) scale(1.05) rotateZ(0deg) !important;
    z-index: 100 !important;
    opacity: 1 !important; filter: none !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8);
}

/* Dim others when one is selected */
.p1-deck-wrapper.has-selection .p1-card:not(.is-selected) {
    opacity: 0.4 !important; filter: blur(2px) grayscale(100%) !important;
}

/* --- 3. UI ELEMENTS --- */
.p1-card-border {
    position: absolute; inset: -1px; border-radius: 16px; padding: 1px;
    background: linear-gradient(135deg, var(--accent), transparent 50%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2;
}
.p1-card-glare {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(125deg, rgba(255,255,255,0.3) 0%, transparent 40%);
    opacity: 0; transition: opacity 0.5s; pointer-events: none; border-radius: 16px; z-index: 5;
}
.p1-deck-wrapper:hover .p1-card-glare { opacity: 0.4; }

.p1-card-label {
    position: absolute; bottom: 25px; left: 25px; padding: 8px 16px; border-radius: 50px;
    display: flex; align-items: center; gap: 8px; font-family: sans-serif; font-size: 11px;
    text-transform: uppercase; font-weight: 700; opacity: 0; transform: translateY(10px);
    transition: all 0.3s ease; z-index: 20;
}
.p1-card.is-selected .p1-card-label, .card-front .p1-card-label { opacity: 1; transform: translateY(0); }
.p1-card-label.is-dark { background: rgba(0,0,0,0.85); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.p1-card-label.is-light { background: rgba(255, 255, 255, 0.95); color: #000; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.p1-card-label::before {
    content: ''; display: block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
    box-shadow: 0 0 8px var(--accent); animation: p1-pulse 2s infinite;
}
@keyframes p1-pulse { 0%, 100% { opacity: 0.5; scale: 1; } 50% { opacity: 1; scale: 1.5; } }

/* --- MOBILE & TABLET FIXES --- */
@media (max-width: 1024px) {
    /* TABLET: Slightly tighter */
    .p1-deck-wrapper:hover .card-back { transform: translate3d(-25%, -10px, -40px) rotateZ(-4deg); }
    .p1-deck-wrapper:hover .card-mid { transform: translate3d(25%, -5px, -20px) rotateZ(4deg); }
}

@media (max-width: 768px) {
    .p1-deck-wrapper { height: 280px !important; overflow: visible; }
    .p1-deck-stage { width: 85%; max-width: 320px; }

    /* MOBILE VISIBILITY: Force back cards to peek out significantly (-12% / 12%) */
    .card-back { transform: translate3d(-12%, -8px, -60px) rotateZ(-3deg) scale(0.85); opacity: 0.8; }
    .card-mid  { transform: translate3d(12%, -4px, -30px) rotateZ(3deg) scale(0.9); opacity: 0.9; }

    /* Disable hover fan on mobile (touch interaction is different) */
    .p1-deck-wrapper:hover .card-back { transform: translate3d(-12%, -8px, -60px) rotateZ(-3deg) scale(0.85); }
    .p1-deck-wrapper:hover .card-mid  { transform: translate3d(12%, -4px, -30px) rotateZ(3deg) scale(0.9); }
}