/* ============================================
   JOSEPH SAN - SMOKE BACKGROUND & DREAMY EFFECTS
   Animated moving smoke, seamless edges
   ============================================ */

/* Smoke background - transparent base for canvas smoke */
.smoke-background {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    /* Let canvas smoke show */
}

/* Hide static smoke layers - replaced by animated canvas */
.smoke-layer {
    display: none;
}

/* Multiple smoke layers for depth - VISIBLE OPACITY */
.smoke-layer {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(100, 100, 100, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 60% 70% at 80% 30%, rgba(120, 120, 120, 0.20) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 70%, rgba(90, 90, 90, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 30% 80%, rgba(110, 110, 110, 0.18) 0%, transparent 50%);
    animation: smokeFloat 30s ease-in-out infinite;
    opacity: 1;
}

.smoke-layer:nth-child(2) {
    animation-delay: -10s;
    animation-duration: 25s;
    transform: scale(1.2);
    background:
        radial-gradient(ellipse 70% 60% at 70% 50%, rgba(80, 80, 80, 0.30) 0%, transparent 60%),
        radial-gradient(ellipse 50% 80% at 20% 60%, rgba(100, 100, 100, 0.25) 0%, transparent 50%);
    opacity: 1;
}

.smoke-layer:nth-child(3) {
    animation-delay: -20s;
    animation-duration: 35s;
    transform: scale(0.9);
    background:
        radial-gradient(ellipse 90% 50% at 50% 30%, rgba(70, 70, 70, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 80% 70%, rgba(90, 90, 90, 0.22) 0%, transparent 50%);
    opacity: 1;
}

@keyframes smokeFloat {

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

    25% {
        transform: translate(-3%, 2%) scale(1.02);
    }

    50% {
        transform: translate(2%, -3%) scale(0.98);
    }

    75% {
        transform: translate(-1%, 1%) scale(1.01);
    }
}

/* Portfolio Page - Fully Transparent Header */
body:has(.portfolio-slider-section) .header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body:has(.portfolio-slider-section) .header::before,
body:has(.portfolio-slider-section) .header::after {
    display: none !important;
}

/* Simple Edge Vignette - DISABLED for transparent images */
.slide-cover::before {
    display: none;
    /* Removed vignette effect - was visible on transparent images */
}

/* Orientation-based sizing */
.slide-cover {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Unified sizing for both orientations - 25% smaller */
.slider-track[style*="column"] .slide-cover,
.portfolio-slider-section.vertical .slide-cover,
.slider-track[style*="row"] .slide-cover,
.portfolio-slider-section.horizontal .slide-cover {
    width: 100%;
    max-width: 900px;
    /* Reduced 25% from 1200px */
    aspect-ratio: 16/10;
}

/* ===========================================
   SIMPLE IMAGE CONTAINER (No Wave Animation)
   Clean, performant display
   =========================================== */

.ripple-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Clips scaled images to maintain rounded corners */
    border-radius: 24px;
    /* Rounded corners for clipping */
    background: transparent;
    border: none;
}

.ripple-container img,
.ripple-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* No animations - static for performance */
}