/* ============================================
   Card Effects — Techy, Interactive, Fun
   5-effect system for all card types
   ============================================ */

/* --- Animatable custom property for border rotation --- */
@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ============================================
   TIER 1 — Large Cards (all 5 effects)
   ============================================ */

.a84-card,
.feature-card,
.service-detail-pricing-card,
.dual-model-card,
.card-glass,
.card-glass-featured,
.service-preview-card,
.project-card {
    position: relative;
    isolation: isolate;
    --spotlight-x: 50%;
    --spotlight-y: 50%;
    --border-angle: 0deg;
}

/* --- Effect 1: Rotating Animated Gradient Border --- */

.a84-card::before,
.feature-card::before,
.service-detail-pricing-card::before,
.dual-model-card::before,
.card-glass::before,
.card-glass-featured::before,
.service-preview-card::before,
.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--border-angle),
        #667eea,
        #764ba2,
        #ec4899,
        #6366f1,
        #667eea
    );
    -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: rotateBorder 6s linear infinite;
    opacity: 0.35;
    transition: opacity 0.4s ease;
    z-index: -1;
    pointer-events: none;
}

.a84-card:hover::before,
.feature-card:hover::before,
.service-detail-pricing-card:hover::before,
.dual-model-card:hover::before,
.card-glass:hover::before,
.card-glass-featured:hover::before,
.service-preview-card:hover::before,
.project-card:hover::before {
    opacity: 1;
    animation-duration: 3s;
}

/* Featured cards always at full opacity */
.a84-card.a84-card-featured::before,
.dual-model-card.featured::before,
.card-glass-featured::before {
    opacity: 0.7;
}

@keyframes rotateBorder {
    to {
        --border-angle: 360deg;
    }
}

/* --- Effect 2: Cursor Spotlight (positioned by JS) --- */

.a84-card::after,
.feature-card::after,
.service-detail-pricing-card::after,
.dual-model-card::after,
.card-glass::after,
.card-glass-featured::after,
.service-preview-card::after,
.project-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        300px circle at var(--spotlight-x) var(--spotlight-y),
        rgba(99, 102, 241, 0.08),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    pointer-events: none;
}

.a84-card:hover::after,
.feature-card:hover::after,
.service-detail-pricing-card:hover::after,
.dual-model-card:hover::after,
.card-glass:hover::after,
.card-glass-featured:hover::after,
.service-preview-card:hover::after,
.project-card:hover::after {
    opacity: 1;
}

/* --- Effect 3: Shimmer Sweep --- */

.a84-card .a84-card-actions::before,
.feature-card > h4::before,
.service-detail-pricing-card > h4::before,
.dual-model-card > h3::before,
.service-preview-card > h4::before,
.project-card .project-card-body h4::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 70%
    );
    pointer-events: none;
}

.a84-card:hover .a84-card-actions::before,
.feature-card:hover > h4::before,
.service-detail-pricing-card:hover > h4::before,
.dual-model-card:hover > h3::before,
.service-preview-card:hover > h4::before,
.project-card:hover .project-card-body h4::before {
    animation: shimmerSweep 0.8s ease forwards;
}

@keyframes shimmerSweep {
    to {
        left: 200%;
    }
}

/* --- Effect 4: Icon Micro-Animations --- */

/* Idle float */
.a84-card-icon i,
.feature-icon i,
.service-detail-icon i,
.dual-model-icon i,
.project-card-icon i {
    animation: iconFloat 3s ease-in-out infinite;
    display: inline-block;
}

/* Stagger timing for variety */
.feature-card:nth-child(2) .feature-icon i,
.a84-card:nth-child(2) .a84-card-icon i,
.project-card:nth-child(2) .project-card-icon i { animation-delay: 0.3s; }
.feature-card:nth-child(3) .feature-icon i,
.a84-card:nth-child(3) .a84-card-icon i,
.project-card:nth-child(3) .project-card-icon i { animation-delay: 0.6s; }
.feature-card:nth-child(4) .feature-icon i,
.a84-card:nth-child(4) .a84-card-icon i,
.project-card:nth-child(4) .project-card-icon i { animation-delay: 0.9s; }
.feature-card:nth-child(5) .feature-icon i { animation-delay: 1.2s; }
.feature-card:nth-child(6) .feature-icon i { animation-delay: 1.5s; }

/* Hover bounce */
.a84-card:hover .a84-card-icon i,
.feature-card:hover .feature-icon i,
.service-detail-pricing-card:hover .service-detail-icon i,
.dual-model-card:hover .dual-model-icon i,
.project-card:hover .project-card-icon i {
    animation: iconBounce 0.5s ease forwards;
}

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

@keyframes iconBounce {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* --- Effect 5: Glowing Edge Pulse --- */

.a84-card:hover,
.feature-card:hover,
.service-detail-pricing-card:hover,
.dual-model-card:hover,
.card-glass:hover,
.card-glass-featured:hover,
.service-preview-card:hover,
.project-card:hover {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(102, 126, 234, 0.15),
                    0 0 30px rgba(102, 126, 234, 0.05);
    }
    33% {
        box-shadow: 0 0 15px rgba(118, 75, 162, 0.15),
                    0 0 30px rgba(118, 75, 162, 0.05);
    }
    66% {
        box-shadow: 0 0 15px rgba(236, 72, 153, 0.15),
                    0 0 30px rgba(236, 72, 153, 0.05);
    }
}

