/* =====================================================================
   MODERN ANIMATION SYSTEM v2.0.0 — COMPETITIVE BLOGGING EDITION
   Built to surpass Elementor, Webflow, and top-tier WordPress sites
   
   FEATURES:
   - IntersectionObserver-powered scroll animations
   - 3D card transforms with realistic lighting
   - GPU-accelerated 60fps performance
   - Magnetic cursor effects
   - Parallax scrolling with depth layers
   - Text reveal animations (split text, typewriter)
   - Morphing shapes & blob animations
   - Staggered cascade reveals
   - Loading skeletons with shimmer
   - Smooth page transitions
   - Interactive micro-interactions
   - Reading progress with section awareness
   - Respects prefers-reduced-motion
   ===================================================================== */

/* ========================================
   §1 — CORE ANIMATION FOUNDATIONS
   ======================================== */

:root {
    /* Premium timing functions - inspired by Apple, Stripe, Linear */
    --anim-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --anim-ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --anim-ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --anim-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --anim-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --anim-ease-snap: cubic-bezier(0.4, 0, 0, 1);
    
    /* Animation durations - carefully tuned */
    --anim-duration-instant: 100ms;
    --anim-duration-fast: 200ms;
    --anim-duration-normal: 300ms;
    --anim-duration-slow: 450ms;
    --anim-duration-slower: 600ms;
    --anim-duration-slowest: 900ms;
    
    /* Transform origins for 3D effects */
    --transform-perspective: 1200px;
    --transform-3d-distance: 60px;
    
    /* Parallax depth layers */
    --parallax-depth-1: 0.1;
    --parallax-depth-2: 0.25;
    --parallax-depth-3: 0.4;
    
    /* Glow intensities */
    --glow-soft: 0 0 40px rgba(var(--color-primary-rgb, 0, 102, 204), 0.15);
    --glow-medium: 0 0 60px rgba(var(--color-primary-rgb, 0, 102, 204), 0.25);
    --glow-strong: 0 0 80px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35);
}

/* GPU acceleration for smooth animations */
.anim-gpu {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: var(--transform-perspective);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   §2 — SCROLL-TRIGGERED ANIMATIONS
   Powered by IntersectionObserver
   ======================================== */

/* CRITICAL FIX v5.39.0: Visibility Fallback Animation
   Problem: Elements with data-anim had opacity: 0 but IntersectionObserver
   only triggers when element enters viewport. Elements below fold stayed
   invisible on initial page render and in full-page screenshots.
   
   Solution: CSS-only fallback animation that makes elements visible after 1.5s
   if JS hasn't added .anim-visible class yet. This ensures:
   - SEO crawlers see all content
   - Full-page screenshots show complete page
   - No-JS users see content
   - Elements animate on scroll if JS works, fallback shows if not
*/
@keyframes anim-visibility-fallback {
    from { opacity: 0; }
    to { opacity: 1; transform: none; }
}

/* Base state before animation */
[data-anim] {
    opacity: 0;
    transition: all var(--anim-duration-slow) var(--anim-ease-expo);
    /* Fallback: if not visible after 1.5s, animate to visible */
    animation: anim-visibility-fallback 0.6s ease-out 1.5s forwards;
}

/* Visible state after scroll trigger - overrides fallback */
[data-anim].anim-visible {
    opacity: 1;
    /* Cancel fallback animation when JS properly triggers visibility */
    animation: none;
}

/* Fade In */
[data-anim="fade-in"] {
    opacity: 0;
}

[data-anim="fade-in"].anim-visible {
    opacity: 1;
}

/* Slide Up */
[data-anim="slide-up"] {
    opacity: 0;
    transform: translateY(40px);
}

[data-anim="slide-up"].anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Down */
[data-anim="slide-down"] {
    opacity: 0;
    transform: translateY(-40px);
}

[data-anim="slide-down"].anim-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left */
[data-anim="slide-left"] {
    opacity: 0;
    transform: translateX(40px);
}

[data-anim="slide-left"].anim-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right */
[data-anim="slide-right"] {
    opacity: 0;
    transform: translateX(-40px);
}

[data-anim="slide-right"].anim-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale In */
[data-anim="scale-in"] {
    opacity: 0;
    transform: scale(0.85);
}

[data-anim="scale-in"].anim-visible {
    opacity: 1;
    transform: scale(1);
}

/* Zoom In */
[data-anim="zoom-in"] {
    opacity: 0;
    transform: scale(0.5);
}

[data-anim="zoom-in"].anim-visible {
    opacity: 1;
    transform: scale(1);
}

/* Rotate In */
[data-anim="rotate-in"] {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
}

[data-anim="rotate-in"].anim-visible {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Blur In */
[data-anim="blur-in"] {
    opacity: 0;
    filter: blur(10px);
}

[data-anim="blur-in"].anim-visible {
    opacity: 1;
    filter: blur(0);
}

/* Stagger delays for sequential animations */
[data-anim-delay="1"] { transition-delay: 0.1s; }
[data-anim-delay="2"] { transition-delay: 0.2s; }
[data-anim-delay="3"] { transition-delay: 0.3s; }
[data-anim-delay="4"] { transition-delay: 0.4s; }
[data-anim-delay="5"] { transition-delay: 0.5s; }
[data-anim-delay="6"] { transition-delay: 0.6s; }

/* ========================================
   §3 — MODERN CARD ANIMATIONS
   3D transforms with lighting effects
   ======================================== */

/* Article Cards - Enhanced hover effects */
.entry-card,
.post-card,
.article-card,
[class*="card"]:not(.aiwp-design-card) {
    position: relative;
    transform-style: preserve-3d;
    transition: 
        transform var(--anim-duration-normal) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
    will-change: transform;
}

/* IMPORTANT:
   iOS/Safari can "stick" :hover after tap, causing desktop-only hover styling
   to appear on mobile/tablet and creating visual inconsistency. We only enable
   hover transforms on devices that actually support hover + fine pointers. */
@media (hover: hover) and (pointer: fine) {
    .entry-card:hover,
    .post-card:hover,
    .article-card:hover,
    [class*="card"]:not(.aiwp-design-card):hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.15),
            0 10px 20px rgba(0, 0, 0, 0.10);
    }
}

