/* style.css */
:root {
    --deep-purple: #2d1b69;
    --mystic-blue: #1a1f35;
    --dark-space: #0f1020;
    --gold: #d4af37;
    --silver: #c0c0c0;
    --crystal: rgba(255,255,255,0.1);
    --glow: rgba(168, 85, 247, 0.4);
    --magic-pink: #ff2d75;
    --magic-blue: #4f7df9;
    --text-light: #ffffff;
    --text-gray: #b8b8b8;
}

/* Reset и базовые стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(135deg, var(--dark-space) 0%, var(--mystic-blue) 50%, var(--deep-purple) 100%);
    color: var(--text-light);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Анимированный фон */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(255, 119, 198, 0.2) 0%, transparent 25%),
        radial-gradient(circle at 50% 80%, rgba(120, 219, 255, 0.15) 0%, transparent 30%);
    z-index: -2;
}

/* Контейнер */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Прелоадер */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-space);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.preloader p {
    margin-top: 20px;
    font-size: 1.2rem;
    color: var(--silver);
}

.crystal-ball {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(200,200,255,0.3) 40%, transparent 70%);
    position: relative;
    box-shadow: 
        inset 0 0 20px rgba(255,255,255,0.5),
        inset 10px 0 40px rgba(168, 85, 247, 0.5),
        inset -10px 0 40px rgba(79, 125, 249, 0.5),
        0 0 20px rgba(168, 85, 247, 0.5);
    animation: rotate 3s infinite linear;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.inner-glow {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
    animation: inner-pulse 2s infinite alternate;
}

@keyframes inner-pulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 1; }
}

/* Хедер */
.header {
    background: rgba(26, 31, 53, 0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--crystal);
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header.scrolled {
    background: rgba(15, 16, 32, 0.9);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.logo-icon {
    font-size: 2rem;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-links a.active {
    color: var(--gold);
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 25px 100px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.hero-actions .btn-primary {
    font-size: 1.3rem;
    padding: 16px 32px;
    font-weight: 600;
}

.btn-primary {
    background: linear-gradient(45deg, var(--deep-purple), var(--magic-pink));
    color: white;
    box-shadow: 0 5px 15px rgba(168, 85, 247, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    background: transparent;
    color: var(--silver);
    border: 1px solid var(--crystal);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--gold);
    color: var(--gold);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

/* Герой секция */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 100px 0 50px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 150px 90px, rgba(255,255,255,0.5), transparent);
    background-repeat: repeat;
    background-size: 300px 300px;
    animation: stars-move 120s linear infinite;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(ellipse at 20% 30%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(255, 119, 198, 0.05) 0%, transparent 50%);
    animation: clouds-drift 60s linear infinite;
}

@keyframes clouds-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100px); }
}

