/* ==========================================================================
   1. Global Reset & Body Setup
   ========================================================================== */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #f1f1f1;
}

/* ==========================================================================
   2. Logo Header Block & Cross-Fade Stack
   ========================================================================== */
.logo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: flex-start;
    width: 100%;
}

.logo-img {
    grid-column: 1;
    grid-row: 1;
    max-width: 80%;
    height: auto;
    
    /* Base configuration: Hidden completely by default */
    opacity: 0;
    display: none;
    pointer-events: none;
    
    /* Let opacity transition smoothly when classes drop */
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}

.logo-img.active {
    display: block;
    pointer-events: auto;
}

.logo-img.fade-in {
    opacity: 1;
    transition: opacity 3s ease-in-out;
}

/* ==========================================================================
   3. Outer Center Alignment Layout Block
   ========================================================================== */
.gallery-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 90vh;
    padding: 20px 0;
    box-sizing: border-box;
}

/* ==========================================================================
   4. Fluid Width Inner Constrained Container
   ========================================================================== */
.gallery-inner-container {
    width: 90vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================================
   5. Interactive Image Gallery Box Window (Anti-Collapse Engine)
   ========================================================================= */
.gallery-content-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fade-gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
    background-color: transparent;
}

/* ==========================================================================
   6. Image Layer Stack Configs & Fade-Out Spec (1.5s)
   ========================================================================== */
.fade-gallery img {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    border: 10px solid #ffffff;
    box-sizing: border-box;
    
	  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.04),
    0 32px 64px rgba(0, 0, 0, 0.06),
    0 64px 128px rgba(0, 0, 0, 0.06);
	
	
    /* Base configuration: Hidden completely by default */
    opacity: 0;
    display: none;
    pointer-events: none;
    
    /* Let opacity transition smoothly when classes drop */
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}

/* ==========================================================================
   7. Active Image State Configs & Fade-In Spec (3s)
   ========================================================================== */
.fade-gallery img.active {
    display: block;
    pointer-events: auto;
}

/* Class applied by JavaScript right after visibility kicks in */
.fade-gallery img.fade-in {
    opacity: 1;
    transition: opacity 3s ease-in-out;
}

/* ==========================================================================
   8. Text Indicator Block & States
   ========================================================================== */
.gallery-counter {
    margin-top: 15px;
    width: 100%;
    color: #a4a4a4;
    font-family: 'fridays', sans-serif;
    font-size: 14px;
    text-align: center;
    
    /* Reverted to original design profile */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}

.gallery-counter.active {
    opacity: 1;
    transition: opacity 3s ease-in-out;
}

/* ==========================================================================
   9. Mobile Responsive Overrides & Typography
   ========================================================================== */
@media (max-width: 600px) {
    .gallery-counter {
        font-size: 11px;
        margin-top: 10px;
    }
}

@font-face {
    font-family: 'fridays';
    src: url("../TRADEGOTHICNEXTSRPRO-CN.OTF") format("opentype");
}