/* ==========================================================================
   NEUMORPHISM CORE VARIABLES
   Theme: Soft Pastel Pink (#ffe4e6)
   ========================================================================== */
:root {
    /* Base Background */
    --bg-color: #ffe4e6;
    
    /* Shadow Colors - Calculated exactly for #ffe4e6 */
    /* Dark shadow simulates the lack of light (bottom-right) */
    --shadow-dark: #e0c8ca; 
    /* Light shadow simulates the light source (top-left) */
    --shadow-light: #ffffff;
    
    /* Hover state shadow colors (slightly intensified) */
    --shadow-dark-hover: #d4babc;
    --shadow-light-hover: #ffffff;

    /* Transition Speeds */
    --trans-fast: 0.2s ease-out;
    --trans-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   GLOBAL RESET & BASE STYLES
   ========================================================================== */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    overflow-x: hidden;
}
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
}


/* Hide scrollbar for a cleaner app-like feel, but keep functionality */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
    background: #ffb3c6;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ff8ab1;
}

/* ==========================================================================
   NEUMORPHIC UTILITY CLASSES
   Apply these directly to HTML elements for instant 3D effects
   ========================================================================== */

/* 1. Flat Neumorphism (Standard Drop Shadow)
   Looks like the element is resting on the surface. */
.neu-flat {
    background-color: var(--bg-color);
    box-shadow: 
        9px 9px 18px var(--shadow-dark),
        -9px -9px 18px var(--shadow-light);
    transition: box-shadow var(--trans-smooth), transform var(--trans-smooth);
}

.neu-flat:hover {
    box-shadow: 
        12px 12px 24px var(--shadow-dark-hover),
        -12px -12px 24px var(--shadow-light-hover);
}

/* 2. Pressed/Indented Neumorphism (Inner Shadow)
   Looks like the element is carved or pressed into the surface. */
.neu-pressed {
    background-color: var(--bg-color);
    box-shadow: 
        inset 7px 7px 14px var(--shadow-dark),
        inset -7px -7px 14px var(--shadow-light);
    transition: box-shadow var(--trans-smooth);
}

/* 3. Convex Neumorphism (Gradient + Drop Shadow)
   Looks like a curved button popping out toward the user. */
.neu-convex {
    background: linear-gradient(145deg, #ffffff, #e6cdd0);
    box-shadow: 
        10px 10px 20px var(--shadow-dark),
        -10px -10px 20px var(--shadow-light);
    transition: box-shadow var(--trans-smooth), transform var(--trans-smooth);
}

.neu-convex:hover {
    transform: translateY(-2px);
    box-shadow: 
        14px 14px 28px var(--shadow-dark-hover),
        -14px -14px 28px var(--shadow-light-hover);
}

/* 4. Active State Overrides for Buttons */
button:active.neu-flat, 
a:active.neu-flat,
.active\:neu-pressed:active {
    box-shadow: 
        inset 6px 6px 12px var(--shadow-dark),
        inset -6px -6px 12px var(--shadow-light) !important;
    transform: translateY(1px) scale(0.98);
}

/* ==========================================================================
   CUSTOM ANIMATIONS
   ========================================================================== */

/* Marquee Animation (Moved from inline HTML) */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); } /* -50% because we duplicated the content */
}

.animate-marquee {
    animation: marquee 25s linear infinite;
    will-change: transform;
}

/* Pause marquee on hover for better readability */
.animate-marquee:hover {
    animation-play-state: paused;
}

/* ==========================================================================
   POPUP/MODAL UTILITIES (For zoom-in details)
   These classes will be toggled by popups.js
   ========================================================================== */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 228, 230, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--trans-fast);
}

.popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
    z-index: 101;
    pointer-events: none;
    transition: all var(--trans-fast);
}

.popup-content.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}