/* ============================================
   EFFECTS SYSTEM — Multi-Trigger Composable
   ============================================ */

/* CSS custom property defaults - Now fully dynamic via JS */
:root {
    --effect-scale: 1.05;
    --effect-lift: -15px;
    --effect-glow-spread: 20px;
    --effect-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Animation base vars */
    --anim-pulse-scale: 1.04;
    --anim-shake-dist: 8px;
    --anim-shake-rot: 1deg;
}

/* Base transition for all interactive cards */
.service-card,
.benefit-item,
.benefit-main,
.benefit-small,
.team-card,
.benefit-list-item,
.service-list-item,
.benefit-minimal-item {
    transition: all var(--effect-transition);
}

/* Allow overflow when data-overflow-effects is active on the section */
[data-overflow-effects],
[data-overflow-effects] .services-grid,
[data-overflow-effects] .benefits-grid,
[data-overflow-effects] .team-grid,
[data-overflow-effects] .services-featured,
[data-overflow-effects] .benefits-featured,
[data-overflow-effects] .featured-secondary,
[data-overflow-effects] .services-list,
[data-overflow-effects] .services-carousel,
[data-overflow-effects] .benefits-carousel,
[data-overflow-effects] .carousel-track {
    overflow: visible !important;
}

[data-overflow-effects] .service-card,
[data-overflow-effects] .benefit-item,
[data-overflow-effects] .benefit-main,
[data-overflow-effects] .benefit-small,
[data-overflow-effects] .benefit-list-item,
[data-overflow-effects] .benefit-minimal-item,
[data-overflow-effects] .service-list-item,
[data-overflow-effects] .featured-main,
[data-overflow-effects] .carousel-slide,
[data-overflow-effects] .team-card {
    overflow: visible !important;
}

/* ============================================
   HOVER EFFECTS (applied via [data-hover-*])

   IMPORTANT: showcase.css defines hardcoded
   :hover transforms on .service-card, .benefit-item,
   .team-card etc. These compete with our effects.
   We MUST reset them when an effect is configured,
   then apply our effect with !important.
   ============================================ */

/* --- RESET: neutralize showcase.css default hovers when effects are active --- */
[data-hover-scale] .service-card:hover,
[data-hover-scale] .benefit-item:hover,
[data-hover-scale] .benefit-main:hover,
[data-hover-scale] .benefit-small:hover,
[data-hover-scale] .team-card:hover,
[data-hover-lift] .service-card:hover,
[data-hover-lift] .benefit-item:hover,
[data-hover-lift] .benefit-main:hover,
[data-hover-lift] .benefit-small:hover,
[data-hover-lift] .team-card:hover,
[data-hover-glow] .service-card:hover,
[data-hover-glow] .benefit-item:hover,
[data-hover-glow] .benefit-main:hover,
[data-hover-glow] .benefit-small:hover,
[data-hover-glow] .team-card:hover,
[data-hover-pulse] .service-card:hover,
[data-hover-pulse] .benefit-item:hover,
[data-hover-pulse] .benefit-main:hover,
[data-hover-pulse] .benefit-small:hover,
[data-hover-pulse] .team-card:hover,
[data-hover-border-flow] .service-card:hover,
[data-hover-border-flow] .benefit-item:hover,
[data-hover-border-flow] .benefit-main:hover,
[data-hover-border-flow] .benefit-small:hover,
[data-hover-border-flow] .team-card:hover,
[data-hover-blur-others] .service-card:hover,
[data-hover-blur-others] .benefit-item:hover,
[data-hover-blur-others] .benefit-main:hover,
[data-hover-blur-others] .benefit-small:hover,
[data-hover-blur-others] .team-card:hover,
[data-hover-dim] .service-card:hover,
[data-hover-dim] .benefit-item:hover,
[data-hover-dim] .benefit-main:hover,
[data-hover-dim] .benefit-small:hover,
[data-hover-dim] .team-card:hover {
    transform: none !important;
    box-shadow: none !important;
    position: relative;
}

/* --- EFFECT: Scale --- */
[data-hover-scale] .service-card:hover,
[data-hover-scale] .benefit-item:hover,
[data-hover-scale] .benefit-main:hover,
[data-hover-scale] .benefit-small:hover,
[data-hover-scale] .team-card:hover {
    transform: scale(var(--effect-scale)) !important;
    z-index: 10;
}

/* Scale intensity is now set as --effect-scale via inline style from JS */

/* --- EFFECT: Lift --- */
[data-hover-lift] .service-card:hover,
[data-hover-lift] .benefit-item:hover,
[data-hover-lift] .benefit-main:hover,
[data-hover-lift] .benefit-small:hover,
[data-hover-lift] .team-card:hover {
    transform: translateY(var(--effect-lift)) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35) !important;
    z-index: 10;
}

/* Lift intensity is now set as --effect-lift via inline style from JS */

