/* ========================================
   BASE & GLOBAL STYLES
   ======================================== */
:root {
    /* Light Theme Colors */
    --primary-color: #F97316; /* orange-500 */
    --primary-accent-color: #EA580C; /* orange-600 */
    --primary-bg-color: #F59E0B; /* amber-500 */
    --text-on-primary: white;

    /* Dark Theme Colors */
    --dark-bg-color: #1e1b4b; /* indigo-950 */
    --dark-primary-color: #818cf8; /* indigo-400 */
    --dark-primary-accent-color: #6366f1; /* indigo-500 */
    --dark-surface-color: #312e81; /* indigo-900 */
}

body { 
    font-family: 'Nunito', sans-serif; 
    transition: background-color 0.5s ease; 
    cursor: default; 
}
.handwritten { font-family: 'Patrick Hand', cursive; }
.tech-font { font-family: 'Rajdhani', sans-serif; }

/* ========================================
   KEYFRAMES & ANIMATIONS
   ======================================== */
@keyframes card-reveal-glow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); /* orange-400 at 0% opacity */
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 25px 12px rgba(251, 146, 60, 0.5); /* orange-400 glow */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251, 146, 60, 0);
  }
}

@keyframes fall { 
    0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; } 
}

@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-8px); } 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.fade-in { animation: fadeIn 0.5s ease-in-out; }
.hidden-section { display: none !important; }
.floating { animation: float 4s ease-in-out infinite; } 
.animate-pop-in { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-card-reveal { animation: card-reveal-glow 0.7s ease-in-out; }
.backdrop-blur-custom { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* 3D Utilities for Spreads */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

/* ========================================
   LAYOUT & BACKGROUND
   ======================================== */
.checkerboard-bg {
    background-color: var(--primary-bg-color);
    background-image: linear-gradient(45deg, var(--primary-accent-color) 25%, transparent 25%, transparent 75%, var(--primary-accent-color) 75%, var(--primary-accent-color)), linear-gradient(45deg, var(--primary-accent-color) 25%, transparent 25%, transparent 75%, var(--primary-accent-color) 75%, var(--primary-accent-color));
    background-size: 60px 60px; 
    background-position: 0 0, 30px 30px; 
    opacity: 0.9; 
    transition: background-color 0.5s ease, opacity 0.5s ease;
}

.leaf { 
    position: absolute; 
    top: -10%; 
    animation-name: fall; 
    animation-timing-function: linear; 
    animation-iteration-count: infinite; 
    pointer-events: none; 
    z-index: 0; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

.top-controls { position: absolute; top: 20px; right: 20px; z-index: 50; display: flex; gap: 10px; }

/* ========================================
   COMPONENT: TAROT CARDS
   ======================================== */
.tarot-container { 
    perspective: 1500px; 
    height: 500px; /* Increased height for the fan */
    position: relative; 
    overflow: hidden; /* Hide parts of cards that go off-screen */
}
.tarot-card { 
    /* Absolute positioning is key for fanning */
    position: absolute; /* Absolute positioning is key for fanning */
    width: 120px; height: 190px;
    top: 50%;
    left: 50%;
    margin-left: -60px; /* -(width / 2) */
    margin-top: -95px; /* -(height / 2) */
    transform-origin: center center; /* Transform from the center */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s; 
    cursor: pointer;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Inner container for the 3D flip */
.tarot-card .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
    border-radius: 1rem;
}

.card-face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    border-radius: 1rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.card-front { 
    transition: all 0.5s ease; 
    transform: translateZ(0);
    background-size: cover;
    background-position: center;
    background-color: #FFF7ED; /* Fallback color */
}

.card-back { 
    background: white; 
    transform: rotateY(180deg); 
    padding: 1rem; 
    text-align: center; 
    overflow: hidden; 
}

.card-back-content { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    width: 100%; 
}

/* --- Card States & Interactions --- */
.tarot-card.flipped .card-inner { 
    transform: rotateY(180deg); 
}

/* Hover effect for the fan */
.tarot-container:not(.selection-made) .tarot-card:hover {
    /* The --hover-transform variable is set in JS to combine rotation and translation */
    transform: var(--hover-transform) !important;
    z-index: 100;
}

/* When a card is selected */
.tarot-container.selection-made .tarot-card:not(.selected) {
    /* MODIFIED: Cards now fade in place instead of sliding down, with an explicit transition. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-out; /* Ensure the fade-out is animated */
}

/* FIX: Correct hover effect for spread cards (3-card, pick-a-card) */
.spread-card:not(.chosen):not(.flipped):hover {
    transform: var(--hover-transform) !important;
    z-index: 100;
}

/* ========================================
   COMPONENT: UI ELEMENTS
   ======================================== */

/* --- Language & Theme Switchers --- */
.lang-switch { 
    background: white; 
    border-radius: 20px; 
    padding: 5px; 
    display: flex; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    border: 2px solid var(--primary-color); 
}

.lang-btn { 
    padding: 5px 12px; 
    border-radius: 15px; 
    font-weight: bold; 
    font-size: 0.8rem; 
    cursor: pointer; 
    transition: all 0.3s; 
    color: var(--primary-color); 
}
.lang-btn.active { 
    background: var(--primary-color); 
    color: var(--text-on-primary); 
}

.theme-btn { 
    background: white; 
    border: 2px solid var(--primary-color); 
    color: var(--primary-color); 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    transition: all 0.3s; 
}

/* --- Shop & Pagination --- */
.shop-item:hover { 
    transform: translateY(-5px); 
}

.pagination-controls { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 1rem; 
    margin-top: 2rem; 
}

/* ========================================
   DARK MODE STYLES
   ======================================== */
html.dark .checkerboard-bg {
    background-color: var(--dark-surface-color);
    background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px; 
    background-position: 0 0, 40px 60px, 130px 270px; 
    opacity: 1;
}

html.dark .card-back { 
    background-color: var(--dark-surface-color); 
    color: var(--text-on-primary); 
}

html.dark .leaf {
    color: rgba(236, 239, 241, 0.3); /* A light, semi-transparent color for the leaves */
}

html.dark .lang-switch { 
    background: var(--dark-bg-color); 
    border-color: var(--dark-primary-color); 
}

html.dark .lang-btn { 
    color: var(--dark-primary-color); 
}

html.dark .lang-btn.active { 
    background: var(--dark-primary-accent-color); 
}

html.dark .theme-btn { 
    background: var(--dark-bg-color); 
    border-color: var(--dark-primary-color); 
    color: #fbbf24; 
}
html.dark .theme-btn:hover { 
    background: var(--dark-surface-color); 
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */
/* Responsive card size for mobile */
@media (max-width: 767px) {
    .tarot-card {
        width: 80px;
        height: 126px;
        margin-left: -40px; /* -(width / 2) */
        margin-top: -63px; /* -(height / 2) */
    }
}

/* ========================================
   COMPONENT: PENDULUM (NEW)
   ======================================== */
@keyframes swing-infinite {
    0% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(-15deg); }
}

.pendulum-swing-infinite {
    animation: swing-infinite 0.2s ease-in-out infinite;
}