/**
 * React Bits Inspired Styles — Tarzkutu Premium Entegrasyonu
 * Vanilla CSS/JS implementations of premium UI effects
 * TRAK3D - Mevcut PHP yapısı korunarak uygulandı
 */

/* ============================================
   BLUR TEXT / REVEAL ANIMATION
   ============================================ */
.reactbits-blur-text {
    display: inline-block;
    overflow: hidden;
}

.reactbits-blur-text .blur-word {
    display: inline-block;
    filter: blur(0.4em);
    opacity: 0;
    transform: translateY(0.5em);
    animation: none;
}

.reactbits-blur-text.animated .blur-word {
    animation: reactbits-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reactbits-reveal {
    to {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
}

.reactbits-blur-text .blur-word:nth-child(1) { animation-delay: 0ms; }
.reactbits-blur-text .blur-word:nth-child(2) { animation-delay: 80ms; }
.reactbits-blur-text .blur-word:nth-child(3) { animation-delay: 160ms; }
.reactbits-blur-text .blur-word:nth-child(4) { animation-delay: 240ms; }
.reactbits-blur-text .blur-word:nth-child(5) { animation-delay: 320ms; }
.reactbits-blur-text .blur-word:nth-child(6) { animation-delay: 400ms; }
.reactbits-blur-text .blur-word:nth-child(7) { animation-delay: 480ms; }
.reactbits-blur-text .blur-word:nth-child(8) { animation-delay: 560ms; }
.reactbits-blur-text .blur-word:nth-child(9) { animation-delay: 640ms; }
.reactbits-blur-text .blur-word:nth-child(10) { animation-delay: 720ms; }

/* ============================================
   BOUNCE CARDS
   ============================================ */
.reactbits-bounce-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

.reactbits-bounce-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05),
                0 20px 48px rgba(0,0,0,0.08);
}

.reactbits-bounce-card:active {
    transform: translateY(-4px) scale(0.98);
}

/* ============================================
   ANIMATED GRADIENT BACKGROUND (Aurora/Beams)
   ============================================ */
.reactbits-gradient-bg {
    position: relative;
    overflow: hidden;
}

.reactbits-gradient-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 30% 20%, rgba(100, 99, 203, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 70% 80%, rgba(78, 77, 179, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* ============================================
   SECTION TITLE - Animated Gradient Underline
   ============================================ */
.reactbits-section-title {
    position: relative;
    display: inline-block;
}

.reactbits-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #6463cb, #7a79d9, #6463cb);
    border-radius: 2px;
    animation: reactbits-expand-line 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    box-shadow: 0 0 12px rgba(100, 99, 203, 0.2);
}

@keyframes reactbits-expand-line {
    to { width: 100%; }
}

/* ============================================
   STAGGERED FADE IN
   ============================================ */
.reactbits-stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: reactbits-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reactbits-stagger-item:nth-child(1) { animation-delay: 0ms; }
.reactbits-stagger-item:nth-child(2) { animation-delay: 60ms; }
.reactbits-stagger-item:nth-child(3) { animation-delay: 120ms; }
.reactbits-stagger-item:nth-child(4) { animation-delay: 180ms; }
.reactbits-stagger-item:nth-child(5) { animation-delay: 240ms; }
.reactbits-stagger-item:nth-child(6) { animation-delay: 300ms; }
.reactbits-stagger-item:nth-child(7) { animation-delay: 360ms; }
.reactbits-stagger-item:nth-child(8) { animation-delay: 420ms; }

@keyframes reactbits-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   GLOW EFFECT
   ============================================ */
.reactbits-glow {
    position: relative;
}

.reactbits-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(100, 99, 203, 0.3), transparent 50%);
    filter: blur(12px);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.reactbits-glow:hover::after {
    opacity: 1;
}

/* ============================================
   CARD BORDER GLOW (hover-only, lightweight)
   ============================================ */
.reactbits-border-glow {
    position: relative;
}

.reactbits-border-glow:hover {
    border-color: rgba(100, 99, 203, 0.25);
}

/* ============================================
   PRODUCT CARD Enhanced
   ============================================ */
.reactbits-product-card .product-image img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reactbits-product-card:hover .product-image img {
    transform: scale(1.1);
}

.reactbits-product-card .product-actions {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reactbits-product-card:hover .product-actions {
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   HERO SLIDER Enhanced
   ============================================ */
.reactbits-hero-slide {
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reactbits-hero-slide.active .hero-content h1,
.reactbits-hero-slide.active .hero-content p {
    animation: reactbits-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reactbits-hero-slide.active .hero-content p {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

.reactbits-hero-slide.active .hero-content .btn {
    animation: reactbits-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* ============================================
   FEATURE ICONS Enhanced
   ============================================ */
.reactbits-feature-icon {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.reactbits-feature-icon:hover {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 8px 24px rgba(100, 99, 203, 0.25);
}

/* ============================================
   PROMO BOX Enhanced
   ============================================ */
.reactbits-promo-box {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reactbits-promo-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================
   MAGNETIC BUTTON EFFECT
   ============================================ */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
.gradient-text {
    background: linear-gradient(135deg, #6463cb, #7a79d9, #9b9ae0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   FLOAT ANIMATION
   ============================================ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .reactbits-blur-text .blur-word,
    .reactbits-bounce-card,
    .reactbits-stagger-item,
    .reactbits-product-card .product-image img,
    .reactbits-feature-icon,
    .reactbits-promo-box,
    .float-animation {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .reactbits-gradient-bg::before {
        animation: none;
    }
}