/* ================================
   HERO-GALLERY.CSS
   Hero section with scattered map containers
   Includes: floating animation, Amazon-style zoom
   ================================ */

/* ================================
   HERO SECTION - BASE LAYOUT
   ================================ */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(245, 245, 220, 0.9) 0%, rgba(240, 230, 210, 0.9) 100%);
    padding-top: 80px;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
}

/* Subtle background gradient overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 70%, rgba(139, 69, 19, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(160, 82, 45, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* ================================
   HERO CONTENT LAYOUT
   ================================ */
.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
}

/* ================================
   HERO TEXT - LEFT SIDE
   ================================ */
.hero-text h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
    text-align: center;
    background: linear-gradient(45deg, var(--brand-brown-dark), var(--brand-brown-medium));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.hero-text p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--text-light);
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ================================
   HERO GALLERY CONTAINER - RIGHT SIDE
   ================================ */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative;
}

.maps-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    overflow: visible;
    padding: 100px;
}

/* ================================
   MAP CONTAINERS - SCATTERED LAYOUT
   Each .map-item is a floating map card
   ================================ */
.map-item {
    position: relative;
    background: var(--bg-parchment);
    border: 3px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-in; /* IMPORTANT: cursor for Amazon zoom */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: auto;
    display: block;
}

/* ================================
   ASPECT RATIOS - A-SERIES PAPER + SQUARE
   ================================ */

/* Portrait - A-series aspect ratio (1 : 1.414) */
.map-item[data-orientation="portrait"] {
    width: 325px;
    height: 460px; /* 325 * 1.414 ≈ 460 */
}

/* Landscape - A-series aspect ratio (1.414 : 1) */
.map-item[data-orientation="landscape"] {
    width: 460px; /* 325 * 1.414 */
    height: 325px;
}

/* Square - Perfect 1:1 aspect ratio */
.map-item[data-orientation="square"] {
    width: 325px;
    height: 325px;
}

/* ================================
   MAP IMAGES - SAVE PROTECTED
   ================================ */
.map-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(0.05) contrast(1.05);
    transition: transform 0.2s ease, filter 0.3s ease;
    
    /* SAVE PROTECTION */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: none; /* Prevents dragging */
}

/* ================================
   HOVER EFFECTS - DESKTOP ONLY
   ================================ */
.map-item:hover {
    transform: scale(1.08) rotate(0deg) !important;
    box-shadow: 0 15px 40px rgba(139, 69, 19, 0.3);
    z-index: 999 !important;
    border-color: rgba(139, 69, 19, 0.5);
    isolation: isolate;
}

.map-item:hover img {
    filter: sepia(0) contrast(1.1);
    pointer-events: auto; /* Allows zoom interaction */
    z-index: 10;
}

/* ================================
   AMAZON-STYLE ZOOM
   Activated on hover, follows cursor
   ================================ */
.map-item.zooming img {
    cursor: crosshair;
    transform-origin: center center;
    transform: scale(2.5);
    transition: none; /* Instant response to mouse movement */
}

/* ================================
   MAP POSITIONING - SCATTERED LAYOUT
   Each map has unique position and rotation
   ================================ */
.map-item:nth-child(1) {
    top: 5%;
    left: -2%;
    transform: rotate(-8deg);
    z-index: 3;
    animation: float1 6s ease-in-out infinite;
}

.map-item:nth-child(2) {
    top: -46%;
    left: -15%;
    transform: rotate(5deg);
    z-index: 2;
    animation: float2 7s ease-in-out infinite;
}

.map-item:nth-child(3) {
    top: 40%;
    left: -35%;
    transform: rotate(3deg) translate(-50%, -50%);
    z-index: 4;
    animation: float3 8s ease-in-out infinite;
}

.map-item:nth-child(4) {
    bottom: 5%;
    left: -74%;
    transform: rotate(-6deg);
    z-index: 1;
    animation: float4 7.5s ease-in-out infinite;
}

.map-item:nth-child(5) {
    top: -10%;
    right: 70%;
    transform: rotate(-2deg) translateY(-50%);
    z-index: 2;
    animation: float5 6.5s ease-in-out infinite;
}

/* ================================
   FLOATING ANIMATIONS
   Gentle up-and-down movement
   ================================ */
@keyframes float1 {
    0%, 100% { transform: rotate(-8deg) translateY(0px); }
    50% { transform: rotate(-8deg) translateY(-8px); }
}

@keyframes float2 {
    0%, 100% { transform: rotate(5deg) translateY(0px); }
    50% { transform: rotate(5deg) translateY(-10px); }
}

@keyframes float3 {
    0%, 100% { transform: rotate(3deg) translateY(0%) translateX(0px); }
    50% { transform: rotate(3deg) translateY(-10%) translateX(-8px); }
}

@keyframes float4 {
    0%, 100% { transform: rotate(-6deg) translateY(0px); }
    50% { transform: rotate(-6deg) translateY(-6px); }
}

@keyframes float5 {
    0%, 100% { transform: rotate(6deg) translateY(0px); }
    50% { transform: rotate(6deg) translateY(-6px); }
}

/* ================================
   MOBILE RESPONSIVE
   ================================ */
@media screen and (max-width: 768px) {
    .hero {
        min-height: auto;
        padding: 100px 0 60px;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0 20px;
    }
    
    .hero-text {
        order: 1;
        text-align: center;
    }
    
    .hero-text h1 {
        font-size: 2.2rem;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
    
    /* MOBILE: Stack maps vertically, disable zoom */
    .hero-image {
        order: 2;
        width: 100%;
        overflow: hidden;
    }
    
    .maps-container {
        height: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    /* Reset all positioning on mobile */
    .map-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        animation: none !important;
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        cursor: default !important; /* Disable zoom cursor */
    }
    
    /* Mobile aspect ratios */
    .map-item[data-orientation="portrait"] {
        width: 90% !important;
        max-width: 300px !important;
        height: auto !important;
        aspect-ratio: 1 / 1.414;
    }
    
    .map-item[data-orientation="landscape"] {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;
        aspect-ratio: 1.414 / 1;
    }
    
    .map-item[data-orientation="square"] {
        width: 90% !important;
        max-width: 300px !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    
    .map-item img {
        width: 100%;
        height: 100%;
        cursor: default !important; /* Disable zoom */
    }
    
    /* Disable all hover effects on mobile */
    .map-item:hover {
        transform: none !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .map-item.zooming img {
        cursor: default !important;
        transform: none !important;
    }
}

@media screen and (max-width: 480px) {
    .map-item[data-orientation="portrait"],
    .map-item[data-orientation="landscape"],
    .map-item[data-orientation="square"] {
        max-width: 280px !important;
    }
}