/* ============================================
   TIER 2 — Small Items (border glow only)
   ============================================ */

.service-feature-item,
.service-price-option {
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-feature-item:hover {
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.12);
}

.service-price-option:hover {
    box-shadow: 0 0 12px rgba(118, 75, 162, 0.12);
}

.check-list li {
    transition: transform 0.2s ease, padding-left 0.2s ease;
}

.check-list li:hover {
    transform: translateX(3px);
}

.footer-links a {
    transition: color 0.2s ease, padding-left 0.2s ease, text-shadow 0.2s ease;
}

.footer-links a:hover {
    text-shadow: 0 0 8px rgba(99, 102, 241, 0.25);
}

/* ============================================
   3D TILT — Base styles (JS adds transforms)
   ============================================ */

.a84-card,
.feature-card,
.service-detail-pricing-card,
.dual-model-card,
.card-glass,
.card-glass-featured,
.service-preview-card,
.project-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Content sits above the pseudo-elements (exclude absolutely-positioned badges) */
.a84-card > *:not(.a84-badge-popular):not(.a84-badge-delayed),
.feature-card > *,
.service-detail-pricing-card > *,
.dual-model-card > *,
.card-glass > *,
.card-glass-featured > *,
.service-preview-card > *,
.project-card > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   DARK MODE Adjustments
   ============================================ */

[data-theme="dark"] .a84-card::after,
[data-theme="dark"] .feature-card::after,
[data-theme="dark"] .service-detail-pricing-card::after,
[data-theme="dark"] .dual-model-card::after,
[data-theme="dark"] .card-glass::after,
[data-theme="dark"] .card-glass-featured::after,
[data-theme="dark"] .service-preview-card::after,
[data-theme="dark"] .project-card::after {
    background: radial-gradient(
        300px circle at var(--spotlight-x) var(--spotlight-y),
        rgba(99, 102, 241, 0.12),
        transparent 60%
    );
}

[data-theme="dark"] .a84-card:hover,
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .service-detail-pricing-card:hover,
[data-theme="dark"] .dual-model-card:hover,
[data-theme="dark"] .card-glass:hover,
[data-theme="dark"] .card-glass-featured:hover,
[data-theme="dark"] .service-preview-card:hover,
[data-theme="dark"] .project-card:hover {
    animation: glowPulseDark 2s ease-in-out infinite;
}

@keyframes glowPulseDark {
    0%, 100% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.2),
                    0 0 40px rgba(102, 126, 234, 0.06);
    }
    33% {
        box-shadow: 0 0 20px rgba(118, 75, 162, 0.2),
                    0 0 40px rgba(118, 75, 162, 0.06);
    }
    66% {
        box-shadow: 0 0 20px rgba(236, 72, 153, 0.2),
                    0 0 40px rgba(236, 72, 153, 0.06);
    }
}

[data-theme="dark"] .service-feature-item:hover {
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.18);
}

[data-theme="dark"] .service-price-option:hover {
    box-shadow: 0 0 14px rgba(118, 75, 162, 0.18);
}

[data-theme="dark"] .footer-links a:hover {
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.35);
}

/* ============================================
   ACCESSIBILITY — Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .a84-card::before,
    .feature-card::before,
    .service-detail-pricing-card::before,
    .dual-model-card::before,
    .card-glass::before,
    .card-glass-featured::before,
    .service-preview-card::before,
    .project-card::before {
        animation: none;
    }

    .a84-card-icon i,
    .feature-icon i,
    .service-detail-icon i,
    .dual-model-icon i,
    .project-card-icon i {
        animation: none;
    }

    .a84-card:hover,
    .feature-card:hover,
    .service-detail-pricing-card:hover,
    .dual-model-card:hover,
    .card-glass:hover,
    .card-glass-featured:hover,
    .service-preview-card:hover,
    .project-card:hover {
        animation: none;
    }

    .a84-card:hover .a84-card-actions::before,
    .feature-card:hover > h4::before,
    .service-detail-pricing-card:hover > h4::before,
    .dual-model-card:hover > h3::before,
    .service-preview-card:hover > h4::before,
    .project-card:hover .project-card-body h4::before {
        animation: none;
    }
}

/* ============================================
   MOBILE — Disable tilt, keep visual effects
   ============================================ */

@media (hover: none) {
    .a84-card,
    .feature-card,
    .service-detail-pricing-card,
    .dual-model-card,
    .card-glass,
    .card-glass-featured,
    .service-preview-card,
    .project-card {
        transform: none !important;
    }

    /* Keep border animation visible but at idle speed */
    .a84-card::before,
    .feature-card::before,
    .service-detail-pricing-card::before,
    .dual-model-card::before,
    .card-glass::before,
    .card-glass-featured::before,
    .service-preview-card::before,
    .project-card::before {
        opacity: 0.5;
    }

    /* Disable spotlight on touch */
    .a84-card::after,
    .feature-card::after,
    .service-detail-pricing-card::after,
    .dual-model-card::after,
    .card-glass::after,
    .card-glass-featured::after,
    .service-preview-card::after,
    .project-card::after {
        display: none;
    }
}