/* 
=====================================================
COLLAGE STYLES - Freeform Overlapping Layouts
=====================================================
This file creates the organic, overlapping image style
similar to binksjardin.com
=====================================================
*/

/* 
=====================================================
HERO COLLAGE SECTION
=====================================================
*/
.collage-hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: 120px 5% 80px;
}

/* Individual collage items */
.collage-item {
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.15);
    transition: transform 0.6s ease, box-shadow 0.4s ease;
}

.collage-item:hover img {
    transform: scale(1.03);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.2);
}

/* 
=====================================================
SIZE CLASSES
=====================================================
*/
.size-xl {
    width: 60%;
    max-width: 900px;
}

.size-lg {
    width: 45%;
    max-width: 650px;
}

.size-md {
    width: 35%;
    max-width: 450px;
}

.size-sm {
    width: 25%;
    max-width: 300px;
}

.size-xs {
    width: 15%;
    max-width: 180px;
}

/* 
=====================================================
POSITION CLASSES
=====================================================
*/
.pos-left {
    left: 5%;
}

.pos-center {
    left: 50%;
    transform: translateX(-50%);
}

.pos-right {
    right: 5%;
}

/* 
=====================================================
LAYER CLASSES (z-index)
=====================================================
*/
.layer-back {
    z-index: 1;
    top: 15%;
}

.layer-mid {
    z-index: 2;
}

.layer-front {
    z-index: 3;
}

/* 
=====================================================
OFFSET CLASSES
=====================================================
*/
.offset-up {
    top: 5%;
}

.offset-down {
    top: 45%;
}

/* 
=====================================================
ROTATION CLASSES
=====================================================
*/
.rotate-cw {
    transform: rotate(3deg);
}

.rotate-cw:hover {
    transform: rotate(0deg);
}

.rotate-ccw {
    transform: rotate(-3deg);
}

.rotate-ccw:hover {
    transform: rotate(0deg);
}

/* Keep center position when rotated */
.pos-center.rotate-cw {
    transform: translateX(-50%) rotate(3deg);
}

.pos-center.rotate-cw:hover {
    transform: translateX(-50%) rotate(0deg);
}

.pos-center.rotate-ccw {
    transform: translateX(-50%) rotate(-3deg);
}

.pos-center.rotate-ccw:hover {
    transform: translateX(-50%) rotate(0deg);
}

/* 
=====================================================
FLOATING ANIMATION (for GIFs and accents)
=====================================================
*/
.floating {
    animation: float 6s ease-in-out infinite;
}

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

/* 
=====================================================
HERO NAME OVERLAY
=====================================================
*/
.hero-name {
    position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 10;
    mix-blend-mode: difference;
}

.hero-name h1 {
    font-family: var(--font-display);
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #ffffff;
    line-height: 0.9;
    margin: 0;
}

/* 
=====================================================
COLLAGE SECTION (Second section with clusters)
=====================================================
*/
.collage-section {
    position: relative;
    min-height: 80vh;
    padding: 100px 5%;
}

.collage-cluster {
    position: relative;
    width: 100%;
    height: 700px;
}

.collage-cluster .collage-item {
    position: absolute;
}

/* Section name styling */
.section-name {
    position: absolute;
    bottom: 5%;
    right: 5%;
    z-index: 10;
}

.section-name h2 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 12vw, 10rem);
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--color-text);
    opacity: 0.15;
    line-height: 0.9;
    margin: 0;
}

/* 
=====================================================
SCATTERED GRID LAYOUT
=====================================================
*/
.scattered {
    padding: 50px 5%;
}

.scatter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 250px);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.scatter-item {
    position: relative;
    overflow: hidden;
}

.scatter-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.scatter-item:hover img {
    transform: scale(1.05);
}

/* Overlap effects for scattered items */
.overlap-left {
    margin-left: -40px;
    z-index: 2;
}

.overlap-up {
    margin-top: -60px;
    z-index: 3;
}

.small-accent {
    width: 80%;
    margin-top: -30px;
}

/* 
=====================================================
RESPONSIVE ADJUSTMENTS
=====================================================
*/
@media (max-width: 1024px) {
    .size-xl {
        width: 75%;
    }
    
    .size-lg {
        width: 55%;
    }
    
    .size-md {
        width: 45%;
    }
    
    .collage-cluster {
        height: 600px;
    }
    
    .scatter-grid {
        grid-template-rows: repeat(3, 200px);
    }
}

@media (max-width: 768px) {
    .collage-hero {
        min-height: auto;
        padding: 100px 3% 60px;
    }
    
    /* Stack items more vertically on mobile */
    .collage-item {
        position: relative;
        width: 90% !important;
        max-width: none;
        margin: 20px auto;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }
    
    .collage-item.size-xs {
        width: 50% !important;
    }
    
    .hero-name {
        position: relative;
        bottom: auto;
        left: auto;
        text-align: center;
        margin-top: 40px;
        mix-blend-mode: normal;
    }
    
    .hero-name h1 {
        color: var(--color-text);
    }
    
    .collage-cluster {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .collage-cluster .collage-item {
        position: relative;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    .scatter-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    
    .scatter-item {
        grid-area: auto !important;
        margin: 0 !important;
    }
    
    .section-name {
        position: relative;
        text-align: center;
        right: auto;
        bottom: auto;
        margin-top: 40px;
    }
}

/* 
=====================================================
EXTRA: Subtle parallax on scroll (optional)
=====================================================
Add class "parallax" to any collage-item for subtle movement
*/
.parallax {
    will-change: transform;
}