/* ==========================================================================
   ShowMyAura Ultra - Animations Styles (FIXED)
   Version: 6.0.0
   All animations: Curtain, Spotlight, Bioluminescence, Holographic, 
   Gradient Lines, Outlined Mobile Cards, Animated Borders
   ========================================================================== */

/* ==========================================================================
   1. BIOLUMINESCENCE - Glowing Jellyfish & Fireflies (FULLY FIXED)
   ========================================================================== */

/* The glow container - positioned inside media-box */
.sma-bio-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.6s ease;
    overflow: hidden;
    border-radius: inherit;
}

/* Show glow on hover for all card types */
.hover-bioluminescence .sma-card:hover .sma-bio-glow,
.hover-bioluminescence .sma-slider-card-wrap:hover .sma-bio-glow,
.hover-bioluminescence .sma-tourist-card:hover .sma-bio-glow,
.hover-bioluminescence .sma-outlined-card:hover .sma-bio-glow,
.hover-bioluminescence .sma-framed-card:hover .sma-bio-glow,
.hover-bioluminescence .sma-download-card-wrap:hover .sma-bio-glow,
.hover-bioluminescence .sma-split-item:hover .sma-bio-glow,
.hover-bioluminescence .sma-frame-item:hover .sma-bio-glow,
.hover-bioluminescence .sma-interactive3d-card:hover .sma-bio-glow {
    opacity: 1;
}

.sma-bio-glow svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Jellyfish animations - paused by default, run on hover */
.sma-jellyfish {
    animation-play-state: paused;
    animation-iteration-count: infinite;
    transform-origin: center center;
}

.hover-bioluminescence .sma-card:hover .sma-jellyfish,
.hover-bioluminescence .sma-slider-card-wrap:hover .sma-jellyfish,
.hover-bioluminescence .sma-tourist-card:hover .sma-jellyfish,
.hover-bioluminescence .sma-outlined-card:hover .sma-jellyfish,
.hover-bioluminescence .sma-framed-card:hover .sma-jellyfish,
.hover-bioluminescence .sma-download-card-wrap:hover .sma-jellyfish,
.hover-bioluminescence .sma-split-item:hover .sma-jellyfish,
.hover-bioluminescence .sma-frame-item:hover .sma-jellyfish,
.hover-bioluminescence .sma-interactive3d-card:hover .sma-jellyfish {
    animation-play-state: running;
}

.sma-jelly-1 { animation: sma-jelly-float1 5s infinite both paused; }
.sma-jelly-2 { animation: sma-jelly-float2 15s infinite both paused; }
.sma-jelly-3 { animation: sma-jelly-float3 7s infinite both paused; }

@keyframes sma-jelly-float1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(5px, 10px) scale(1.02); }
}
@keyframes sma-jelly-float2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(6px, -40px) scale(1.03); }
}
@keyframes sma-jelly-float3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(10px, 2px) scale(1.01); }
}

/* Firefly animations */
.sma-firefly {
    opacity: 0;
    transition: opacity 0.4s ease;
    animation-play-state: paused;
}

.hover-bioluminescence .sma-card:hover .sma-firefly,
.hover-bioluminescence .sma-slider-card-wrap:hover .sma-firefly,
.hover-bioluminescence .sma-tourist-card:hover .sma-firefly,
.hover-bioluminescence .sma-outlined-card:hover .sma-firefly,
.hover-bioluminescence .sma-framed-card:hover .sma-firefly,
.hover-bioluminescence .sma-download-card-wrap:hover .sma-firefly,
.hover-bioluminescence .sma-split-item:hover .sma-firefly,
.hover-bioluminescence .sma-frame-item:hover .sma-firefly,
.hover-bioluminescence .sma-interactive3d-card:hover .sma-firefly {
    opacity: 1;
    animation-play-state: running;
}

.sma-firefly-1 { animation: sma-firefly-blink1 2s infinite both ease-in-out paused; }
.sma-firefly-2 { animation: sma-firefly-blink2 2.5s infinite both ease-in-out paused; }
.sma-firefly-3 { animation: sma-firefly-blink3 3s infinite both ease-in-out paused; }
.sma-firefly-4 { animation: sma-firefly-blink4 2.8s infinite both ease-in-out paused; }