@keyframes stars-move {
    0% { transform: translateY(0); }
    100% { transform: translateY(-200px); }
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    backdrop-filter: blur(10px);
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.title-line {
    display: block;
}

.hero-title .accent {
    background: linear-gradient(45deg, var(--gold), var(--magic-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.hero-title .accent::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.hero-description {
    font-size: 1.2rem;
    color: var(--text-gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Визуальная часть героя */
.hero-visual {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Обновляем позиционирование карт с z-index */
.tarot-card {
    width: 180px;
    height: 280px;
    perspective: 1000px;
    position: absolute;
    z-index: 10; /* Карты позади луны */
}

/* Уточняем позиции для каждой карты */
.card-1 {
    top: 20%;
    left: 5%;
    transform: rotate(-8deg);
    z-index: 12;
}

.card-2 {
    top: 10%;
    right: 10%;
    transform: rotate(5deg);
    z-index: 11;
}

.card-3 {
    bottom: 15%;
    left: 15%;
    transform: rotate(-3deg);
    z-index: 13;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: linear-gradient(145deg, #2a1a55, #1e1340);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 2px solid var(--gold);
    overflow: hidden;
    box-shadow: 
        inset 0 0 30px rgba(212, 175, 55, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.6);
}

.card-front::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg, 
        transparent, 
        rgba(212, 175, 55, 0.05), 
        rgba(168, 85, 247, 0.03), 
        transparent
    );
    transform: rotate(45deg);
    animation: moon-shine 6s infinite linear;
}

.card-symbol {
    font-size: 3.5rem;
    margin-bottom: 15px;
    filter: 
        drop-shadow(0 0 10px rgba(212, 175, 55, 0.8))
        drop-shadow(0 0 20px rgba(168, 85, 247, 0.4));
    z-index: 2;
}

.card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    color: var(--gold);
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(212, 175, 55, 0.5);
    z-index: 2;
}

.tarot-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(212, 175, 55, 0.05);
    border-radius: 12px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tarot-card:hover::before {
    opacity: 1;
}

/* Улучшаем анимацию парящих карт */
.floating-card {
    animation: float-mystic 8s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(212, 175, 55, 0.3));
}

@keyframes float-mystic {
    0%, 100% { 
        transform: translateY(0) rotate(var(--rotation, 0deg));
    }
    25% { 
        transform: translateY(-15px) rotate(calc(var(--rotation, 0deg) + 2deg));
    }
    50% { 
        transform: translateY(-25px) rotate(calc(var(--rotation, 0deg) - 1deg));
    }
    75% { 
        transform: translateY(-10px) rotate(calc(var(--rotation, 0deg) + 1deg));
    }
}

/* Устанавливаем индивидуальные вращения */
.card-1 {
    --rotation: -8deg;
}

.card-2 {
    --rotation: 5deg;
}

.card-3 {
    --rotation: -3deg;
}

/* Обновляем стили для реалистичной луны */
.crystal-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.4));
}

.crystal {
    width: 220px;
    height: 220px;
    background: 
        /* Основной цвет луны с градиентами */
        radial-gradient(circle at 30% 30%, 
            #f8f8f8 0%, 
            #e0e0e0 15%,
            #c8c8c8 30%,
            #a8a8a8 45%,
            #909090 60%,
            transparent 80%),
        radial-gradient(circle at 70% 70%, 
            #f0f0f0 0%,
            #d8d8d8 20%,
            #b8b8b8 40%,
            transparent 70%),
        /* Текстура лунной поверхности */
        radial-gradient(circle at 40% 60%, 
            rgba(180, 180, 180, 0.8) 0%,
            rgba(160, 160, 160, 0.6) 10%,
            transparent 20%),
        radial-gradient(circle at 60% 40%, 
            rgba(200, 200, 200, 0.7) 0%,
            rgba(170, 170, 170, 0.5) 15%,
            transparent 25%);
    border-radius: 50%;
    position: relative;
    box-shadow: 
        /* Внешнее свечение */
        0 0 80px rgba(212, 175, 55, 0.6),
        0 0 120px rgba(168, 85, 247, 0.3),
        0 0 160px rgba(79, 125, 249, 0.2),
        /* Внутреннее свечение */
        inset 0 -10px 40px rgba(0, 0, 0, 0.3),
        inset 0 10px 40px rgba(255, 255, 255, 0.1),
        inset 10px 0 40px rgba(255, 255, 255, 0.05),
        inset -10px 0 40px rgba(255, 255, 255, 0.05);
    animation: moon-glow 8s ease-in-out infinite;
    overflow: hidden;
}

/* Создаем реалистичные лунные кратеры */
.crystal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Большие кратеры */
        radial-gradient(circle at 25% 25%, 
            rgba(140, 140, 140, 0.4) 0px, 
            rgba(120, 120, 120, 0.3) 8px, 
            transparent 12px),
        radial-gradient(circle at 75% 35%, 
            rgba(130, 130, 130, 0.5) 0px, 
            rgba(110, 110, 110, 0.4) 6px, 
            transparent 10px),
        radial-gradient(circle at 45% 70%, 
            rgba(150, 150, 150, 0.4) 0px, 
            rgba(130, 130, 130, 0.3) 10px, 
            transparent 15px),
        radial-gradient(circle at 65% 65%, 
            rgba(135, 135, 135, 0.4) 0px, 
            rgba(115, 115, 115, 0.3) 7px, 
            transparent 11px),
        /* Средние кратеры */
        radial-gradient(circle at 15% 55%, 
            rgba(145, 145, 145, 0.3) 0px, 
            rgba(125, 125, 125, 0.2) 4px, 
            transparent 6px),
        radial-gradient(circle at 85% 75%, 
            rgba(140, 140, 140, 0.3) 0px, 
            rgba(120, 120, 120, 0.2) 5px, 
            transparent 8px),
        radial-gradient(circle at 35% 15%, 
            rgba(155, 155, 155, 0.3) 0px, 
            rgba(135, 135, 135, 0.2) 3px, 
            transparent 5px),
        /* Мелкие кратеры и текстура */
        radial-gradient(circle at 55% 85%, 
            rgba(160, 160, 160, 0.2) 0px, 
            rgba(140, 140, 140, 0.1) 2px, 
            transparent 3px),
        radial-gradient(circle at 75% 15%, 
            rgba(150, 150, 150, 0.2) 0px, 
            rgba(130, 130, 130, 0.1) 2px, 
            transparent 3px),
        radial-gradient(circle at 10% 80%, 
            rgba(145, 145, 145, 0.2) 0px, 
            rgba(125, 125, 125, 0.1) 1px, 
            transparent 2px);
    border-radius: 50%;
    animation: crater-rotate 120s linear infinite;
}