/* --- EFFECT: Glow --- */
[data-hover-glow] .service-card:hover,
[data-hover-glow] .benefit-item:hover,
[data-hover-glow] .benefit-main:hover,
[data-hover-glow] .benefit-small:hover,
[data-hover-glow] .team-card:hover {
    box-shadow: 0 0 var(--effect-glow-spread) var(--primary-glow, rgba(245, 158, 11, 0.3)),
        0 0 calc(var(--effect-glow-spread) * 2) var(--primary-glow, rgba(245, 158, 11, 0.15)) !important;
    border-color: var(--primary);
}

/* Glow intensity is now set as --effect-glow-spread via inline style from JS */

/* --- EFFECT: Pulse --- */
[data-hover-pulse] .service-card:hover,
[data-hover-pulse] .benefit-item:hover,
[data-hover-pulse] .benefit-main:hover,
[data-hover-pulse] .benefit-small:hover,
[data-hover-pulse] .team-card:hover {
    animation: pulse-effect 1s ease-in-out infinite !important;
}

@keyframes pulse-effect {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(var(--anim-pulse-scale, 1.04));
    }
}

/* Border Flow */
[data-hover-border-flow] .service-card,
[data-hover-border-flow] .benefit-item,
[data-hover-border-flow] .benefit-main,
[data-hover-border-flow] .benefit-small,
[data-hover-border-flow] .team-card {
    position: relative;
    z-index: 1;
}

[data-hover-border-flow] .service-card::after,
[data-hover-border-flow] .benefit-item::after,
[data-hover-border-flow] .benefit-main::after,
[data-hover-border-flow] .benefit-small::after,
[data-hover-border-flow] .team-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    background: linear-gradient(45deg, var(--primary), var(--secondary), var(--primary));
    background-size: 200%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: gradientShift 2s linear infinite;
}

[data-hover-border-flow] .service-card:hover::after,
[data-hover-border-flow] .benefit-item:hover::after,
[data-hover-border-flow] .benefit-main:hover::after,
[data-hover-border-flow] .benefit-small:hover::after,
[data-hover-border-flow] .team-card:hover::after {
    opacity: 1;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Slide Info — reveals extra content on hover */
[data-hover-slide-info] .service-card,
[data-hover-slide-info] .benefit-item,
[data-hover-slide-info] .team-card {
    overflow: hidden;
}

[data-hover-slide-info] .service-card p,
[data-hover-slide-info] .benefit-item p,
[data-hover-slide-info] .team-card p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

[data-hover-slide-info] .service-card:hover p,
[data-hover-slide-info] .benefit-item:hover p,
[data-hover-slide-info] .team-card:hover p {
    max-height: 200px;
    opacity: 1;
}

/* ============================================
   HOVER COMPOSITES (blur-others, dim)
   ============================================ */

/* Blur Others */
[data-hover-blur-others]:hover .service-card:not(:hover),
[data-hover-blur-others]:hover .benefit-item:not(:hover),
[data-hover-blur-others]:hover .benefit-main:not(:hover),
[data-hover-blur-others]:hover .benefit-small:not(:hover),
[data-hover-blur-others]:hover .team-card:not(:hover) {
    filter: blur(4px) grayscale(0.5);
    opacity: 0.5;
    transform: scale(0.96);
}

[data-hover-blur-others] .service-card:hover,
[data-hover-blur-others] .benefit-item:hover,
[data-hover-blur-others] .benefit-main:hover,
[data-hover-blur-others] .benefit-small:hover,
[data-hover-blur-others] .team-card:hover {
    transform: scale(1.08);
    z-index: 20;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Dim Others */
[data-hover-dim]:hover .service-card:not(:hover),
[data-hover-dim]:hover .benefit-item:not(:hover),
[data-hover-dim]:hover .benefit-main:not(:hover),
[data-hover-dim]:hover .benefit-small:not(:hover),
[data-hover-dim]:hover .team-card:not(:hover) {
    opacity: 0.3;
    transform: scale(0.98);
}

/* ============================================
   CLICK EFFECTS (applied via data attributes,
   activated by JS)
   ============================================ */

/* Shake */
.effect-shake {
    animation: shake-effect 0.5s ease-in-out;
}

@keyframes shake-effect {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(calc(var(--anim-shake-dist, 8px) * -1)) rotate(calc(var(--anim-shake-rot, 1deg) * -1));
    }

    40% {
        transform: translateX(var(--anim-shake-dist, 8px)) rotate(var(--anim-shake-rot, 1deg));
    }

    60% {
        transform: translateX(calc(var(--anim-shake-dist, 8px) * -0.6)) rotate(calc(var(--anim-shake-rot, 1deg) * -0.5));
    }

    80% {
        transform: translateX(calc(var(--anim-shake-dist, 8px) * 0.6)) rotate(calc(var(--anim-shake-rot, 1deg) * 0.5));
    }
}

/* ============================================
   FLIP CARDS (dblclick)
   ============================================ */

.flip-container {
    perspective: 1000px;
}

.flip-container .service-card,
.flip-container .benefit-item,
.flip-container .benefit-main,
.flip-container .benefit-small,
.flip-container .team-card {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-container .flipped {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--surface, #1e1e2e);
    border-radius: inherit;
}

/* ============================================
   INTERACTION: EXPAND (Click modal)
   ============================================ */

.card-expanded {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: 80vw !important;
    max-width: var(--expand-max-width, 600px) !important;
    height: auto !important;
    z-index: 1000 !important;
    background: var(--expand-bg, var(--bg-dark)) !important;
    padding: var(--expand-padding, 3rem) !important;
    overflow-y: auto;
    max-height: 80vh;
    border-radius: var(--expand-border-radius, 16px);
}

/* Expand border styles */
.expand-border-none {
    border: none !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

.expand-border-solid {
    border: 2px solid var(--text-muted) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

.expand-border-neon {
    border: 2px solid var(--primary) !important;
    box-shadow: 0 0 30px var(--primary-glow), 0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

.expand-border-glow {
    border: 1px solid var(--primary) !important;
    box-shadow: 0 0 20px var(--primary-glow),
        0 0 60px var(--primary-glow),
        0 25px 80px rgba(0, 0, 0, 0.6) !important;
}

/* Post-expand animations */
.expand-post-pulse {
    animation: expandPulse 1.5s ease infinite;
}

.expand-post-glow-pulse {
    animation: expandGlowPulse 2s ease infinite;
}

.expand-post-shake-settle {
    animation: expandShakeSettle 0.6s ease both;
}

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

@keyframes expandPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.02);
    }
}

@keyframes expandGlowPulse {

    0%,
    100% {
        box-shadow: 0 0 30px var(--primary-glow), 0 25px 80px rgba(0, 0, 0, 0.6);
    }

    50% {
        box-shadow: 0 0 60px var(--primary-glow), 0 0 100px var(--primary-glow), 0 25px 80px rgba(0, 0, 0, 0.6);
    }
}

@keyframes expandShakeSettle {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }

    20% {
        transform: translate(-50%, -50%) rotate(1.5deg);
    }

    40% {
        transform: translate(-50%, -50%) rotate(-1.5deg);
    }

    60% {
        transform: translate(-50%, -50%) rotate(0.8deg);
    }

    80% {
        transform: translate(-50%, -50%) rotate(-0.4deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0);
    }
}

@keyframes expandFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-10px);
    }
}

