/* shared-styles.css */

/* --- Base HTML & Body --- */
html {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    margin: 0;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-color: #0c0a14;
    color: #e0e0e0;
}

/* --- Typography Utilities & Base --- */
.font-heading {
    font-family: 'Playfair Display', serif;
}

.text-gradient-purple {
    background-image: linear-gradient(45deg, #e0c3fc, #c084fc, #a855f7, #9333ea, #a855f7, #c084fc, #e0c3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-size: 200% auto;
    animation: textGradientShimmer 5s linear infinite alternate;
}

.text-gradient-pink {
    background-image: linear-gradient(45deg, #f9a8d4, #f472b6, #ec4899, #db2777, #ec4899, #f472b6, #f9a8d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-size: 200% auto;
    animation: textGradientShimmer 5s linear infinite alternate;
}

@keyframes textGradientShimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 100% center;
    }
}

.text-deep-blue-glow {
    color: #2563eb;
    text-shadow:
        0 0 6px rgba(37, 99, 235, 0.7),
        0 0 12px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(96, 165, 250, 0.3),
        1px 1px 3px rgba(0, 0, 0, 0.4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.5);
    paint-order: stroke fill;
}

.text-bright-red-glow {
    color: #EF4444; /* Tailwind red-500 */
    text-shadow:
        0 0 6px rgba(239, 68, 68, 0.75),
        0 0 12px rgba(220, 38, 38, 0.55),
        0 0 20px rgba(248, 113, 113, 0.35),
        1px 1px 2px rgba(0,0,0,0.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.6);
    paint-order: stroke fill;
}

.text-shadow-strong {
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.6);
}