@keyframes sma-firefly-blink1 {
    0%, 20%, 40%, 60%, 80%, 100% { opacity: 0.2; }
    10%, 30%, 50%, 70%, 90% { opacity: 1; }
}
@keyframes sma-firefly-blink2 {
    0%, 25%, 50%, 75%, 100% { opacity: 0.15; }
    12%, 37%, 62%, 87% { opacity: 1; }
}
@keyframes sma-firefly-blink3 {
    0%, 30%, 60%, 100% { opacity: 0.2; }
    15%, 45%, 75% { opacity: 1; }
}
@keyframes sma-firefly-blink4 {
    0%, 22%, 44%, 66%, 88%, 100% { opacity: 0.1; }
    11%, 33%, 55%, 77% { opacity: 1; }
}

/* ==========================================================================
   2. SPOTLIGHT FOCUS - Sibling dimming (FIXED: respects columns)
   ========================================================================== */

.hover-spotlight .sma-items-container {
    display: grid !important;
    grid-template-columns: repeat(var(--cols, 3), 1fr) !important;
    gap: 28px;
}

.hover-spotlight .sma-card {
    transition: filter 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

/* Dim siblings when any card is hovered */
.hover-spotlight .sma-items-container:has(.sma-card:hover) .sma-card:not(:hover) {
    filter: brightness(0.3) blur(2px);
    transform: scale(0.92);
}

.hover-spotlight .sma-card:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255,255,255,0.15), 0 15px 45px rgba(0,0,0,0.3);
    z-index: 10;
}

/* Spotlight glow ring */
.hover-spotlight .sma-card:hover::before {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: 5;
    border-radius: inherit;
    background: var(--gradient);
    opacity: 0.3;
    filter: blur(12px);
    pointer-events: none;
    animation: sma-spotlight-pulse 2s ease-in-out infinite alternate;
}

@keyframes sma-spotlight-pulse {
    0% { opacity: 0.2; transform: scale(1); }
    100% { opacity: 0.5; transform: scale(1.02); }
}

/* ==========================================================================
   3. OUTLINED MOBILE CARDS (FIXED: full animation from uploaded file)
   ========================================================================== */

/* ==========================================================================
   OUTLINED MOBILE CARDS – Works on ALL layouts
   ========================================================================== */

/* ── Base styles for all cards when outlined animation is active ── */
.hover-outlined .sma-card,
.hover-outlined .sma-tourist-card,
.hover-outlined .sma-outlined-card,
.hover-outlined .sma-framed-card,
.hover-outlined .sma-download-card-wrap,
.hover-outlined .sma-split-item,
.hover-outlined .sma-frame-item,
.hover-outlined .sma-interactive3d-card,
.hover-outlined .sma-museum-item,
.hover-outlined .sma-slider-card-wrap {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: 3px solid transparent !important;
    border-radius: var(--sma-radius-lg, 12px) !important;
    overflow: hidden !important;
    background: var(--sma-bg, #ffffff) !important;
    position: relative !important;
}

/* ── Dim siblings when any card is hovered ── */
/* Grid & Download Gallery */
.hover-outlined .sma-items-container:has(.sma-card:hover) .sma-card:not(:hover),
.hover-outlined .sma-items-container:has(.sma-download-card-wrap:hover) .sma-download-card-wrap:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Tourist Attraction */
.hover-outlined .sma-tourist-container:has(.sma-tourist-card:hover) .sma-tourist-card:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Wall of Frames */
.hover-outlined .sma-frames-container:has(.sma-frame-item:hover) .sma-frame-item:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Split View */
.hover-outlined .sma-split-list:has(.sma-split-item:hover) .sma-split-item:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Interactive 3D Carousel */
.hover-outlined .sma-interactive3d-wrapper:has(.sma-interactive3d-card:hover) .sma-interactive3d-card:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Museum Wall */
.hover-outlined .sma-museum-grid:has(.sma-museum-item:hover) .sma-museum-item:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Slider */
.hover-outlined .swiper-wrapper:has(.sma-slider-card-wrap:hover) .sma-slider-card-wrap:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}
/* Elegant Framed */
.hover-outlined .sma-items-container:has(.sma-framed-card:hover) .sma-framed-card:not(:hover) {
    opacity: 0.25 !important;
    filter: grayscale(100%) blur(2px) !important;
    transform: scale(0.9) !important;
}