/* Добавляем дополнительные детали лунной поверхности */
.crystal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Лунные моря - темные области */
        radial-gradient(ellipse at 30% 40%, 
            rgba(100, 100, 100, 0.4) 0%, 
            rgba(80, 80, 80, 0.3) 15%, 
            transparent 30%),
        radial-gradient(ellipse at 60% 60%, 
            rgba(90, 90, 90, 0.3) 0%, 
            rgba(70, 70, 70, 0.2) 10%, 
            transparent 20%),
        radial-gradient(ellipse at 70% 25%, 
            rgba(95, 95, 95, 0.35) 0%, 
            rgba(75, 75, 75, 0.25) 8%, 
            transparent 18%);
    border-radius: 50%;
    mix-blend-mode: multiply;
    animation: seas-rotate 180s linear infinite reverse;
}

@keyframes moon-glow {
    0%, 100% { 
        box-shadow: 
            0 0 80px rgba(212, 175, 55, 0.6),
            0 0 120px rgba(168, 85, 247, 0.3),
            0 0 160px rgba(79, 125, 249, 0.2),
            inset 0 -10px 40px rgba(0, 0, 0, 0.3),
            inset 0 10px 40px rgba(255, 255, 255, 0.1);
        transform: scale(1) rotate(0deg);
    }
    25% { 
        box-shadow: 
            0 0 85px rgba(212, 175, 55, 0.65),
            0 0 130px rgba(168, 85, 247, 0.35),
            0 0 170px rgba(79, 125, 249, 0.25),
            inset 0 -8px 35px rgba(0, 0, 0, 0.25),
            inset 0 12px 45px rgba(255, 255, 255, 0.12);
    }
    50% { 
        box-shadow: 
            0 0 90px rgba(212, 175, 55, 0.7),
            0 0 140px rgba(168, 85, 247, 0.4),
            0 0 180px rgba(79, 125, 249, 0.3),
            inset 0 -12px 50px rgba(0, 0, 0, 0.35),
            inset 0 8px 35px rgba(255, 255, 255, 0.08);
        transform: scale(1.02) rotate(0.5deg);
    }
    75% { 
        box-shadow: 
            0 0 85px rgba(212, 175, 55, 0.65),
            0 0 130px rgba(168, 85, 247, 0.35),
            0 0 170px rgba(79, 125, 249, 0.25),
            inset 0 -8px 35px rgba(0, 0, 0, 0.25),
            inset 0 12px 45px rgba(255, 255, 255, 0.12);
    }
}

@keyframes crater-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes seas-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: 
        radial-gradient(
            circle,
            rgba(212, 175, 55, 0.15) 0%,
            rgba(168, 85, 247, 0.1) 20%,
            rgba(79, 125, 249, 0.05) 40%,
            transparent 70%
        );
    border-radius: 50%;
    animation: moon-halo 15s ease-in-out infinite;
    z-index: 4;
    filter: blur(20px);
    mix-blend-mode: screen;
}

