/* ============================================================
   Tarot Sí/No — Specific Styles
   ============================================================ */

/* ============================================================
   PHASE 3 — Duality
   ============================================================ */
.ts-scene--duality {
    /* Page scroll passes through the scene; the card wrappers below set
       touch-action: none so dragging a card still captures full movement. */
    touch-action: pan-y;
}

/* Altar: card-shaped target zone override for Duality */
.ts-scene--duality .ts-altar {
    position:      absolute;
    left:          50%;
    bottom:        55%;
    top:           auto;
    transform:     translateX(-50%);
}

/* Cards start at `top: 55%` — 5% below the vertical centre. */
.ts-duality-cards {
    position:    absolute;
    left:        0;
    right:       0;
    top:         55%;
    bottom:      auto;
    display:     flex;
    align-items: flex-start;
    justify-content: center;
    gap:         clamp(1.25rem, 6vw, 5rem);
    pointer-events: none;
}

.ts-card::after {
    content:    '';
    position:   absolute;
    bottom:     -8px;
    left:       15%;
    right:      15%;
    height:     14px;
    background: linear-gradient(to bottom, rgba(212,175,55,0.06), transparent);
    filter:     blur(6px);
    opacity:    0;
    pointer-events: none;
}

.ts-card--hover::after {
    opacity: 1;
}

.ts-card-label {
    font-size:      1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          rgba(212,175,55,0.5);
}

/* Tablet portrait & up */
@media (min-width: 768px) {
    .ts-duality-cards {
        gap: clamp(2rem, 8vw, 7rem);
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .ts-duality-cards {
        gap: clamp(4rem, 12vw, 10rem);
    }
}