/* ── Highlight the hovered card with outline glow ── */
.hover-outlined .sma-card:hover,
.hover-outlined .sma-tourist-card:hover,
.hover-outlined .sma-outlined-card:hover,
.hover-outlined .sma-framed-card:hover,
.hover-outlined .sma-download-card-wrap:hover,
.hover-outlined .sma-split-item:hover,
.hover-outlined .sma-frame-item:hover,
.hover-outlined .sma-interactive3d-card:hover,
.hover-outlined .sma-museum-item:hover,
.hover-outlined .sma-slider-card-wrap:hover {
    border-color: var(--sma-secondary, #ff3ea5) !important;
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15) !important;
    transform: translateY(-10px) scale(1.02) !important;
    z-index: 10 !important;
}

/* ── Ensure overlay (View Details button) remains visible ── */
.hover-outlined .sma-card .sma-overlay,
.hover-outlined .sma-download-card-wrap .sma-overlay,
.hover-outlined .sma-framed-card .sma-overlay,
.hover-outlined .sma-museum-item .sma-overlay,
.hover-outlined .sma-slider-card-wrap .sma-overlay,
.hover-outlined .sma-tourist-card .sma-overlay,
.hover-outlined .sma-split-item .sma-overlay,
.hover-outlined .sma-frame-item .sma-overlay,
.hover-outlined .sma-interactive3d-card .sma-overlay {
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}
.hover-outlined .sma-card:hover .sma-overlay,
.hover-outlined .sma-download-card-wrap:hover .sma-overlay,
.hover-outlined .sma-framed-card:hover .sma-overlay,
.hover-outlined .sma-museum-item:hover .sma-overlay,
.hover-outlined .sma-slider-card-wrap:hover .sma-overlay,
.hover-outlined .sma-tourist-card:hover .sma-overlay,
.hover-outlined .sma-split-item:hover .sma-overlay,
.hover-outlined .sma-frame-item:hover .sma-overlay,
.hover-outlined .sma-interactive3d-card:hover .sma-overlay {
    opacity: 1 !important;
}


/* ==========================================================================
   3.1 OUTLINED EFFECT FOR OTHER LAYOUTS (Grid, Masonry, Slider, etc.)
   ========================================================================== */

/* This makes the Outline hover animation work for ALL layouts,
   not just the dedicated Outlined Cards layout. It preserves
   the "View Details" button overlay. */

.hover-outlined .sma-items-container {
    display: grid !important;
    grid-template-columns: repeat(var(--cols, 3), 1fr) !important;
    gap: 28px;
}

.hover-outlined .sma-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    border: 3px solid transparent;
    border-radius: var(--sma-radius-lg);
    overflow: hidden;
    background: var(--sma-bg);
}

/* Dim siblings when any card is hovered */
.hover-outlined .sma-items-container:has(.sma-card:hover) .sma-card:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}

/* Highlight hovered card with outline glow */
.hover-outlined .sma-card:hover {
    border-color: var(--sma-secondary);
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
}

/* Ensure the "View Details" overlay is visible on hover */
.hover-outlined .sma-card .sma-overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.hover-outlined .sma-card:hover .sma-overlay {
    opacity: 1;
}

/* For slider cards */
.hover-outlined .sma-slider-card-wrap .sma-overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.hover-outlined .sma-slider-card-wrap:hover .sma-overlay {
    opacity: 1;
}

/* For download gallery */
.hover-outlined .sma-download-card-wrap {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid transparent;
    border-radius: var(--sma-radius-lg);
    overflow: hidden;
    background: var(--sma-bg);
}
.hover-outlined .sma-items-container:has(.sma-download-card-wrap:hover) .sma-download-card-wrap:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}
.hover-outlined .sma-download-card-wrap:hover {
    border-color: var(--sma-secondary);
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    transform: translateY(-10px) scale(1.02);
    z-index: 10;
}

/* For framed cards */
.hover-outlined .sma-framed-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid transparent !important;
}
.hover-outlined .sma-items-container:has(.sma-framed-card:hover) .sma-framed-card:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}
.hover-outlined .sma-framed-card:hover {
    border-color: var(--sma-secondary) !important;
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    transform: translateY(-15px) scale(1.02);
    z-index: 10;
}

/* For tourist cards */
.hover-outlined .sma-tourist-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid transparent;
}
.hover-outlined .sma-tourist-container:has(.sma-tourist-card:hover) .sma-tourist-card:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}
.hover-outlined .sma-tourist-card:hover {
    border-color: var(--sma-secondary);
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    transform: rotateX(0deg) rotateZ(0deg) translateZ(20px) scale(1.02);
    z-index: 10;
}