@keyframes moon-halo {
    0%, 100% { 
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.95);
    }
    50% { 
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Добавляем легкие лучи от луны */
.moon-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    z-index: 5;
}


.moon-rays::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: 
        conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            rgba(212, 175, 55, 0.02) 10deg,
            transparent 20deg,
            rgba(168, 85, 247, 0.015) 30deg,
            transparent 40deg,
            rgba(79, 125, 249, 0.01) 50deg,
            transparent 60deg,
            rgba(212, 175, 55, 0.015) 70deg,
            transparent 80deg,
            rgba(168, 85, 247, 0.01) 90deg,
            transparent 100deg
        );
    border-radius: 50%;
    animation: rays-rotate 80s linear infinite;
    filter: blur(1px);
}

@keyframes rays-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Секции */
section {
    padding: 80px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.section-header p {
    font-size: 1.2rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Особенности */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: rgba(26, 31, 53, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--crystal);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--deep-purple), var(--magic-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Обновленные стили для секции раскладов */
.spreads {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 16, 32, 0.9) 0%, rgba(26, 31, 53, 0.8) 100%);
    overflow: hidden;
}

.spreads::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(79, 125, 249, 0.1) 0%, transparent 50%);
    animation: mystic-pulse 8s ease-in-out infinite;
}

@keyframes mystic-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid var(--gold);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--gold);
}

.spreads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.spread-card {
    background: rgba(26, 31, 53, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--crystal);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.spread-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(168, 85, 247, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spread-card:hover::before {
    opacity: 1;
}

.spread-card:hover {
    transform: translateY(-15px);
    border-color: var(--gold);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.2);
}

.spread-card.featured {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(26, 31, 53, 0.9), rgba(45, 27, 105, 0.8));
    transform: scale(1.02);
}

.spread-card.featured:hover {
    transform: scale(1.02) translateY(-15px);
}

.spread-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, var(--gold), var(--magic-pink));
    color: var(--dark-space);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 2;
}

.spread-visual {
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

/* Стили для новых раскладов */

/* Расклад на любовные отношения */
.love-spread {
    position: relative;
    width: 180px;
    height: 160px;
}

.heart-shape {
    position: relative;
    width: 100%;
    height: 100%;
}

.heart-shape::before,
.heart-shape::after {
    content: '';
    position: absolute;
    top: 0;
    width: 90px;
    height: 140px;
    border-radius: 90px 90px 0 0;
    background: rgba(255, 105, 180, 0.1);
}

.heart-shape::before {
    left: 90px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart-shape::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.love-card {
    width: 35px;
    height: 50px;
    background: linear-gradient(145deg, #ff69b4, #ff1493);
    border-radius: 5px;
    position: absolute;
    animation: love-float 5s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.love-card:nth-child(1) { top: 20px; left: 45px; animation-delay: 0s; }
.love-card:nth-child(2) { top: 50px; left: 20px; animation-delay: 1s; }
.love-card:nth-child(3) { top: 50px; right: 20px; animation-delay: 2s; }
.love-card:nth-child(4) { bottom: 30px; left: 60px; animation-delay: 3s; }
.love-card:nth-child(5) { bottom: 30px; right: 60px; animation-delay: 4s; }

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

/* Расклад на карьеру и бизнес */
.career-spread {
    position: relative;
    width: 160px;
    height: 140px;
}

.ladder-shape {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ladder-shape::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--gold), transparent);
    border-radius: 2px;
}

.ladder-shape::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--gold), transparent);
    border-radius: 2px;
}