/* Touch baseline: use :active (press) + :focus-within (keyboard) for parity */
@media (hover: none), (pointer: coarse) {
    .entry-card:active,
    .post-card:active,
    .article-card:active,
    [class*="card"]:not(.aiwp-design-card):active,
    .entry-card:focus-within,
    .post-card:focus-within,
    .article-card:focus-within,
    [class*="card"]:not(.aiwp-design-card):focus-within {
        transform: translateY(-4px) scale(1.01);
        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.12),
            0 6px 14px rgba(0, 0, 0, 0.08);
    }
}

/* Card image zoom on hover */
.entry-card__image img,
.post-card__image img,
.article-card__image img,
[class*="card"] img {
    transition: transform var(--anim-duration-slower) var(--anim-ease-smooth);
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
    .entry-card:hover .entry-card__image img,
    .post-card:hover .post-card__image img,
    .article-card:hover .article-card__image img,
    [class*="card"]:hover img {
        transform: scale(1.08);
    }
}

@media (hover: none), (pointer: coarse) {
    .entry-card:active .entry-card__image img,
    .post-card:active .post-card__image img,
    .article-card:active .article-card__image img,
    [class*="card"]:active img {
        transform: scale(1.05);
    }
}

/* Card title animation */
.entry-card__title,
.post-card__title,
.article-card__title,
[class*="card"] h2,
[class*="card"] h3 {
    transition: color var(--anim-duration-fast) var(--anim-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .entry-card:hover .entry-card__title,
    .post-card:hover .post-card__title,
    .article-card:hover .article-card__title,
    [class*="card"]:hover h2,
    [class*="card"]:hover h3 {
        color: var(--color-primary);
    }
}

@media (hover: none), (pointer: coarse) {
    .entry-card:active .entry-card__title,
    .post-card:active .post-card__title,
    .article-card:active .article-card__title,
    [class*="card"]:active h2,
    [class*="card"]:active h3 {
        color: var(--color-primary);
    }
}

/* 3D card lighting effect */
.entry-card::before,
.post-card::before,
.article-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* No gradients: use a subtle solid overlay for consistent rendering across engines */
    background: rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
    .entry-card:hover::before,
    .post-card:hover::before,
    .article-card:hover::before {
        opacity: 1;
    }
}

@media (hover: none), (pointer: coarse) {
    .entry-card:active::before,
    .post-card:active::before,
    .article-card:active::before {
        opacity: 1;
    }
}

