/**
 * The Keen Curator - Main Stylesheet
 * Custom styles beyond Tailwind utilities
 */

/* ========================================
   BASE / RESET
   ======================================== */
html, body { 
    height: 100%; 
    overflow: hidden; 
}

/* Hide scrollbars but allow scrolling */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Custom scrollbar for main content */
#main-content::-webkit-scrollbar {
    width: 10px;
}
#main-content::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
#main-content::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}
#main-content::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.transition-opacity, .transition-colors {
    transition-duration: 100ms !important;
}

/* ========================================
   LOGO HOVER EFFECTS
   ======================================== */
.sidebar-logo img {
    transition: opacity 50ms ease;
}

.sidebar-logo img:hover {
    opacity: 0.85;
}

/* ========================================
   HERO IMAGE HOVER EFFECTS
   ======================================== */
#hero-image {
    box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.2);
   /*  transform: scale(1); */
    transition: all 100ms ease;
}

#hero-image:hover {
   /* transform: scale(1.03); */
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
    opacity: 0.90;
}

/* ========================================
   ANIMATIONS
   ======================================== */
.float-anim { 
    animation: float 6s ease-in-out infinite; 
}

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

.scale-hover { 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.scale-hover:hover { 
    transform: scale(1.05); 
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
input[type=range] { 
    -webkit-appearance: none; 
    appearance: none; 
    background: transparent; 
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; 
    height: 16px; 
    width: 16px; 
    border-radius: 50%;
    background: #CBA135; 
    margin-top: -6px; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%; 
    height: 4px; 
    background: #E0D4B8; 
    border-radius: 2px;
}

/* ========================================
   ANIMATION OPTIONS (uncomment ONE to enable)
   ======================================== */

/* ------------------------------------------
   OPTION 1: SOFT FADE (from 0.7 opacity)
   ------------------------------------------
@keyframes softFade {
    from { opacity: 0.7; }
    to { opacity: 1; }
}
.modal-content-fade { opacity: 0.7; }
.modal-content-fade.animate { animation: softFade 0.10s ease-out forwards; }
.gallery-fade { opacity: 0.7; }
.gallery-fade.animate { animation: softFade 0.10s ease-out forwards; }
.hero-fade { opacity: 0.7; }
.hero-fade.animate { animation: softFade 0.10s ease-out forwards; }
*/

/* ------------------------------------------
   OPTION 2: BLUR TO SHARP
   ------------------------------------------
@keyframes blurToSharp {
    from { filter: blur(6px); }
    to { filter: blur(0); }
}
.modal-content-fade { filter: blur(6px); }
.modal-content-fade.animate { animation: blurToSharp 0.15s ease-out forwards; }
.gallery-fade { filter: blur(6px); }
.gallery-fade.animate { animation: blurToSharp 0.15s ease-out forwards; }
.hero-fade { filter: blur(6px); }
.hero-fade.animate { animation: blurToSharp 0.15s ease-out forwards; }
*/

/* ------------------------------------------
   OPTION 3: SLIDE FROM RIGHT
   ------------------------------------------
@keyframes slideFromRight {
    from { transform: translateX(15px); }
    to { transform: translateX(0); }
}
.modal-content-fade { transform: translateX(15px); }
.modal-content-fade.animate { animation: slideFromRight 0.15s ease-out forwards; }
.gallery-fade { transform: translateX(15px); }
.gallery-fade.animate { animation: slideFromRight 0.15s ease-out forwards; }
.hero-fade { transform: translateX(15px); }
.hero-fade.animate { animation: slideFromRight 0.15s ease-out forwards; }
*/