.card-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 999;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

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

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ============================================
   BORDER STYLES
   ============================================ */

[data-border="solid"] .service-card,
[data-border="solid"] .benefit-item,
[data-border="solid"] .benefit-main,
[data-border="solid"] .benefit-small,
[data-border="solid"] .team-card {
    border: 2px solid var(--border);
}

[data-border="neon"] .service-card,
[data-border="neon"] .benefit-item,
[data-border="neon"] .benefit-main,
[data-border="neon"] .benefit-small,
[data-border="neon"] .team-card {
    border: 1px solid var(--primary);
    box-shadow: 0 0 5px var(--primary), inset 0 0 10px rgba(245, 158, 11, 0.1);
}

[data-border="gradient"] .service-card,
[data-border="gradient"] .benefit-item,
[data-border="gradient"] .benefit-main,
[data-border="gradient"] .benefit-small,
[data-border="gradient"] .team-card {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--surface), var(--surface)),
        linear-gradient(135deg, var(--primary), var(--secondary));
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

[data-entrance="fade-up"] .animate-in {
    animation: entrance-fade-up 0.6s ease forwards;
}

[data-entrance="fade-down"] .animate-in {
    animation: entrance-fade-down 0.6s ease forwards;
}

[data-entrance="scale-in"] .animate-in {
    animation: entrance-scale-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

[data-entrance="slide-left"] .animate-in {
    animation: entrance-slide-left 0.6s ease forwards;
}

[data-entrance="slide-right"] .animate-in {
    animation: entrance-slide-right 0.6s ease forwards;
}

[data-entrance="flip-in"] .animate-in {
    animation: entrance-flip-in 0.7s ease forwards;
}

@keyframes entrance-fade-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entrance-fade-down {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes entrance-scale-in {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes entrance-slide-left {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes entrance-slide-right {
    from {
        opacity: 0;
        transform: translateX(60px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes entrance-flip-in {
    from {
        opacity: 0;
        transform: perspective(600px) rotateX(-60deg);
    }

    to {
        opacity: 1;
        transform: perspective(600px) rotateX(0);
    }
}

/* Pre-animation state */
[data-entrance] [data-delay] {
    opacity: 0;
}

[data-entrance] .animate-in {
    opacity: 1;
}

/* ============================================
   SECTION BACKGROUNDS
   ============================================ */

section[data-bg-type="solid"] {
    background-color: var(--section-bg-color1, transparent);
}

section[data-bg-type="gradient"] {
    background: linear-gradient(135deg,
            var(--section-bg-color1, #1e1e2e),
            var(--section-bg-color2, #2a1e3e));
}

section[data-bg-opacity] {
    position: relative;
}

section[data-bg-opacity]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-dark);
    opacity: calc(1 - var(--section-bg-opacity, 1));
    pointer-events: none;
    z-index: 0;
}

section[data-bg-opacity]>* {
    position: relative;
    z-index: 1;
}

/* ============================================
   LEGACY COMPAT REMOVED
   All effects are now handled via data-attributes and granular config.
   ============================================ */