/* --- Header & Navigation --- */
header {
    background-color: rgba(12, 10, 20, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

header.scrolled-header-dynamic { /* Added by JS on index.html for scroll effect */
    background-color: rgba(12, 10, 20, 0.9) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

body.gallery-page {
    padding-top: 70px; /* Adjust if header height changes */
}

header .site-title-artistry {
    display: inline-block;
    color: #E5E7EB;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.7),0 0 5px rgba(200,200,220,0.3),1px -1px 0px rgba(255,255,255,0.15);
    transition: text-shadow 0.3s ease,transform 0.3s cubic-bezier(0.25,0.8,0.25,1),color 0.3s ease, opacity 0.3s ease;
    animation: siteTitleSilverPulse 4s ease-in-out infinite alternate;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes siteTitleSilverPulse {
    0% {
        text-shadow: 0px 1px 2px rgba(0,0,0,0.7),0 0 5px rgba(200,200,220,0.3),1px -1px 0px rgba(255,255,255,0.15);
        color: #E5E7EB;
    }
    50% {
        text-shadow: 0px 2px 3px rgba(0,0,0,0.8),0 0 12px rgba(230,230,250,0.6),1px -1px 1px rgba(255,255,255,0.3);
        color: #FFFFFF;
    }
    100% {
        text-shadow: 0px 1px 2px rgba(0,0,0,0.7),0 0 5px rgba(200,200,220,0.3),1px -1px 0px rgba(255,255,255,0.15);
        color: #E5E7EB;
    }
}

header .site-title-artistry:hover {
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 0px 2px 4px rgba(0,0,0,0.6),0 0 15px rgba(220,220,250,0.7),1px -1px 2px rgba(255,255,255,0.5);
}

.nav-item {
    transition: color 0.3s ease-out,transform 0.3s cubic-bezier(0.25,0.8,0.25,1),text-shadow 0.3s ease-out,letter-spacing 0.3s ease-out;
    position: relative;
    padding-bottom: 8px;
    letter-spacing: 0.025em;
    color: #BCCCDC;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
}

.nav-item:hover {
    color: #FFFFFF;
    transform: translateY(-3px) scale(1.08);
    letter-spacing: 0.05em;
    text-shadow: 0px 1px 2px rgba(10,10,20,0.5),0 0 12px rgba(230,230,255,0.9),0 0 20px rgba(200,200,230,0.7);
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #DDEEFF;
    border-radius: 1px;
    box-shadow: 0 0 5px rgba(220,220,250,0.5);
    transition: width 0.4s cubic-bezier(0.22,1,0.36,1),background-color 0.3s ease-out,box-shadow 0.3s ease-out;
}

.nav-item:hover::after {
    width: 100%;
    background-color: #FFFFFF;
    box-shadow: 0 0 8px rgba(255,255,255,0.7);
}

/* Mobile Navigation Menu Styles */
.nav-item-mobile {
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background-color .2s ease-in-out,color .2s ease-in-out;
    font-family: 'Inter',sans-serif;
    letter-spacing: .05em;
    padding: .9rem 1rem;
    font-size: .95rem;
    color: #e0e0e0;
}
.nav-item-mobile:last-child {
    border-bottom: none;
}
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out,opacity .3s ease-out;
    opacity: 0;
}
#mobile-menu.is-open {
    max-height: 500px;
    opacity: 1;
}

/* --- Hero Section Elements (Base styles for floating pieces) --- */
.floating-art-piece {
    position: absolute;
    border-radius: .5rem;
    box-shadow: 0 15px 35px rgba(0,0,0,.4),0 0 20px rgba(168,85,247,.15);
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
    display: none; /* Default, index.html specific styles will override to block !important */
    z-index: 2;
    border: 1px solid rgba(255,255,255,.05);
    transition: box-shadow .3s ease-in-out,transform .3s ease-in-out;
    max-height: 40vh;
}
.floating-art-piece img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* JS sets parent height for aspect ratio */
}
/* Keyframes for floating art pieces */
@keyframes floatZoom1{0%{transform:translate(0vw,0vh) scale(.8);opacity:0}20%{opacity:.7}50%{transform:translate(5vw,-10vh) scale(1.1);opacity:.9}80%{opacity:.7}100%{transform:translate(-2vw,3vh) scale(.8);opacity:0}}
@keyframes floatZoom2{0%{transform:translate(0vw,0vh) scale(1);opacity:0}20%{opacity:.8}50%{transform:translate(-8vw,12vh) scale(.7);opacity:1}80%{opacity:.8}100%{transform:translate(3vw,-5vh) scale(1);opacity:0}}
@keyframes floatZoom3{0%{transform:translate(0vw,0vh) scale(.9);opacity:0}20%{opacity:.75}50%{transform:translate(10vw,8vh) scale(1.2);opacity:.95}80%{opacity:.75}100%{transform:translate(-5vw,-10vh) scale(.9);opacity:0}}
@keyframes floatZoom4{0%{transform:translate(0vw,0vh) scale(1.1);opacity:0}20%{opacity:.85}50%{transform:translate(-12vw,-6vh) scale(.85);opacity:1}80%{opacity:.85}100%{transform:translate(6vw,9vh) scale(1.1);opacity:0}}
/* IDs for floating images (used by index.html) - Heights removed as JS sets them */
#art1{top:10vh;left:5vw;width:clamp(60px,18vw,180px);animation:floatZoom1 20s linear infinite;animation-delay:0s}
#art2{top:65vh;left:3vw;width:clamp(50px,15vw,150px);animation:floatZoom2 22s linear infinite;animation-delay:-5s}
#art3{top:15vh;right:5vw;width:clamp(70px,22vw,220px);animation:floatZoom3 18s linear infinite;animation-delay:-10s}
#art4{top:70vh;right:8vw;width:clamp(55px,16vw,160px);animation:floatZoom4 25s linear infinite;animation-delay:-15s}
#art5{top:38vh;left:25vw;width:clamp(45px,13vw,130px);animation:floatZoom1 23s linear infinite;animation-delay:-2.5s}
#art6{top:55vh;right:30vw;width:clamp(65px,20vw,200px);animation:floatZoom2 19s linear infinite;animation-delay:-7.5s}
#art7{top:25vh;left:50%;transform:translateX(-50%);width:clamp(80px,25vw,250px);animation:floatZoom3 21s linear infinite;animation-delay:-12.5s}
#art8{top:75vh;left:40vw;width:clamp(50px,17vw,170px);animation:floatZoom4 24s linear infinite;animation-delay:-17.5s}
@keyframes elegantFadeInOnly{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* --- Gallery Common Styles --- */
.gallery-section-title{margin-bottom:1.5rem;letter-spacing:.05em}
.gallery-description{color:#b0b0b0;margin-bottom:4rem}
.gallery-item{background-color:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);transition:transform .4s cubic-bezier(.25,.8,.25,1),box-shadow .4s cubic-bezier(.25,.8,.25,1)}
.gallery-item:hover{transform:translateY(-8px) scale(1.02)}
body.abstract-page .gallery-item:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.35),0 0 20px rgba(168,85,247,.1)}
body.surreal-page .gallery-item:hover{box-shadow:0 25px 50px -12px rgba(0,0,0,.35),0 0 20px rgba(236,72,153,.1)}
.gallery-image{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .4s cubic-bezier(.25,.8,.25,1)}

/* --- Music Player Controls (Gallery Pages - Above Title) --- */
.gallery-music-player-controls{margin-bottom:1.5rem}
.gallery-music-player-controls #musicToggleButton{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#d1d5db;padding:.4rem .9rem;border-radius:20px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:all .2s ease-out;cursor:pointer;font-size:.75rem;line-height:1}
.gallery-music-player-controls #musicToggleButton:hover{background-color:rgba(255,255,255,.15);color:#fff;transform:scale(1.03);box-shadow:0 0 10px rgba(168,85,247,.2)}
.gallery-music-player-controls #musicToggleButton:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(12,10,20,.9),0 0 0 4px rgba(168,85,247,.5)}
.gallery-music-player-controls #musicToggleButton svg{height:1.1em;width:1.1em;margin-right:.4em}
.gallery-music-player-controls #musicToggleButton #musicToggleText{font-size:.85em;text-transform:uppercase;letter-spacing:.04em;font-weight:400}

