/* Yabancı Dil Seti - Dokunmatik Animasyonlar */

/* Keyframe Animasyonları */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

@keyframes spinning {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes dragPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(0, 122, 255, 0);
    }
}

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes rippleEffect {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes touchFeedback {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 122, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 122, 255, 0.6);
    }
}

@keyframes bookOpenAnimation {
    0% {
        transform: scale(1) rotateY(0deg);
    }
    25% {
        transform: scale(1.05) rotateY(-5deg);
    }
    50% {
        transform: scale(1.1) rotateY(-15deg);
    }
    75% {
        transform: scale(1.05) rotateY(-5deg);
    }
    100% {
        transform: scale(1) rotateY(0deg);
    }
}

@keyframes touchPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bookGlowEffect {
    0%, 100% {
        box-shadow: var(--shadow-xl);
    }
    50% {
        box-shadow: 0 25px 50px rgba(0, 122, 255, 0.4), var(--shadow-xl);
    }
}

/* Animasyon Sınıfları */
.fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.book-float {
    animation: bookFloat 3s ease-in-out infinite;
}

.spinning {
    animation: spinning 2s linear infinite;
}

.drag-pulse {
    animation: dragPulse 1.5s ease-in-out infinite;
}

.slide-in-bottom {
    animation: slideInFromBottom 0.6s ease-out forwards;
}

.modal-slide-in {
    animation: modalSlideIn 0.4s ease-out forwards;
}

.touch-feedback {
    animation: touchFeedback 0.2s ease-out;
}

.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

.book-opening {
    animation: bookOpenAnimation 0.8s ease-in-out;
}

.touch-press {
    animation: touchPress 0.2s ease-out;
}

.book-glow-effect {
    animation: bookGlowEffect 1s ease-in-out;
}

/* Kitap Kartı Animasyonları */
.book-item {
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: calc(var(--animation-delay, 0) * 0.1s);
    opacity: 0;
}

.book-item.visible {
    opacity: 1;
}

.book-item.selected {
    animation: glowPulse 1s ease-in-out;
    z-index: 100;
}


/* Dokunmatik Efektleri */
.book-item.touched {
    animation: touchPress 0.2s ease-out;
}

.book-item.selected .book-cover {
    transform: perspective(1000px) rotateY(-5deg);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.extra-material.touched {
    animation: touchPress 0.2s ease-out;
}

/* Touch Animasyonları */
.book-item.touching {
    transform: scale(1.05);
    z-index: 50;
    transition: transform 0.1s ease;
}

.extra-material.touching {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Drag & Drop Animasyonları */
.book-item.drag-start {
    transform: scale(1.1) rotate(5deg);
    z-index: 1000;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.book-item.drag-over {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.book-item.drag-end {
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Drop Zone Animasyonları */
.drop-zone {
    position: relative;
    overflow: hidden;
}

.drop-zone::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(0, 122, 255, 0.3), transparent);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.drop-zone.drag-over::before {
    opacity: 1;
    animation: shimmer 1s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Modal Animasyonları */
.modal-overlay.entering {
    animation: fadeIn 0.3s ease-out;
}

.modal-overlay.leaving {
    animation: fadeOut 0.2s ease-in;
}

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

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

.modal-content.entering {
    animation: modalSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal-content.leaving {
    animation: modalSlideOut 0.3s ease-in;
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

/* Windows 11 benzeri küçülerek kapanma animasyonu */
@keyframes win11ModalOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
        border-radius: 16px;
    }
    100% {
        opacity: 0;
        transform: scale(0.86) translateY(16px);
        filter: blur(1px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
        border-radius: 24px;
    }
}

@keyframes win11ModalIn {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(10px);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

/* Sadece feature modal için Win11 stilleri */
.feature-modal-overlay .modal-content {
    transform-origin: center center;
}

.feature-modal-overlay .modal-content.entering {
    animation: win11ModalIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform, opacity, filter;
}

/* Generic leaving animasyonu etkisiz bırak ve Win11'i uygula */
.feature-modal-overlay .modal-content.leaving {
    animation: none !important;
}
.feature-modal-overlay .modal-content.leaving.win11-close {
    animation: win11ModalOut 320ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform, opacity, filter;
}

/* Ünite Listesi Animasyonları */
.unit-item {
    animation: slideInFromBottom 0.4s ease-out forwards;
    animation-delay: calc(var(--unit-delay, 0) * 0.05s);
    opacity: 0;
}

.unit-item.visible {
    opacity: 1;
}

/* .unit-item:hover {
    animation: none;
} */

/* Ripple Efekti */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.ripple-effect:active::before {
    width: 300px;
    height: 300px;
}

/* Loading Animasyonları */
.loading-spinner {
    position: relative;
}

.loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border: 3px solid rgba(0, 122, 255, 0.2);
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: spinning 1s linear infinite;
}

/* Stagger Animasyonları */
.stagger-children > * {
    animation-delay: calc(var(--stagger-delay, 0) * 0.1s);
}

/* Parallax Efektleri */
.parallax-element {
    transition: transform 0.1s ease-out;
}

/* Micro Interactions */
.micro-bounce {
    transition: transform 0.1s ease;
}

.micro-bounce:active {
    transform: scale(0.98);
}

/* Feature chip open/close mikro animasyonları */
@keyframes chipOpen {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.06); filter: brightness(1.05); }
    100% { transform: scale(1); filter: brightness(1); }
}

@keyframes chipClose {
    0% { transform: scale(1); filter: brightness(1); }
    100% { transform: scale(0.98); filter: brightness(0.98); }
}

.feature-chip.chip-opening { animation: chipOpen 240ms ease-out !important; will-change: transform, filter; }
.feature-chip.chip-closing { animation: chipClose 200ms ease-in !important; will-change: transform, filter; }

/* Focus Animasyonları */
.focus-ring:focus {
    animation: focusRing 0.3s ease-out;
}

@keyframes focusRing {
    from {
        outline-width: 0;
        outline-offset: 0;
    }
    to {
        outline-width: 2px;
        outline-offset: 2px;
    }
}

/* Gesture Animasyonları */
.swipe-left {
    animation: swipeLeft 0.3s ease-out;
}

.swipe-right {
    animation: swipeRight 0.3s ease-out;
}

@keyframes swipeLeft {
    0% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

@keyframes swipeRight {
    0% { transform: translateX(0); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(0); }
}

/* Long Press Animasyonu */
.long-press {
    animation: longPressGlow 0.8s ease-in-out;
}

@keyframes longPressGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 122, 255, 0.2);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(0, 122, 255, 0);
    }
}

/* Elastic Animasyonları */
.elastic-in {
    animation: elasticIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes elasticIn {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Performance Optimizations */
.book-item,
.extra-material,
.modal-content {
    will-change: transform;
}

/* Animation End Cleanup */
.book-item.animation-complete,
.extra-material.animation-complete,
.modal-content.animation-complete {
    will-change: auto;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .book-item:hover {
        transform: none;
    }
    
    .book-float,
    .spinning,
    .drag-pulse,
    .glow-pulse {
        animation: none;
    }
}

/* Touch Device Specific */
@media (pointer: coarse) {
    .book-item:active {
        animation: touchFeedback 0.2s ease-out;
    }
    
    .extra-material:active {
        animation: touchFeedback 0.2s ease-out;
    }
    
    /* Haptic feedback simulation */
    .haptic-feedback {
        animation: hapticPulse 0.1s ease-out;
    }
    
    @keyframes hapticPulse {
        0% { transform: scale(1); }
        50% { transform: scale(0.98); }
        100% { transform: scale(1); }
    }
}