/* ========================================
   GSAP ANIMATIONS SUPPORT STYLES
   High-end, flashy animations
   ======================================== */

/* ========================================
   ANIMATION SUPPORT
   ======================================== */

/* Letter animation for text */
.letter {
    display: inline-block;
    will-change: opacity, filter;
}

/* Floating pill for category slider */
.floating-pill {
    will-change: left, width;
}

/* Category tabs positioning */
.category-tabs {
    position: relative;
}

.category-tabs-wrapper {
    position: relative;
}

/* Story cards 3D support */
.story-card {
    will-change: transform;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.story-image {
    will-change: transform;
    backface-visibility: hidden;
}

/* Button animation support */
.btn-featured,
.btn-newsletter,
.btn-primary,
.btn {
    will-change: transform;
    position: relative;
}

.read-story-link {
    will-change: transform;
    position: relative;
}

/* Newsletter section support */
.newsletter-title {
    will-change: letter-spacing;
}

.newsletter-form {
    will-change: opacity, transform;
}

/* ========================================
   HERO SECTION ENHANCEMENTS
   ======================================== */

.featured-blog-hero {
    will-change: filter;
    perspective: 1200px;
}

.featured-blog-bg {
    will-change: transform, filter;
    backface-visibility: hidden;
}

.featured-blog-content {
    will-change: opacity;
}

/* ========================================
   CATEGORY TABS ENHANCEMENTS
   ======================================== */

.category-tab {
    will-change: transform;
    position: relative;
    z-index: 1;
}

.category-tab::after {
    will-change: width;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* 3D rendering acceleration */
.story-card,
.featured-blog-hero,
.featured-blog-bg {
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* GPU acceleration for transforms */
.story-card,
.featured-blog-bg,
.btn,
button {
    transform: translateZ(0);
}

/* ========================================
   MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 767px) {
    /* Hide custom cursor on mobile */
    .custom-cursor {
        display: none;
    }

    /* Disable 3D transforms on mobile for better performance */
    .story-card {
        perspective: none;
        transform-style: flat;
    }

    .featured-blog-bg {
        filter: none !important;
    }

    /* Simplify animations on mobile */
    .story-card,
    .featured-blog-hero,
    .btn {
        will-change: auto;
    }

    /* Disable tilt effect */
    .story-card {
        transform: none !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .custom-cursor {
        display: none;
    }

    .story-card,
    .featured-blog-hero,
    .btn {
        will-change: auto;
    }
}

/* ========================================
   SCROLL TRIGGER MARKERS
   (for development - remove in production)
   ======================================== */

.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-start,
.gsap-marker-scroller-end,
.gsap-marker-end,
.gsap-marker-time-start,
.gsap-marker-time-end {
    opacity: 0;
    pointer-events: none;
}