/* For wall of frames */
.hover-outlined .sma-frame-item {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid transparent;
}
.hover-outlined .sma-frames-container:has(.sma-frame-item:hover) .sma-frame-item:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}
.hover-outlined .sma-frame-item:hover {
    border-color: var(--sma-secondary);
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 10;
}

/* For interactive 3D cards */
.hover-outlined .sma-interactive3d-card {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid transparent;
}
.hover-outlined .sma-interactive3d-wrapper:has(.sma-interactive3d-card:hover) .sma-interactive3d-card:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}
.hover-outlined .sma-interactive3d-card:hover {
    border-color: var(--sma-secondary);
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    z-index: 10;
}

/* For split view items */
.hover-outlined .sma-split-item {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 3px solid transparent !important;
}
.hover-outlined .sma-split-list:has(.sma-split-item:hover) .sma-split-item:not(:hover) {
    opacity: 0.25;
    filter: grayscale(100%) blur(2px);
    transform: scale(0.9);
}
.hover-outlined .sma-split-item:hover {
    border-color: var(--sma-secondary) !important;
    box-shadow: 0 0 40px rgba(255, 62, 165, 0.3), 0 15px 45px rgba(0,0,0,0.15);
    transform: scale(1.02);
    z-index: 10;
}

/* ==========================================================================
   4. HOLOGRAPHIC 3D TILT (FIXED)
   ========================================================================== */
   
   

.hover-holographic .sma-card,
.hover-holographic .sma-tourist-card,
.hover-holographic .sma-framed-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    perspective: 800px;
    will-change: transform;
}

.hover-holographic .sma-card:hover,
.hover-holographic .sma-tourist-card:hover,
.hover-holographic .sma-framed-card:hover {
    transform: rotateX(4deg) rotateY(8deg) translateZ(25px) scale(1.02);
    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}

/* Shine reflection */
.hover-holographic .sma-card .sma-media-box::after,
.hover-holographic .sma-tourist-card .sma-media-box::after,
.hover-holographic .sma-framed-card .sma-media-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 40%, rgba(255,255,255,0.05) 60%, transparent 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 4;
    border-radius: inherit;
}

.hover-holographic .sma-card:hover .sma-media-box::after,
.hover-holographic .sma-tourist-card:hover .sma-media-box::after,
.hover-holographic .sma-framed-card:hover .sma-media-box::after {
    opacity: 1;
}

/* Edge glow */
.hover-holographic .sma-card:hover::before,
.hover-holographic .sma-tourist-card:hover::before,
.hover-holographic .sma-framed-card:hover::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: 0;
    border-radius: inherit;
    background: var(--gradient);
    opacity: 0.15;
    filter: blur(8px);
    pointer-events: none;
}

/* ==========================================================================
   5. GRADIENT LINES (FIXED)
   ========================================================================== */

.hover-gradient_lines .sma-card .sma-media-box,
.hover-gradient_lines .sma-tourist-card .sma-media-box,
.hover-gradient_lines .sma-outlined-card .sma-media-box,
.hover-gradient_lines .sma-framed-card .sma-media-box,
.hover-gradient_lines .sma-download-card-wrap .sma-media-box,
.hover-gradient_lines .sma-split-item .sma-media-box,
.hover-gradient_lines .sma-frame-item .sma-media-box,
.hover-gradient_lines .sma-interactive3d-card .sma-media-box,
.hover-gradient_lines .sma-slider-card .sma-media-box {
    position: relative;
    border-radius: inherit;
    overflow: visible !important;
}

