/* Hide cloned cards when their originals are filtered out */ /*.project__card[data-is-clone="true"][data-filter-status="not-active"],*/ /*.project__card[data-is-clone="true"][data-filter-status="transition-out"] {*/ /* display: none !important;*/ /*}*/ /*================================================================================*/ /* FILTER PROJECTS - FIXED /*================================================================================*/ /* Filter Button */ .filter-btn { transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1); } .filter-btn[data-filter-status="active"] { background-color: #7f0308; } /* Project Cards - Using the actual class from your HTML */ .project__card[data-filter-status="active"] { transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(1) rotate(0.001deg); opacity: 1; visibility: visible; position: relative; pointer-events: auto; } .project__card[data-filter-status="transition-out"] { transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1); transform: scale(0.9) rotate(0.001deg); opacity: 0; visibility: visible; pointer-events: none; } .project__card[data-filter-status="not-active"] { transform: scale(0.9) rotate(0.001deg); opacity: 0; visibility: hidden; position: absolute; pointer-events: none; } /*================================================================================*/ /* FILTER PROJECTS /*================================================================================*/ /* Filter Button */ /*.filter-btn {*/ /* transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);*/ /*}*/ /*.filter-btn[data-filter-status="active"] {*/ /* background-color: #131313;*/ /* color: #EFEEEC;*/ /*}*/ /* Filter List Item */ /*.filter-list__item[data-filter-status="active"] {*/ /* transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);*/ /* transform: scale(1) rotate(0.001deg);*/ /* opacity: 1;*/ /* visibility: visible;*/ /* position: relative;*/ /*}*/ /*.filter-list__item[data-filter-status="transition-out"] {*/ /* transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);*/ /* transform: scale(0.9) rotate(0.001deg);*/ /* opacity: 0;*/ /* visibility: visible;*/ /*}*/ /*.filter-list__item[data-filter-status="not-active"] {*/ /* transform: scale(0.9) rotate(0.001deg);*/ /* opacity: 0;*/ /* visibility: hidden;*/ /* position: absolute;*/ /*}*/ /*================================================================================*/ /* 3D Carousel /*================================================================================*/ /* Base styles - shared across all breakpoints */ [data-3d-carousel] { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* Media containers - handles both images and videos */ [data-media-container] { aspect-ratio: 1; width: 100%; max-width: 100%; position: relative; overflow: hidden; flex-shrink: 0; } /* CRITICAL: Ensure media elements fill their containers */ [data-media-container] img, [data-media-container] video { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Aspect ratio variations */ [data-media-container][data-aspect="5x4"] { aspect-ratio: 5/4; } [data-media-container][data-aspect="16x10"] { aspect-ratio: 16/10; } [data-media-container][data-aspect="3x4"] { aspect-ratio: 3/4; } /* Single item panels - centered */ [data-carousel-item][data-single-item] { justify-content: center; } /* Multi-item panels - spread items */ [data-carousel-item]:not([data-single-item]) { justify-content: space-between; } /* Desktop - 1280px and above */ @media (min-width: 1280px) { /* Carousel panels */ [data-carousel-item] { display: flex; flex-direction: column; justify-content: space-between; gap: 1em; position: absolute; height: auto; max-height: 60vh; } /* Panel size variations */ [data-panel-size="small"] { width: 10em; } [data-panel-size="medium"] { width: 40vh; } [data-panel-size="large"] { width: 60vh; } } /* Mobile/Tablet - Under 1280px */ @media (max-width: 1279px) { /* Carousel panels */ [data-carousel-item] { display: flex; flex-direction: column; justify-content: space-between; gap: 0.75em; position: absolute; height: auto; max-height: 80vh; } /* Panel size variations - using em units */ [data-panel-size="small"] { width: 10em; } [data-panel-size="medium"] { width: 15em; } [data-panel-size="large"] { width: 17em; } /* Performance optimizations for smaller screens */ [data-media-container] { will-change: transform; } [data-media-container] img, [data-media-container] video { image-rendering: -webkit-optimize-contrast; backface-visibility: hidden; -webkit-backface-visibility: hidden; } } /* ================================================================ BUNNY LIGHTBOX ================================================================ */ /* Lightbox */ [data-bunny-lightbox-status] .bunny-lightbox__calc { transition: transform 0.3s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.3s linear, visibility 0.3s linear; opacity: 0; visibility: hidden; transform: scale(0.9) rotate(0.001deg); } [data-bunny-lightbox-status="active"] .bunny-lightbox__calc { opacity: 1; visibility: visible; transform: scale(1) rotate(0.001deg); } [data-bunny-lightbox-status] .bunny-lightbox__dark, [data-bunny-lightbox-status] .bunny-lightbox__close { transition: opacity 0.3s linear, visibility 0.3s linear; opacity: 0; visibility: hidden; } [data-bunny-lightbox-status="active"] .bunny-lightbox__dark, [data-bunny-lightbox-status="active"] .bunny-lightbox__close { opacity: 1; visibility: visible; } /* Animation */ [data-bunny-lightbox-init] :is(.bunny-lightbox-player__placeholder, .bunny-lightbox-player__dark, .bunny-lightbox-player__playpause, .bunny-lightbox-player__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__placeholder, [data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__placeholder, [data-bunny-lightbox-init][data-player-activated="true"][data-player-status="ready"] .bunny-lightbox-player__placeholder { opacity: 0; visibility: hidden; } /* Dark Overlay */ [data-bunny-lightbox-init][data-player-status="paused"] .bunny-lightbox-player__dark, [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__dark { opacity: 0.3; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__dark { opacity: 0; } /* Play/Pause */ [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__playpause, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__playpause { opacity: 0; } [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__playpause { opacity: 1; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__play-svg, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__play-svg { display: none; } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__pause-svg, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__pause-svg { display: block; } /* Loading */ [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__loading { opacity: 1; visibility: visible; } /* Interface */ .bunny-lightbox-player__interface { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-bunny-lightbox-init][data-player-status="playing"] .bunny-lightbox-player__interface, [data-bunny-lightbox-init][data-player-status="loading"] .bunny-lightbox-player__interface { opacity: 0; transform: translateY(1em) rotate(0.001deg); } [data-bunny-lightbox-init][data-player-status="playing"][data-player-hover="active"] .bunny-lightbox-player__interface, [data-bunny-lightbox-init][data-player-status="loading"][data-player-hover="active"] .bunny-lightbox-player__interface { opacity: 1; transform: translateY(0em) rotate(0.001deg); } /* Timeline */ [data-bunny-lightbox-init][data-player-status="idle"][data-player-activated="false"] .bunny-lightbox-player__timeline, [data-bunny-lightbox-init][data-player-status="ready"][data-player-activated="false"] .bunny-lightbox-player__timeline { pointer-events: none; } /* Timeline Handle */ [data-bunny-lightbox-init] .bunny-lightbox-player__timeline-handle { transition: transform 0.15s ease-in-out; } [data-bunny-lightbox-init][data-timeline-drag="true"] .bunny-lightbox-player__timeline-handle { transform: translate(-50%, -50%) scale(1); } /* Fullscreen */ [data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-shrink-svg { display: block; } [data-bunny-lightbox-init][data-player-fullscreen="true"] .bunny-lightbox-player__fullscreen-scale-svg { display: none; } /* Mute */ [data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-mute-svg { display: block; } [data-bunny-lightbox-init][data-player-muted="true"] .bunny-lightbox-player__volume-up-svg { display: none; } /* Cover Mode */ [data-bunny-lightbox-init][data-player-update-size="cover"] { height: 100%; top: 0; left: 0; position: absolute; } [data-bunny-lightbox-init][data-player-update-size="cover"] [data-player-before] { display: none; } [data-bunny-lightbox-init][data-player-update-size="cover"][data-player-fullscreen="false"] .bunny-lightbox-player__video { object-fit: cover; } /* ================================================================ VIDEO ON HOVER - ENHANCED TARGETING WITH SPECIFICITY ================================================================ */ /* Default state - video hidden with all possible selectors */ [data-video-on-hover] video, [data-video-on-hover] .video-card-visual__video, .project__video-wrap video, .project__video-wrap .video-card-visual__video, .video-card-visual video, .video-card-visual .video-card-visual__video { opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; /* Prevent video from blocking interactions */ } /* Active state - video visible */ [data-video-on-hover="active"] video, [data-video-on-hover="active"] .video-card-visual__video, .project__video-wrap[data-video-on-hover="active"] video, .project__video-wrap[data-video-on-hover="active"] .video-card-visual__video { opacity: 1 !important; pointer-events: auto; } /* Not active state - explicitly hidden with maximum specificity */ [data-video-on-hover="not-active"] video, [data-video-on-hover="not-active"] .video-card-visual__video, .project__video-wrap[data-video-on-hover="not-active"] video, .project__video-wrap[data-video-on-hover="not-active"] .video-card-visual__video, .project__card [data-video-on-hover="not-active"] video, .project__card [data-video-on-hover="not-active"] .video-card-visual__video { opacity: 0 !important; pointer-events: none !important; } /* Ensure the image stays visible */ .video-card-visual__img { opacity: 1; transition: opacity 0.3s ease-in-out; } /* Optional: Hide image when video is active */ [data-video-on-hover="active"] .video-card-visual__img { /* Keep image visible as background or hide it */ /* opacity: 0; */ } /*================================================================================*/ /* BUNNY PLAYER /*================================================================================*/ /* Animation */ [data-bunny-background-init] :is(.bunny-bg__placeholder, .bunny-bg__loading) { transition: opacity 0.3s linear, visibility 0.3s linear; } /* Placeholder */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-status="paused"] .bunny-bg__placeholder, [data-bunny-background-init][data-player-activated="true"][data-player-status="ready"] .bunny-bg__placeholder { opacity: 0; visibility: hidden; } /* Play/Pause */ [data-bunny-background-init][data-player-status="playing"] .bunny-bg__play-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__play-svg { display: none; } [data-bunny-background-init][data-player-status="playing"] .bunny-bg__pause-svg, [data-bunny-background-init][data-player-status="loading"] .bunny-bg__pause-svg { display: block; } /* Loading */ [data-bunny-background-init][data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; } /*================================================================================*/ /* 3D Carousel - before mobile /*================================================================================*/ /*[data-3d-carousel] {*/ /* position: relative;*/ /* width: 100%;*/ /* height: 100%;*/ /* display: flex;*/ /* justify-content: center;*/ /* align-items: center;*/ /*}*/ /* Carousel panels */ /*[data-carousel-item] {*/ /* display: flex;*/ /* flex-direction: column;*/ /* justify-content: space-between;*/ /* gap: 1em;*/ /* position: absolute;*/ /*width: 30em;*/ /*width: 20vh;*/ /* height: auto;*/ /* max-height: 60vh;*/ /*}*/ /* Media containers - handles both images and videos */ /*[data-media-container] {*/ /* aspect-ratio: 1;*/ /* width: 100%;*/ /* max-width: 100%;*/ /* position: relative;*/ /* overflow: hidden;*/ /* flex-shrink: 0;*/ /*}*/ /* CRITICAL: Ensure media elements fill their containers */ /*[data-media-container] img,*/ /*[data-media-container] video {*/ /* position: absolute !important;*/ /* top: 0;*/ /* left: 0;*/ /* width: 100%;*/ /* height: 100%;*/ /* object-fit: cover;*/ /*}*/ /* Aspect ratio variations */ /*[data-media-container][data-aspect="5x4"] {*/ /* aspect-ratio: 5/4;*/ /*}*/ /*[data-media-container][data-aspect="16x9"] {*/ /* aspect-ratio: 16/10;*/ /*}*/ /*[data-media-container][data-aspect="3x4"] {*/ /* aspect-ratio: 3/4;*/ /*}*/ /* Panel size variations */ /*[data-panel-size="small"] {*/ /* width: 10em;*/ /*}*/ /*[data-panel-size="medium"] {*/ /*width: 20em;*/ /* width: 40vh;*/ /*}*/ /*[data-panel-size="large"] {*/ /*width: 30em;*/ /* width: 60vh;*/ /*}*/ /* Single item panels - centered */ /*[data-carousel-item][data-single-item] {*/ /* justify-content: center;*/ /*}*/ /* Multi-item panels - spread items */ /*[data-carousel-item]:not([data-single-item]) {*/ /* justify-content: space-between;*/ /*}*/