.career-card {
    width: 120px;
    height: 20px;
    background: linear-gradient(145deg, #32cd32, #228b22);
    border-radius: 3px;
    position: relative;
    animation: career-climb 6s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.career-card:nth-child(1) { animation-delay: 0s; }
.career-card:nth-child(2) { animation-delay: 1s; }
.career-card:nth-child(3) { animation-delay: 2s; }
.career-card:nth-child(4) { animation-delay: 3s; }
.career-card:nth-child(5) { animation-delay: 4s; }

@keyframes career-climb {
    0%, 100% { 
        transform: translateX(0);
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    25% { 
        transform: translateX(5px);
        box-shadow: 0 4px 10px rgba(50, 205, 50, 0.4);
    }
    50% { 
        transform: translateX(0);
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    75% { 
        transform: translateX(-5px);
        box-shadow: 0 4px 10px rgba(50, 205, 50, 0.4);
    }
}

/* Расклад на финансовый поток */
.money-spread {
    position: relative;
    width: 180px;
    height: 140px;
}

.flow-shape {
    position: relative;
    width: 100%;
    height: 100%;
}

.flow-shape::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 100%;
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(255, 215, 0, 0.1) 30%,
        rgba(255, 215, 0, 0.2) 50%,
        rgba(255, 215, 0, 0.1) 70%,
        transparent 100%);
    border-radius: 40px;
}

.money-card {
    width: 30px;
    height: 45px;
    background: linear-gradient(145deg, #ffd700, #ffa500);
    border-radius: 4px;
    position: absolute;
    animation: money-flow 7s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.money-card:nth-child(1) { top: 10px; left: 40px; animation-delay: 0s; }
.money-card:nth-child(2) { top: 30px; right: 30px; animation-delay: 1s; }
.money-card:nth-child(3) { top: 60px; left: 20px; animation-delay: 2s; }
.money-card:nth-child(4) { top: 80px; right: 50px; animation-delay: 3s; }
.money-card:nth-child(5) { bottom: 20px; left: 60px; animation-delay: 4s; }
.money-card:nth-child(6) { bottom: 10px; right: 20px; animation-delay: 5s; }

@keyframes money-flow {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    25% { 
        transform: translateY(-10px) rotate(5deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(5px) rotate(-3deg);
        opacity: 0.8;
    }
    75% { 
        transform: translateY(-5px) rotate(2deg);
        opacity: 0.9;
    }
}

/* Дополнительные орбы для новых раскладов */
.orb-4 {
    background: #32cd32;
    top: 10px;
    left: 10px;
    animation-delay: 1s;
}

.orb-5 {
    background: #ffd700;
    bottom: 10px;
    right: 10px;
    animation-delay: 3s;
}

.orb-6 {
    background: #8a2be2;
    top: 50%;
    left: 10px;
    animation-delay: 5s;
}

/* Адаптация сетки для 6 карточек */
@media (min-width: 1200px) {
    .spreads-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .spreads-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .spreads-grid {
        grid-template-columns: 1fr;
    }
}

/* Обновляем spreads-info для 3 карточек */
.spreads-info {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Дополнительные стили для ИИ-интерфейса */
.ai-interpretation {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    padding: 25px;
    color: white;
    margin: 20px 0;
}

.interpretation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    padding-bottom: 15px;
}

.ai-badge {
    background: rgba(255,255,255,0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.interpretation-content {
    line-height: 1.6;
}

.interpretation-content h4 {
    color: #FFD700;
    margin: 20px 0 10px 0;
    font-size: 18px;
}

.interpretation-content h5 {
    color: #FFD700;
    margin: 15px 0 8px 0;
    font-size: 16px;
}

.interpretation-content li {
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
}

.interpretation-content li:before {
    content: "✦";
    position: absolute;
    left: 0;
    color: #FFD700;
}

.section-content, .subsection-content {
    margin: 10px 0;
}

/* Анимации для карт */
.card-stack {
    position: relative;
    z-index: 2;
}

.card-single,
.card-three,
.celtic-card {
    width: 100px;
    height: 150px;
    background: linear-gradient(145deg, #3a2a6d, #2d1b69);
    border-radius: 8px;
    border: 2px solid var(--gold);
    position: absolute;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
}

.card-single {
    animation: card-glow 3s ease-in-out infinite;
}

@keyframes card-glow {
    0%, 100% { 
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
        transform: translateY(0);
    }
    50% { 
        box-shadow: 0 8px 35px rgba(212, 175, 55, 0.4);
        transform: translateY(-5px);
    }
}

.card-three {
    animation: card-float 4s ease-in-out infinite;
}

.card-pos-1 {
    left: -30px;
    animation-delay: 0s;
}

.card-pos-2 {
    left: 0;
    animation-delay: 1s;
}

.card-pos-3 {
    left: 30px;
    animation-delay: 2s;
}

.time-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: var(--text-gray);
    white-space: nowrap;
}

.timeline {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Кельтский крест */
.celtic-cross {
    position: relative;
    width: 200px;
    height: 200px;
}

.cross-center,
.cross-vertical,
.cross-horizontal {
    position: absolute;
    background: rgba(212, 175, 55, 0.3);
    border-radius: 2px;
}

.cross-center {
    width: 60px;
    height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--gold);
}

.cross-vertical {
    width: 4px;
    height: 180px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.cross-horizontal {
    width: 180px;
    height: 4px;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.celtic-card {
    width: 40px;
    height: 60px;
    animation: celtic-float 6s ease-in-out infinite;
}

.celtic-card:nth-child(4) { top: 20px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.celtic-card:nth-child(5) { bottom: 20px; left: 50%; transform: translateX(-50%); animation-delay: 1s; }
.celtic-card:nth-child(6) { top: 50%; left: 20px; transform: translateY(-50%); animation-delay: 2s; }
.celtic-card:nth-child(7) { top: 50%; right: 20px; transform: translateY(-50%); animation-delay: 3s; }
.celtic-card:nth-child(8) { top: 30px; left: 30px; animation-delay: 4s; }
.celtic-card:nth-child(9) { top: 30px; right: 30px; animation-delay: 5s; }

@keyframes celtic-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    50% { transform: translateY(-10px) rotate(-1deg); }
    75% { transform: translateY(-5px) rotate(1deg); }
}

/* Магические орбы */
.spread-orb {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.3;
    animation: orb-float 8s ease-in-out infinite;
}

.orb-1 {
    background: var(--magic-pink);
    top: 20px;
    right: 20px;
    animation-delay: 0s;
}

.orb-2 {
    background: var(--gold);
    bottom: 20px;
    left: 20px;
    animation-delay: 2s;
}

.orb-3 {
    background: var(--magic-blue);
    top: 50%;
    right: 30px;
    animation-delay: 4s;
}

@keyframes orb-float {
    0%, 100% { 
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    33% { 
        transform: translate(10px, -10px) scale(1.1);
        opacity: 0.5;
    }
    66% { 
        transform: translate(-5px, 5px) scale(0.9);
        opacity: 0.2;
    }
}

/* Контент карточек */
.spread-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.spread-header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--text-light);
    margin: 0;
}

.difficulty {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.difficulty.easy {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    border: 1px solid #4CAF50;
}

.difficulty.medium {
    background: rgba(255, 152, 0, 0.2);
    color: #FF9800;
    border: 1px solid #FF9800;
}

.difficulty.hard {
    background: rgba(244, 67, 54, 0.2);
    color: #F44336;
    border: 1px solid #F44336;
}

.spread-card p {
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.spread-features {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-light);
    font-size: 0.9rem;
}

.feature i {
    color: var(--gold);
    width: 16px;
}

.spread-usage {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.usage-stats,
.success-rate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-gray);
}

.usage-stats i,
.success-rate i {
    color: var(--gold);
}

/* Кнопки */
.btn-outline {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-outline:hover {
    background: var(--gold);
    color: var(--dark-space);
    transform: translateY(-2px);
}

/* Дополнительная информация */
.spreads-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(26, 31, 53, 0.6);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid var(--crystal);
}

.info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--deep-purple), var(--magic-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.info-content h4 {
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.info-content p {
    color: var(--text-gray);
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Адаптивность */
@media (max-width: 768px) {
    .spreads-grid {
        grid-template-columns: 1fr;
    }
    
    .spread-header {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .spread-visual {
        height: 150px;
    }
    
    .celtic-cross {
        transform: scale(0.8);
    }
}

@media (max-width: 480px) {
    .spread-card {
        padding: 1.5rem;
    }
    
    .spread-header h3 {
        font-size: 1.5rem;
    }
    
    .info-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Интерфейс гадания */
.reading-interface {
    background: rgba(15, 16, 32, 0.9);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--crystal);
    border-bottom: 1px solid var(--crystal);
}

.reading-container {
    max-width: 800px;
    margin: 0 auto;
}

.reading-header {
    text-align: center;
    margin-bottom: 3rem;
}

.reading-header h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.reading-header p {
    color: var(--text-gray);
    font-size: 1.1rem;
}

.question-section {
    background: rgba(26, 31, 53, 0.7);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--crystal);
}

.form-group {
    margin-bottom: 2rem;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-light);
}

.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--crystal);
    border-radius: 8px;
    color: var(--text-light);
    font-family: inherit;
    resize: vertical;
    transition: all 0.3s ease;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.form-group textarea::placeholder {
    color: var(--text-gray);
}

.spread-selection {
    margin-bottom: 2rem;
}

.spread-selection label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-light);
}

.spread-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.spread-option {
    flex: 1;
    min-width: 120px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--crystal);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.spread-option.active,
.spread-option:hover {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.1);
}

.option-visual {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--deep-purple), var(--magic-pink));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-weight: 700;
}

.reading-result {
    background: rgba(26, 31, 53, 0.7);
    border-radius: 15px;
    padding: 2rem;
    border: 1px solid var(--crystal);
}

.result-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--crystal);
}

.result-header h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text-light);
}