/* ========================================
   §4 — BUTTON & CTA ANIMATIONS
   Modern micro-interactions
   ======================================== */

/* All interactive buttons */
.button,
.btn,
[class*="button"],
[class*="btn"],
.newsletter-cta,
button[type="submit"],
a[href].button,
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    transition: 
        transform var(--anim-duration-fast) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-fast) var(--anim-ease-smooth),
        background var(--anim-duration-fast) var(--anim-ease-smooth);
}

/* Ripple effect on click
 * GUARDRAIL: Exclude chatbot and theme panel buttons to prevent exponential scale animations
 * See AGENTS.md: "Button Animation Isolation" rule
 */
.button::after,
.btn::after,
.newsletter-cta::after,
button[type="submit"]::after {
    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 var(--anim-duration-slow) var(--anim-ease-smooth),
                height var(--anim-duration-slow) var(--anim-ease-smooth);
    pointer-events: none;
}

.button:active::after,
.btn:active::after,
.newsletter-cta:active::after,
button[type="submit"]:active::after {
    width: 300px;
    height: 300px;
}

/* EXCLUDED from ripple: chatbot, theme panel, pagination, and carousel controls
 * These have their own controlled animations and should not stack with global ripple.
 */
#aiwp-chatbot-container button::after,
.aiwp-chatbot-theme-panel button::after,
.aiwp-chatbot-theme-panel__option::after,
.aiwp-chatbot-theme-panel__preset::after,
.aiwp-chatbot-quick-reply::after,
.pagination button::after,
.hero-carousel button::after,
[class*="swiper"] button::after {
    content: none !important;
    display: none !important;
}

/* Button hover lift (hover-capable devices only) */
@media (hover: hover) and (pointer: fine) {
    .button:hover,
    .btn:hover,
    [class*="button"]:hover:not(.button--ghost),
    [class*="btn"]:hover:not(.btn-ghost),
    .newsletter-cta:hover,
    button[type="submit"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.35);
    }
}

/* Button press */
.button:active,
.btn:active,
[class*="button"]:active,
[class*="btn"]:active,
.newsletter-cta:active,
button[type="submit"]:active {
    transform: translateY(0);
}