/* The animated gradient border */
.hover-gradient_lines .sma-card .sma-media-box::before,
.hover-gradient_lines .sma-tourist-card .sma-media-box::before,
.hover-gradient_lines .sma-outlined-card .sma-media-box::before,
.hover-gradient_lines .sma-framed-card .sma-media-box::before,
.hover-gradient_lines .sma-download-card-wrap .sma-media-box::before,
.hover-gradient_lines .sma-split-item .sma-media-box::before,
.hover-gradient_lines .sma-frame-item .sma-media-box::before,
.hover-gradient_lines .sma-interactive3d-card .sma-media-box::before,
.hover-gradient_lines .sma-slider-card .sma-media-box::before {
    content: '';
    position: absolute;
    inset: -4px;
    z-index: 1;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
        from var(--gradient-angle, 0deg),
        var(--sma-primary, #6420aa),
        var(--sma-secondary, #ff3ea5),
        var(--sma-primary, #6420aa),
        var(--sma-secondary, #ff3ea5),
        var(--sma-primary, #6420aa)
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: sma-gradient-spin 3s linear infinite;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.hover-gradient_lines .sma-card:hover .sma-media-box::before,
.hover-gradient_lines .sma-tourist-card:hover .sma-media-box::before,
.hover-gradient_lines .sma-outlined-card:hover .sma-media-box::before,
.hover-gradient_lines .sma-framed-card:hover .sma-media-box::before,
.hover-gradient_lines .sma-download-card-wrap:hover .sma-media-box::before,
.hover-gradient_lines .sma-split-item:hover .sma-media-box::before,
.hover-gradient_lines .sma-frame-item:hover .sma-media-box::before,
.hover-gradient_lines .sma-interactive3d-card:hover .sma-media-box::before,
.hover-gradient_lines .sma-slider-card:hover .sma-media-box::before {
    opacity: 1;
}

@keyframes sma-gradient-spin {
    to { --gradient-angle: 360deg; }
}

/* CSS custom property for gradient angle */
@property --gradient-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Fallback for browsers that don't support @property */
@supports not (--gradient-angle: 0deg) {
    .hover-gradient_lines .sma-card .sma-media-box::before,
    .hover-gradient_lines .sma-tourist-card .sma-media-box::before,
    .hover-gradient_lines .sma-outlined-card .sma-media-box::before,
    .hover-gradient_lines .sma-framed-card .sma-media-box::before,
    .hover-gradient_lines .sma-download-card-wrap .sma-media-box::before,
    .hover-gradient_lines .sma-split-item .sma-media-box::before,
    .hover-gradient_lines .sma-frame-item .sma-media-box::before,
    .hover-gradient_lines .sma-interactive3d-card .sma-media-box::before,
    .hover-gradient_lines .sma-slider-card .sma-media-box::before {
        background: linear-gradient(135deg, var(--sma-primary), var(--sma-secondary), var(--sma-primary));
        background-size: 300% 300%;
        animation: sma-gradient-fallback 3s linear infinite;
    }
    @keyframes sma-gradient-fallback {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
}

/* ==========================================================================
   6. ANIMATED BORDERS (ALL 4 STYLES - FIXED)
   ========================================================================== */

.sma-border-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: visible !important;
    z-index: 1;
}

.sma-border-wrap::before,
.sma-border-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    transition: all 0.3s ease;
}

/* 6.1 Flux Chaser */
.sma-border-flux .sma-border-wrap::before {
    border: 3px dashed transparent;
    background: linear-gradient(90deg, var(--sma-primary), var(--sma-secondary), var(--sma-primary)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: sma-flux-move 4s linear infinite;
    background-size: 200% 100%;
}
@keyframes sma-flux-move {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* 6.2 Houdini Gradient */
.sma-border-houdini .sma-border-wrap::before {
    background: conic-gradient(from var(--gradient-angle), var(--sma-primary), var(--sma-secondary), var(--sma-primary));
    border-radius: inherit;
    animation: sma-houdini-rotate 4s linear infinite;
}
@keyframes sma-houdini-rotate {
    from { --gradient-angle: 0deg; }
    to { --gradient-angle: 360deg; }
}

/* 6.3 Glitch Distortion */
.sma-border-glitch .sma-border-wrap::before,
.sma-border-glitch .sma-border-wrap::after {
    inset: -2px;
    border: 2px solid var(--sma-primary);
    background: transparent;
    mix-blend-mode: screen;
    animation: sma-glitch-shift 2s infinite alternate;
}
.sma-border-glitch .sma-border-wrap::after {
    border-color: var(--sma-secondary);
    animation-delay: -0.5s;
    inset: -4px;
}
@keyframes sma-glitch-shift {
    0% { transform: translate(0); clip-path: inset(0 0 0 0); }
    20% { transform: translate(2px, -2px); clip-path: inset(10% 0 20% 0); }
    40% { transform: translate(-2px, 1px); clip-path: inset(30% 0 10% 0); }
    60% { transform: translate(1px, 2px); clip-path: inset(0 20% 0 10%); }
    80% { transform: translate(-1px, -1px); clip-path: inset(10% 10% 20% 20%); }
    100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}

/* 6.4 Data Stream */
.sma-border-datastream .sma-border-wrap::before {
    border: 2px solid transparent;
    background: linear-gradient(90deg, transparent, var(--sma-primary), var(--sma-secondary), transparent) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 200% 100%;
    animation: sma-datastream-flow 3s linear infinite;
}
@keyframes sma-datastream-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ==========================================================================
   7. SHINE EFFECT (Horizontal sweep)
   ========================================================================== */

.sma-card::after,
.sma-download-card::after,
.sma-slider-card::after,
.sma-tourist-card::after,
.sma-outlined-card::after,
.sma-framed-card::after,
.sma-frame-item::after,
.sma-interactive3d-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.25) 30%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.25) 70%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    transition: left 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    z-index: 4;
    mix-blend-mode: soft-light;
    border-radius: inherit;
}

.sma-card:hover::after,
.sma-download-card:hover::after,
.sma-slider-card:hover::after,
.sma-tourist-card:hover::after,
.sma-outlined-card:hover::after,
.sma-framed-card:hover::after,
.sma-frame-item:hover::after,
.sma-interactive3d-card:hover::after {
    left: 120%;
}

/* ==========================================================================
   8. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sma-jellyfish,
    .sma-firefly,
    .sma-card::after,
    .sma-download-card::after,
    .sma-slider-card::after,
    .sma-tourist-card::after,
    .sma-outlined-card::after,
    .sma-framed-card::after,
    .sma-frame-item::after,
    .sma-interactive3d-card::after,
    .sma-border-wrap::before,
    .sma-border-wrap::after,
    .hover-gradient_lines .sma-card .sma-media-box::before,
    .hover-gradient_lines .sma-tourist-card .sma-media-box::before,
    .hover-gradient_lines .sma-outlined-card .sma-media-box::before,
    .hover-gradient_lines .sma-framed-card .sma-media-box::before,
    .hover-gradient_lines .sma-download-card-wrap .sma-media-box::before,
    .hover-gradient_lines .sma-split-item .sma-media-box::before,
    .hover-gradient_lines .sma-frame-item .sma-media-box::before,
    .hover-gradient_lines .sma-interactive3d-card .sma-media-box::before,
    .hover-gradient_lines .sma-slider-card .sma-media-box::before,
    .hover-spotlight .sma-card:hover::before {
        animation: none !important;
        transition: none !important;
    }
    
    .hover-outlined .sma-items-container:has(.sma-card:hover) .sma-card:not(:hover),
    .hover-outlined .sma-items-container:has(.sma-download-card-wrap:hover) .sma-download-card-wrap:not(:hover),
    .hover-outlined .sma-items-container:has(.sma-framed-card:hover) .sma-framed-card:not(:hover),
    .hover-outlined .sma-tourist-container:has(.sma-tourist-card:hover) .sma-tourist-card:not(:hover),
    .hover-outlined .sma-frames-container:has(.sma-frame-item:hover) .sma-frame-item:not(:hover),
    .hover-outlined .sma-interactive3d-wrapper:has(.sma-interactive3d-card:hover) .sma-interactive3d-card:not(:hover),
    .hover-outlined .sma-split-list:has(.sma-split-item:hover) .sma-split-item:not(:hover),
    .hover-outlined .sma-outlined-container:has(.sma-outlined-card:hover) .sma-outlined-card:not(:hover) {
        opacity: 0.5;
        filter: none;
        scale: 0.95;
    }
    
    .hover-outlined .sma-outlined-card:hover,
    .hover-outlined .sma-outlined-card:focus-within {
        scale: 1.01;
        rotate: 0deg;
    }
    .hover-outlined .sma-card:hover,
    .hover-outlined .sma-download-card-wrap:hover,
    .hover-outlined .sma-framed-card:hover,
    .hover-outlined .sma-tourist-card:hover,
    .hover-outlined .sma-frame-item:hover,
    .hover-outlined .sma-interactive3d-card:hover,
    .hover-outlined .sma-split-item:hover {
        transform: scale(1.01);
    }
}

/* ── Museum Wall – Subtle image zoom on hover ── */
.layout-museum .museum-item .sma-media-box img {
    transition: transform 0.8s ease;
}
.layout-museum .museum-item:hover .sma-media-box img {
    transform: scale(1.05);
}