.result-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.cards-display {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.interpretation {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.reading-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Футер */
.footer {
    background: var(--dark-space);
    padding: 3rem 0 1rem;
    border-top: 1px solid var(--crystal);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    color: var(--text-light);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.footer-description {
    color: var(--text-gray);
    line-height: 1.6;
    margin-top: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--text-gray);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid var(--crystal);
    color: var(--text-gray);
    font-size: 0.9rem;
}

.footer-security {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Адаптивность */
@media (max-width: 768px) {
    .hero-visual {
        height: 400px;
    }
    
    .tarot-card {
        width: 120px;
        height: 180px;
    }
    
    /* Перераспределяем карты для мобильных */
    .card-1 {
        top: 15%;
        left: 2%;
        transform: rotate(-10deg);
    }
    
    .card-2 {
        top: 5%;
        right: 2%;
        transform: rotate(8deg);
    }
    
    .card-3 {
        bottom: 10%;
        left: 10%;
        transform: rotate(-5deg);
    }
    
    .card-symbol {
        font-size: 2.5rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .crystal {
        width: 120px;
        height: 120px;
    }
    
    .glow {
        width: 180px;
        height: 180px;
    }
    
    .moon-rays {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 480px) {
    .hero-visual {
        height: 300px;
    }
    
    .tarot-card {
        width: 80px;
        height: 120px;
    }
    
    .card-symbol {
        font-size: 2rem;
    }
    
    .card-title {
        font-size: 0.8rem;
    }
    
    /* Еще более компактное расположение */
    .card-1 {
        top: 20%;
        left: 5%;
    }
    
    .card-2 {
        top: 10%;
        right: 5%;
    }
    
    .card-3 {
        bottom: 15%;
        left: 8%;
    }
    
    .crystal {
        width: 100px;
        height: 100px;
    }
    
    .glow {
        width: 150px;
        height: 150px;
    }
    
    .moon-rays {
        width: 180px;
        height: 180px;
    }
}

/* Улучшаем видимость карт на фоне луны */
.card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: linear-gradient(145deg, #2a1a55, #1e1340);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 2px solid var(--gold);
    overflow: hidden;
    box-shadow: 
        inset 0 0 30px rgba(212, 175, 55, 0.3),
        0 8px 35px rgba(0, 0, 0, 0.8), /* Увеличиваем тень */
        0 0 20px rgba(212, 175, 55, 0.4); /* Добавляем свечение */
}

/* Hover эффекты - исправленные */
.tarot-card:hover .card-inner {
    transform: translateY(-15px) rotateY(5deg) scale(1.05);
    box-shadow: 
        0 25px 50px rgba(168, 85, 247, 0.6),
        0 0 40px rgba(212, 175, 55, 0.5);
    z-index: 25; /* При наведении карта поверх луны */
}

@keyframes moon-shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}