/* --- Footer Music Player Controls (If used on index.html or other pages) --- */
footer .music-player-controls{padding-top:.5rem;padding-bottom:1rem}
footer #musicToggleButton{display:inline-flex;align-items:center;justify-content:center;background-color:rgba(50,50,70,.3);border:1px solid rgba(255,255,255,.1);color:#9ca3af;padding:.5rem 1rem;border-radius:30px;font-size:.8rem;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:all .2s ease-out;cursor:pointer;line-height:1}
footer #musicToggleButton:hover{background-color:rgba(70,70,90,.4);color:#fff;transform:scale(1.03)}
footer #musicToggleButton:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(12,10,20,.9),0 0 0 4px rgba(168,85,247,.5)}
footer #musicToggleButton svg{height:1.2em;width:1.2em;margin-right:.5em}
footer #musicToggleButton #musicToggleText{font-size:.9em;text-transform:uppercase;letter-spacing:.05em;font-weight:400}

/* --- Lightbox Common Styles --- (Updated Sizing and Close Button) */
#lightboxOverlay.hidden{display:none}
#lightboxOverlay{transition:opacity .3s ease-in-out;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

#lightboxContentContainer { 
    position: relative;
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; 
    box-sizing: border-box;
}
#lightboxContent { 
    background-color:rgba(12,10,20,.85);
    box-shadow:0 10px 50px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05); 
    border-radius:.75rem; 
    /* Padding applied by Tailwind classes in HTML */
    display: inline-flex; /* Shrink-wrap content */
    max-width: 90vw;   
    max-height: 90vh;  
    overflow: hidden;   /* Clip image if it tries to exceed this box */
    position: relative; /* For close button positioning */
}
#lightboxImage {
    display:block; 
    margin:auto; 
    border-radius:.375rem; 
    box-shadow:0 5px 25px rgba(0,0,0,.5);
    /* object-fit: contain; is by Tailwind class in HTML */
    /* max-width: 100%; max-height: 100%; relative to #lightboxContent by inline style in HTML */
    /* Explicit viewport-relative max sizes for the image itself */
    max-width: calc(85vw - 2rem - 2rem); /* 85vw - containerPadH - contentBoxPadH */
    max-height: calc(85vh - 2rem - 4rem);/* 85vh - containerPadV - contentBoxPadV (top+bottom) */
}
.lightbox-nav-button,
.lightbox-close-button {
    user-select:none;
    background-color:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    color:#e0e0e0;
    border-radius:9999px;
    opacity:.7;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    z-index:20; /* Ensure above image */
}
.lightbox-nav-button {
    top:50%;
    transform:translateY(-50%);
    font-size:1.5rem; /* Base, Tailwind classes in HTML control w/h */
    transition: background-color .2s ease,transform .2s ease,box-shadow .2s ease, opacity .2s ease;
}
.lightbox-nav-button:hover {
    background-color:rgba(255,255,255,.2);
    transform:translateY(-50%) scale(1.05); /* Maintain Y centering */
    opacity:1;
    box-shadow:0 0 15px rgba(255,255,255,.1);
}
#lightboxPrev{left:1rem} 
#lightboxNext{right:1rem} 

.lightbox-close-button {
    top:.75rem;
    right:.75rem;
    font-size:1.25rem;
    line-height:1;
    width: 2.25rem; 
    height: 2.25rem;
    transition: background-color .2s ease, opacity .2s ease, box-shadow .2s ease, transform .2s ease; /* Added transform */
}
.lightbox-close-button:hover {
    background-color:rgba(255,255,255,.2);
    transform:scale(1.05); /* Only scale on hover */
    opacity:1;
    box-shadow:0 0 15px rgba(255,255,255,.1);
}

@media (max-width:768px){
    #lightboxPrev{left:.5rem}
    #lightboxNext{right:.5rem}
}

/* --- Scrollbar Common Styling --- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#0c0a14}
body:not(.abstract-page):not(.surreal-page)::-webkit-scrollbar-thumb{background:#6b7280;border-radius:4px}
body:not(.abstract-page):not(.surreal-page)::-webkit-scrollbar-thumb:hover{background:#4b5563}
body.abstract-page ::-webkit-scrollbar-thumb{background:#4a00e0;border-radius:4px}
body.abstract-page ::-webkit-scrollbar-thumb:hover{background:#8e2de2}
body.surreal-page ::-webkit-scrollbar-thumb{background:#ec4899;border-radius:4px}
body.surreal-page ::-webkit-scrollbar-thumb:hover{background:#f472b6}

/* --- Footer --- */
/* Footer styling is primarily done with Tailwind classes in the HTML */