/* Masonry loading states - integrate with content fade system */
#masonry-gallery {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

#masonry-gallery.masonry-loaded {
    opacity: 1;
}



/* FIXED: 5-Column Masonry Layout CSS */

/* Main masonry container - SINGLE DEFINITION */
#masonry-gallery {
    width: 1132px !important; /* Exactly 5 columns: 5×220px + 4×8px gutters */
    max-width: 100%;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
}

/* CRITICAL: Fixed width for 5-column layout */
#masonry-gallery .masonry-sizer,
#masonry-gallery .masonry-brick {
    width: 220px !important;
    display: block !important;
}

/* CRITICAL: Sizer configuration */
.masonry-sizer {
    height: 0 !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Masonry brick styling */
.masonry-brick {
    margin: 4px; /* 8px effective gutter (reduced from 16px) */
    border-radius: 10px;
    overflow: hidden;
    background: #333;
    position: relative;
}

/* Media content styles */
#masonry-gallery .masonry-brick img,
#masonry-gallery .masonry-brick video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 10px;
}

/* Video specific background */
.masonry-brick video {
    background: #111;
}


/* RESPONSIVE: Maintain 5 columns as long as possible */
@media (max-width: 1240px) {
    #masonry-gallery {
        max-width: 1180px; /* Still try for 5 columns */
    }
}

@media (max-width: 1200px) {
    #masonry-gallery {
        max-width: 980px; /* 4 columns */
    }
}

@media (max-width: 1000px) {
    #masonry-gallery {
        max-width: 740px; /* 3 columns */
    }
}

@media (max-width: 760px) {
    #masonry-gallery {
        max-width: 500px; /* 2 columns */
    }
}

@media (max-width: 520px) {
    #masonry-gallery {
        max-width: 280px; /* 1 column */
        padding: 0 20px;
    }
}

/* Extra page specific navigation overrides */
.extra-page .nav-item {
    opacity: 1 !important;
    transition: none !important;
}

.extra-page .nav-item a {
    color: var(--text-color) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.extra-page .nav-item a:hover {
    color: var(--link-color) !important;
    opacity: 1 !important;
    transform: none !important;
}

.extra-page .nav-item a::before,
.extra-page .nav-item a::after {
    display: none !important;
}

.extra-page #header-section,
.extra-page #header-section .container,
.extra-page #header-section .navbar,
.extra-page #header-section .navbar-brand,
.extra-page #header-section .navbar-toggler,
.extra-page #header-section .navbar-collapse,
.extra-page #header-section .navbar-nav {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Navigation positioning */
.about-link {
    position: absolute !important;
    left: 10% !important;
    transform: translateX(-50%) !important;
}
.resume-link {
    position: absolute !important;
    left: 30% !important;
    transform: translateX(-50%) !important;
}
.portfolio-secondary-link {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
.extra-link {
    position: absolute !important;
    left: 70% !important;
    transform: translateX(-50%) !important;
}
.statement-link {
    position: absolute !important;
    left: 90% !important;
    transform: translateX(-50%) !important;
}

/* Background and layout */
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    filter: none;
    transition: filter 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.bg-image.bg-filtered {
    filter: brightness(0.8) contrast(1.1);
}

.main-content {
    flex: 1 0 auto;
    padding-bottom: 100px;
    background: transparent;
    opacity: 1;
    visibility: visible;
}

.about-content {
    padding: 2rem;
    color: white;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
    flex: 1;
}

.vertical-spacer {
    height: 150px;
}

.about-content h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.about-section {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 2rem;
    opacity: 1;
}

.content-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#btnScrollToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
}

.about-section,
.portfolio-section,
.extra-section,
.statement-section {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 2rem;
}

.title1 {
    color: white;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 1.2em;
    opacity: 1;
    text-shadow: 
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1);
    margin-left: 106px;
}

.acting-text {
    color: white;
    font-family: 'Ysabeau Infant', sans-serif;
    font-size: 0.9em;
    opacity: 1;
    text-shadow: 
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1),
      0px 0px 10px rgba(0, 0, 0, 1);
    margin-left: 106px;
    margin-right: 106px;
}

/* =================================== */
/* STEP 1: Basic Hover Scaling Effect */
/* =================================== */

/* Hover scaling for masonry items */
.masonry-brick {
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease-out;
    z-index: 1;
    cursor: pointer;
}

.masonry-brick:hover {
    transform: scale(1.15);
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s;
}

/* Blur effect for media content on hover */
.masonry-brick img,
.masonry-brick video {
    transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: blur(0px);
}

.masonry-brick:hover img,
.masonry-brick:hover video {
    filter: blur(4px);
}

/* Black strip with complex animation */
.hover-strip {
    position: absolute;
    top: 50%;
    left: 0%;
    height: 30px;
    width: 0%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.45) 10%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.45) 90%
    );
    transform: translateY(-50%);
    z-index: 5;
    overflow: hidden;
    animation-fill-mode: forwards;
    border-radius: 10px;
}



/* Hover: Entry animation */
.masonry-brick:hover .hover-strip {
    animation: stripEnter 0.15s ease-out forwards;
}

/* Unhover: Exit animation */
.masonry-brick .hover-strip {
    animation: stripExit 0.1s ease-out forwards;
}

/* Dynamic entry keyframes using CSS custom properties */
@keyframes stripEnter {
    0% { left: var(--strip-left, 25%); width: 0%; }
    40% { left: var(--strip-left, 25%); width: var(--strip-width, 50%); }
    100% { left: var(--strip-left, 25%); width: var(--strip-width, 50%); }
}

/* Dynamic exit keyframes */
@keyframes stripExit {
    0% { left: var(--strip-left, 25%); width: var(--strip-width, 50%); }
    30% { left: var(--strip-left, 25%); width: calc(var(--strip-width, 50%) + 25%); }
    100% { left: 100%; width: 0%; }
}
/* White text inside strip (hidden initially) */
.hover-text {
    color: white;
    font-size: 10px;
    font-weight: 500;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.masonry-brick:hover .hover-text {
    opacity: 1;
    transition-delay: 0.1s;
}


/* ============================= */
/* RISE-UP ANIMATION - ADDITIVE ONLY, NO OVERRIDES */
/* ============================= */

/* Text elements rise-up (safe - no conflicts) */
.title1,
.acting-text {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.title1.text-rise-animated,
.acting-text.text-rise-animated {
    transform: translateY(0);
    opacity: 1;
}


/* Masonry bricks - ONLY add initial hidden state */
.masonry-brick  {
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start below, but preserve your existing transform-origin */
}

/* When animated class is added - make visible and allow your existing transitions */
.masonry-brick.brick-rise-animated {
    opacity: 1;
    transform: translateY(0); /* Rise to normal position */
    /* Your existing transition will handle this smoothly */
}


/* Animation reset system */
.animation-reset .title1,
.animation-reset .acting-text,
.animation-reset .masonry-brick {
    transform: translateY(20px);
    opacity: 0;
    transition: none;
}

.animation-ready .title1,
.animation-ready .acting-text {
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}