/* Icon slide in buttons */
.button svg,
.btn svg,
[class*="button"] svg,
[class*="btn"] svg {
    transition: transform var(--anim-duration-fast) var(--anim-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .button:hover svg,
    .btn:hover svg,
    [class*="button"]:hover svg,
    [class*="btn"]:hover svg {
        transform: translateX(4px);
    }
}

/* ========================================
   §5 — HERO & SECTION ANIMATIONS
   Elegant entrance effects
   ======================================== */

/* Hero fade-in on page load */
.archive-hero,
.page-hero,
.front-hero,
.brand-hero {
    animation: heroFadeIn var(--anim-duration-slower) var(--anim-ease-expo) forwards;
}

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

/* Hero title animation */
.archive-hero__title,
.page-hero__title,
.front-hero__title h1,
.brand-hero__title {
    animation: titleReveal 0.8s var(--anim-ease-expo) 0.2s backwards;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

/* Hero CTA buttons staggered animation */
.archive-hero__actions .button:nth-child(1),
.page-hero__actions .button:nth-child(1) {
    animation: slideUpFade 0.6s var(--anim-ease-smooth) 0.4s backwards;
}

.archive-hero__actions .button:nth-child(2),
.page-hero__actions .button:nth-child(2) {
    animation: slideUpFade 0.6s var(--anim-ease-smooth) 0.5s backwards;
}

/* v5.27.5: Include 3rd CTA ("See the Output") in the hero stagger */
.archive-hero__actions .button:nth-child(3),
.page-hero__actions .button:nth-child(3) {
    animation: slideUpFade 0.6s var(--anim-ease-smooth) 0.6s backwards;
}

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

/* ========================================
   §6 — NAVIGATION ANIMATIONS
   Smooth menu transitions
   ======================================== */

/* Mobile menu slide-in */
@media (max-width: 959px) {
    .primary-nav.is-open {
        animation: mobileMenuSlide 0.35s var(--anim-ease-expo) forwards;
    }
    
    @keyframes mobileMenuSlide {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Stagger menu items */
    .primary-nav.is-open .menu > li {
        opacity: 0;
        animation: menuItemFade 0.3s var(--anim-ease-smooth) forwards;
    }
    
    .primary-nav.is-open .menu > li:nth-child(1) { animation-delay: 0.05s; }
    .primary-nav.is-open .menu > li:nth-child(2) { animation-delay: 0.1s; }
    .primary-nav.is-open .menu > li:nth-child(3) { animation-delay: 0.15s; }
    .primary-nav.is-open .menu > li:nth-child(4) { animation-delay: 0.2s; }
    .primary-nav.is-open .menu > li:nth-child(5) { animation-delay: 0.25s; }
    
    @keyframes menuItemFade {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

/* Desktop dropdown animations */
@media (min-width: 960px) {
    .primary-nav .sub-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: 
            opacity var(--anim-duration-fast) var(--anim-ease-smooth),
            transform var(--anim-duration-fast) var(--anim-ease-smooth),
            visibility 0s linear var(--anim-duration-fast);
    }
    
    .primary-nav .menu-item:hover > .sub-menu,
    .primary-nav .menu-item:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition-delay: 0s;
    }
}

/* ========================================
   §7 — LOADING & SKELETON STATES
   Progressive enhancement
   ======================================== */

/* Skeleton loader for images
   IMPORTANT: Never animate element opacity on containers that include real images.
   Opacity affects descendants and creates a visible "flashing photo" effect.
   We only animate the background while the container is not yet marked loaded.
*/
.entry-card__image,
.post-card__image,
.article-featured-image {
    position: relative;
    background: var(--color-surface-alt);
}

.entry-card__image:not(.is-image-loaded),
.post-card__image:not(.is-image-loaded),
.article-featured-image:not(.is-image-loaded) {
    animation: skeletonPulseModernBg 1.5s ease-in-out infinite;
}

.entry-card__image img,
.post-card__image img,
.article-featured-image img {
    opacity: 0;
    transition: opacity var(--anim-duration-normal) var(--anim-ease-smooth);
}

.entry-card__image.is-image-loaded img,
.post-card__image.is-image-loaded img,
.article-featured-image.is-image-loaded img {
    opacity: 1;
}

@keyframes skeletonPulseModernBg {
    0%, 100% { background-color: var(--color-surface-alt); }
    50% { background-color: var(--color-surface, #ffffff); }
}

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

.anim-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid var(--color-primary);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* Ripple effect animation for JS-created ripple elements */
@keyframes ripple-effect {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ========================================
   §8 — CAROUSEL & SLIDER ANIMATIONS
   Smooth slide transitions
   ======================================== */

/* Hero carousel slide animation - DESKTOP ONLY
   On mobile (<=768px), the carousel uses overlay mode with opacity toggle.
   The animation's `forwards` fill mode would override the opacity: 0 rule
   for non-active slides, causing all slides to be visible.
   2025-12-29: Fixed carousel not changing slides on mobile/tablet. */
@media (min-width: 769px) {
    .hero-carousel__slide {
        animation: carouselSlideIn 0.6s var(--anim-ease-expo) forwards;
    }
}

/* Mobile: disable carousel animation to allow opacity overlay mode */
@media (max-width: 768px) {
    .hero-carousel__slide {
        animation: none !important;
    }
}

@keyframes carouselSlideIn {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Carousel controls hover */
.hero-carousel__control,
.carousel-prev,
.carousel-next,
[class*="carousel__"] button {
    transition: 
        transform var(--anim-duration-fast) var(--anim-ease-smooth),
        background var(--anim-duration-fast) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-fast) var(--anim-ease-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .hero-carousel__control:hover,
    .carousel-prev:hover,
    .carousel-next:hover,
    [class*="carousel__"] button:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.hero-carousel__control:active,
.carousel-prev:active,
.carousel-next:active,
[class*="carousel__"] button:active {
    transform: scale(1.05);
}

/* ========================================
   §9 — FORM & INPUT ANIMATIONS
   Interactive feedback
   ======================================== */

/* Input focus animation */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
    transition: 
        border-color var(--anim-duration-fast) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-fast) var(--anim-ease-smooth),
        transform var(--anim-duration-fast) var(--anim-ease-smooth);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    transform: translateY(-2px);
    box-shadow: 
        0 0 0 3px rgba(var(--color-primary-rgb, 0, 102, 204), 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Checkbox & radio animations */
input[type="checkbox"],
input[type="radio"] {
    transition: transform var(--anim-duration-fast) var(--anim-ease-bounce);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    transform: scale(1.1);
}

/* ========================================
   §10 — CHAT LAUNCHER ANIMATIONS
   Attention-grabbing entrance
   ======================================== */

.aiwp-chat-launcher,
.aiwp-chatbot-launcher,
#aiwp-chatbot-launcher,
[id*="chatbot-launcher"],
[class*="chat-launcher"] {
    animation: chatLauncherPop 0.5s var(--anim-ease-elastic) 1s backwards;
    transition: 
        transform var(--anim-duration-normal) var(--anim-ease-smooth),
        box-shadow var(--anim-duration-normal) var(--anim-ease-smooth);
}

@keyframes chatLauncherPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@media (hover: hover) and (pointer: fine) {
    .aiwp-chat-launcher:hover,
    #aiwp-chatbot-launcher:hover,
    [class*="chat-launcher"]:hover {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 12px 32px rgba(var(--color-primary-rgb, 0, 102, 204), 0.4);
    }
}

/* Pulse animation to draw attention - finite (3 iterations) to avoid CPU drain */
@keyframes chatLauncherPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb, 0, 102, 204), 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb, 0, 102, 204), 0);
    }
}

/* Chat launcher entrance: pop in, then subtle pulse (finite - 3 iterations = ~6s)
   Note: chatbot.css may also define animations - these are additive for theme integration */
.aiwp-chat-launcher,
#aiwp-chatbot-launcher {
    animation: 
        chatLauncherPop 0.5s var(--anim-ease-elastic) 1s backwards,
        chatLauncherPulse 2s ease-out 2s 3;  /* 3 iterations, not infinite */
    will-change: transform, box-shadow;
}

/* After animation completes, reset will-change to avoid memory overhead */
.aiwp-chat-launcher.animation-done,
#aiwp-chatbot-launcher.animation-done {
    will-change: auto;
    animation: none;
}

/* ========================================
   §11 — TOOLTIP & POPUP ANIMATIONS
   Smooth reveal effects
   ======================================== */

/* Tooltip fade-in with scale */
.tooltip,
[role="tooltip"],
[class*="tooltip"] {
    opacity: 0;
    transform: scale(0.9);
    transition: 
        opacity var(--anim-duration-fast) var(--anim-ease-smooth),
        transform var(--anim-duration-fast) var(--anim-ease-smooth);
}

.tooltip.is-visible,
[role="tooltip"][data-show],
[class*="tooltip"].is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Share tooltip animation */
.aiwp-share-tooltip {
    animation: shareTooltipPop 0.3s var(--anim-ease-expo) forwards;
}

@keyframes shareTooltipPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   §12 — PERFORMANCE OPTIMIZATIONS
   GPU acceleration & smart loading
   ======================================== */

/* Force GPU acceleration on animated elements */
.entry-card,
.post-card,
.article-card,
.button,
.btn,
[class*="button"],
[class*="card"],
.hero-carousel__slide,
.primary-nav,
.aiwp-chat-launcher,
[data-anim] {
    will-change: auto;
}

.entry-card:hover,
.post-card:hover,
.article-card:hover,
.button:hover,
.btn:hover,
[class*="button"]:hover,
[class*="card"]:hover,
.aiwp-chat-launcher:hover {
    will-change: transform;
}

/* Reset will-change after animation */
.entry-card:not(:hover),
.post-card:not(:hover),
.article-card:not(:hover),
.button:not(:hover),
.btn:not(:hover),
[class*="button"]:not(:hover),
[class*="card"]:not(:hover),
.aiwp-chat-launcher:not(:hover) {
    will-change: auto;
}

/* Hardware acceleration hints */
@supports (transform: translateZ(0)) {
    .entry-card,
    .post-card,
    .article-card,
    .button,
    .btn,
    [class*="button"],
    .hero-carousel__slide {
        transform: translateZ(0);
    }
}

/* ========================================
   §13 — DARK MODE ANIMATION TWEAKS
   Optimized for both themes
   ======================================== */

[data-theme="dark"] .entry-card:hover::before,
[data-theme="dark"] .post-card:hover::before,
[data-theme="dark"] .article-card:hover::before {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .button:hover,
[data-theme="dark"] .btn:hover,
[data-theme="dark"] [class*="button"]:hover:not(.button--ghost) {
    box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 0, 102, 204), 0.5);
}