/* =============================================
   Çekiliş Animasyonları
   ============================================= */

/* ── Geri Sayım ── */
.countdown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fullscreen);
}

.countdown-number {
    font-size: 12rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: countdownPulse 1s ease infinite;
}

@keyframes countdownPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* ── Slot Machine ── */
.slot-container {
    position: fixed;
    inset: 0;
    background: var(--color-bg-primary);
    z-index: var(--z-fullscreen);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slot-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.slot-bg-effects .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: orbFloat 8s ease-in-out infinite;
}

.slot-bg-effects .orb-1 {
    width: 400px; height: 400px;
    background: var(--color-primary);
    top: -10%; left: -5%;
}

.slot-bg-effects .orb-2 {
    width: 300px; height: 300px;
    background: var(--color-accent);
    bottom: -10%; right: -5%;
    animation-delay: -4s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(20px, -30px); }
    50% { transform: translate(-10px, 20px); }
    75% { transform: translate(30px, 10px); }
}

.slot-header {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-4);
    z-index: 2;
}

.slot-winner-type {
    font-size: var(--text-3xl);
    font-weight: 900;
    margin-bottom: var(--space-8);
    z-index: 2;
}

.slot-winner-type.main-winner {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slot-winner-type.reserve-winner {
    color: var(--color-text-secondary);
}

/* Dönen isimler */
.slot-reel {
    width: 100%;
    max-width: 500px;
    height: 80px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    margin-bottom: var(--space-8);
}

.slot-reel::before,
.slot-reel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 3;
    pointer-events: none;
}

.slot-reel::before {
    top: 0;
    background: linear-gradient(to bottom, var(--color-bg-primary), transparent);
}

.slot-reel::after {
    bottom: 0;
    background: linear-gradient(to top, var(--color-bg-primary), transparent);
}

.slot-reel-inner {
    transition: transform 0.05s linear;
}

.slot-name {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-text-primary);
    white-space: nowrap;
    opacity: 0.3;
}

.slot-name.active {
    opacity: 1;
    color: var(--color-accent);
    text-shadow: 0 0 30px var(--color-accent-glow);
}

/* Kazanan glow animasyonu */
.winner-reveal {
    animation: winnerGlow 0.6s ease forwards;
}

@keyframes winnerGlow {
    0% {
        transform: scale(0.5);
        opacity: 0;
        filter: blur(10px);
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* Kazanan profil kartı animasyonu */
.winner-card-reveal {
    animation: cardReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardReveal {
    0% {
        transform: scale(0) rotateY(180deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateY(0);
        opacity: 1;
    }
}

/* Tebrikler animasyonu */
.congrats-text {
    font-size: var(--text-5xl);
    font-weight: 900;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: congratsBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

@keyframes congratsBounce {
    0% { transform: scale(0) rotate(-10deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(3deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Sonraki kazanan butonu */
.next-winner-btn {
    margin-top: var(--space-8);
    z-index: 2;
    animation: fadeInUp 0.6s ease 0.5s both;
}

/* ── Konfeti ── */
.confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: calc(var(--z-fullscreen) + 1);
}

/* ── Genel Animasyonlar ── */
.fade-in {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.slide-up {
    animation: slideUp 0.5s ease;
}

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

/* Pulse ring efekti */
.pulse-ring {
    position: relative;
}

.pulse-ring::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    animation: pulseRing 1.5s ease-out infinite;
}

@keyframes pulseRing {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Glow border animasyonu */
.glow-border {
    position: relative;
}

.glow-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: glowRotate 3s linear infinite;
}

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

/* ── Stagger Animations (Sıralı kart gösterimi) ── */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* ── Progress Steps Animasyonu ── */
.analyze-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    opacity: 0.4;
    transition: all var(--transition-base);
}

.analyze-step.active {
    opacity: 1;
}

.analyze-step.completed {
    opacity: 1;
    color: var(--color-success);
}

.analyze-step .step-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.analyze-step.completed .step-spinner {
    border: none;
    animation: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Live Draw Progress ── */
.live-progress {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
    z-index: 2;
}

.live-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 2px solid var(--color-border);
    transition: all var(--transition-base);
}

.live-progress-dot.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary-glow);
}

.live-progress-dot.completed {
    background: var(--color-success);
    border-color: var(--color-success);
}

/* ── Close button for fullscreen ── */
.slot-close {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: calc(var(--z-fullscreen) + 2);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.slot-close:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}