@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap');

:root { 
    --copper: #c87a4c; 
    --copper-dark: #a66038;
    --copper-glow: rgba(200, 122, 76, 0.4);
    --bg-dark: #050505;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
}

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bg-dark);
    color: #d1d5db; 
    scroll-behavior: auto; /* Smoother scrolling handled by JS */
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.8s var(--ease-out-expo);
}

/* ========================================= */
/* PREMIUM MOUSE CURSOR & HARDWARE ACCEL    */
/* ========================================= */

@media (pointer: fine) {
    body, *, html, button, a, select, textarea, .nav-btn, .cursor-pointer, input {
        cursor: none !important;
    }
    
    .custom-cursor { 
        position: fixed; top: 0; left: 0; width: 36px; height: 36px; 
        border: 1px solid rgba(200, 122, 76, 0.5); border-radius: 50%; 
        transform: translate(-50%, -50%); pointer-events: none; z-index: 99999; 
        transition: width 0.4s var(--ease-out-expo), height 0.4s var(--ease-out-expo), background-color 0.4s ease, border-color 0.4s ease; 
        mix-blend-mode: difference;
    }
    
    .custom-cursor-dot { 
        position: fixed; top: 0; left: 0; width: 6px; height: 6px; 
        background-color: var(--copper); border-radius: 50%; 
        transform: translate(-50%, -50%); pointer-events: none; z-index: 100000; 
        transition: transform 0.1s linear;
    }
    
    .custom-cursor.hovering { 
        width: 72px; height: 72px; 
        background-color: rgba(200, 122, 76, 0.1); 
        border-color: rgba(200, 122, 76, 0.3);
        backdrop-filter: blur(4px); 
    }
    
    body.lightbox-open .custom-cursor { 
        width: 64px; height: 64px; 
        background-color: rgba(200, 122, 76, 0.9); 
        border-color: transparent; mix-blend-mode: normal; 
    }
    body.lightbox-open .custom-cursor::after { 
        content: '✕'; position: absolute; top: 50%; left: 50%; 
        transform: translate(-50%, -50%); color: white; font-weight: bold; font-size: 20px; 
    }
    body.lightbox-open .custom-cursor-dot { display: none; }
}

@media (pointer: coarse) { .custom-cursor, .custom-cursor-dot { display: none !important; } }

/* ========================================= */
/* PREMIUM GLASSMORPHISM LAYER              */
/* ========================================= */

.liquid-glass, .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 
        0 30px 60px -10px rgba(0,0,0,0.8), 
        inset 0 1px 0 0 rgba(255,255,255,0.1),
        inset 0 0 0 1px rgba(255,255,255,0.02);
    /* Subtle 3D transform base */
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-out-expo), box-shadow 0.6s var(--ease-out-expo);
}

.liquid-glass:hover, .glass-card:hover {
    box-shadow: 
        0 40px 80px -10px rgba(0,0,0,0.9), 
        0 0 40px -10px var(--copper-glow),
        inset 0 1px 0 0 rgba(255,255,255,0.15),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* ========================================= */
/* ANIMATIONS & KEYFRAMES                   */
/* ========================================= */

@keyframes shine { to { background-position: 200% center; } }
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.35); }
    30% { transform: scale(1); }
    45% { transform: scale(1.25); }
    60% { transform: scale(1); }
}

.animate-shine {
    background: linear-gradient(to right, #c87a4c 0%, #ffebd6 50%, #c87a4c 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; 
    display: inline-block; 
    animation: shine 5s linear infinite;
}
.animate-blob { animation: blob 25s infinite alternate var(--ease-in-out-circ); }

/* ========================================= */
/* DARKROOM MODE LOGIK                      */
/* ========================================= */
body.darkroom { background-color: #030000 !important; }
body.darkroom .text-\[\#c87a4c\] { color: #ff1a1a !important; }
body.darkroom .bg-\[\#c87a4c\] { background-color: #ff1a1a !important; }
body.darkroom .border-\[\#c87a4c\]\/30 { border-color: rgba(255,26,26,0.3) !important; }
body.darkroom .border-\[\#c87a4c\]\/10 { border-color: rgba(255,26,26,0.1) !important; }
body.darkroom .border-\[\#c87a4c\] { border-color: rgba(255,26,26,1) !important; }
body.darkroom .hover\:text-\[\#c87a4c\]:hover { color: #ff1a1a !important; }
body.darkroom .hover\:border-\[\#c87a4c\]:hover { border-color: #ff1a1a !important; }
body.darkroom .bg-\[\#c87a4c\]\/20 { background-color: rgba(255,26,26,0.2) !important; }
body.darkroom .bg-\[\#c87a4c\]\/5 { background-color: rgba(255,26,26,0.05) !important; }
body.darkroom .shadow-\[0_0_40px_rgba\(200\,122\,76\,0\.3\)\] { box-shadow: 0 0 40px rgba(255,26,26,0.4) !important; }
body.darkroom .shadow-\[0_0_40px_rgba\(200\,122\,76\,0\.4\)\] { box-shadow: 0 0 50px rgba(255,26,26,0.5) !important; }
body.darkroom .shadow-\[0_0_60px_rgba\(200\,122\,76\,0\.6\)\] { box-shadow: 0 0 80px rgba(255,26,26,0.6) !important; }

body.darkroom .nav-link.active { color: #ff1a1a !important; }
body.darkroom .animate-shine {
    background: linear-gradient(to right, #ff1a1a 0%, #ffcccc 50%, #ff1a1a 100%);
    background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
body.darkroom ::-webkit-scrollbar-thumb:hover { background: #ff1a1a; }
body.darkroom #scroll-progress { background: #ff1a1a; box-shadow: 0 0 15px rgba(255, 26, 26, 0.9); }
body.darkroom #cursor-dot { background-color: #ff1a1a !important; box-shadow: 0 0 10px #ff1a1a; }
body.darkroom #cursor { border-color: rgba(255, 26, 26, 0.8) !important; box-shadow: 0 0 20px rgba(255, 26, 26, 0.5); }
body.darkroom .custom-cursor.hovering { background-color: rgba(255, 26, 26, 0.15) !important; }

@keyframes alertBlink {
    0%, 100% { opacity: 1; text-shadow: 0 0 25px rgba(255,26,26,1); transform: scale(1.05); }
    50% { opacity: 0.5; text-shadow: 0 0 5px rgba(255,26,26,0.3); transform: scale(1); }
}
.alert-blink { animation: alertBlink 1.5s var(--ease-out-expo) infinite; transform-origin: center; display: inline-block; }

@keyframes rawBlink {
    0%, 100% { color: #ff1a1a; text-shadow: 0 0 20px rgba(255,26,26,1); }
    50% { color: #ffffff; text-shadow: 0 0 25px rgba(255,255,255,0.8); }
}
.animate-raw-blink { animation: rawBlink 2.5s var(--ease-in-out-circ) infinite; }

body.darkroom img:not(.darkroom-img) { filter: grayscale(0) !important; }
.darkroom-img { filter: sepia(100%) hue-rotate(315deg) saturate(300%) contrast(1.1) brightness(0.6) !important; transition: filter 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo) !important; }
.darkroom-img:hover, .group:hover .darkroom-img { filter: grayscale(0) contrast(1.05) saturate(1.1) !important; }

/* ========================================= */
/* LAYOUT & UTILITIES                       */
/* ========================================= */

#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--copper); z-index: 9999; width: 0%; transition: width 0.1s ease-out; box-shadow: 0 0 15px rgba(200, 122, 76, 0.9); }

.page-section { display: none; opacity: 0; }
.page-section.active { display: block; opacity: 1; animation: fadeIn 0.8s var(--ease-out-expo) forwards; }

.reveal { opacity: 0; transform: translateY(50px); transition: all 1.2s var(--ease-out-expo); }
.reveal.active { opacity: 1; transform: translateY(0); }

.reveal-3d-left, .reveal-3d-right { opacity: 0; transform: translateY(80px); transition: opacity 1.4s ease-out, transform 1.4s var(--ease-out-expo); }
.reveal-3d-left.active, .reveal-3d-right.active { opacity: 1; transform: translateY(0); }

@media (min-width: 1024px) {
    .reveal-3d-left { transform: perspective(1000px) translateY(100px) rotateZ(-3deg) rotateY(15deg); }
    .reveal-3d-left.active { transform: perspective(1000px) translateY(var(--scroll-y, 0)) rotateZ(0deg) rotateY(8deg); }
    .reveal-3d-right { transform: perspective(1000px) translateY(100px) rotateZ(3deg) rotateY(-15deg); }
    .reveal-3d-right.active { transform: perspective(1000px) translateY(var(--scroll-y, 0)) rotateZ(0deg) rotateY(-8deg); }
}

.tilt-card { transition: transform 0.1s linear; will-change: transform; transform-style: preserve-3d; }
.tilt-card.reset { transition: transform 0.8s var(--ease-out-expo); }
.tilt-card img { transform: translateZ(30px); }

.nav-link.active .nav-underline { width: 100%; }
.nav-link.active { color: #c87a4c; font-weight: 700; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--copper); }

/* --- FAQ AKKORDEON LOGIK --- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease-out-expo), opacity 0.4s ease; opacity: 0; }
.faq-item.active .faq-answer { max-height: 600px; opacity: 1; }
.faq-icon { transition: transform 0.6s var(--ease-out-expo); }
.faq-item.active .faq-icon { transform: rotate(45deg); }

/* --- CAROUSEL ANIMATION --- */
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-scroll { animation: scroll 8s linear infinite; will-change: transform; -webkit-transform: translateZ(0); }
@media (min-width: 640px) { .animate-scroll { animation: scroll 50s linear infinite; } }
.carousel-track:hover { animation-play-state: paused; }

.ease-shutter { transition-timing-function: var(--ease-in-out-circ); }

/* --- LIVE CHAT STYLES --- */
#chat-window { transition: all 0.5s var(--ease-out-expo); transform-origin: bottom right; transform: scale(0.9) translateY(20px); opacity: 0; pointer-events: none; }
#chat-window.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; }
#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }
#chat-messages::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
.msg-bubble { animation: popIn 0.4s var(--ease-out-expo) forwards; }
@keyframes popIn { from { opacity: 0; transform: translateY(15px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ========================================= */
/* VAULT SPECIFIC STYLES                    */
/* ========================================= */

/* --- MASONRY IMAGE CARDS --- */
.masonry-item img {
    will-change: transform, opacity, filter;
    transform: translateZ(0); 
    transition: transform 0.8s var(--ease-out-expo), opacity 0.6s, filter 0.6s !important;
}
.masonry-item:hover img {
    transform: scale(1.04) translateZ(0);
    filter: brightness(1.05) saturate(1.1);
}

/* --- STAGGERED MASONRY FADE-IN --- */
.masonry-item {
    position: relative;
    opacity: 0;
    transform: translateY(40px) scale(0.97);
    animation: masonryFadeIn 0.8s var(--ease-out-expo) forwards;
}
.masonry-item:nth-child(1)  { animation-delay: 0.05s; }
.masonry-item:nth-child(2)  { animation-delay: 0.1s; }
.masonry-item:nth-child(3)  { animation-delay: 0.15s; }
.masonry-item:nth-child(4)  { animation-delay: 0.2s; }
.masonry-item:nth-child(5)  { animation-delay: 0.25s; }
.masonry-item:nth-child(6)  { animation-delay: 0.3s; }
.masonry-item:nth-child(7)  { animation-delay: 0.35s; }
.masonry-item:nth-child(8)  { animation-delay: 0.4s; }
.masonry-item:nth-child(9)  { animation-delay: 0.45s; }
.masonry-item:nth-child(10) { animation-delay: 0.5s; }
.masonry-item:nth-child(11) { animation-delay: 0.55s; }
.masonry-item:nth-child(12) { animation-delay: 0.6s; }
.masonry-item:nth-child(n+13) { animation-delay: 0.65s; }

@keyframes masonryFadeIn {
    0%   { opacity: 0; transform: translateY(40px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- SELECTION STATE --- */
.masonry-item .action-icon { transition: all 0.4s var(--ease-out-expo); }
.masonry-item.selected .selection-border { opacity: 1; }
.masonry-item.selected .selection-btn { border-color: var(--copper); background-color: rgba(10,10,10,0.95); }
.masonry-item.selected .heart-icon { color: var(--copper); fill: var(--copper); }

/* --- HEART BURST PARTICLE ANIMATION --- */
.heart-burst-container {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    z-index: 60;
    pointer-events: none;
}
.heart-burst-particle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--copper);
    animation: heartBurst 0.7s var(--ease-out-expo) forwards;
    opacity: 0;
}
.heart-burst-particle:nth-child(1)  { animation-delay: 0s;    --burst-x: -20px; --burst-y: -30px; }
.heart-burst-particle:nth-child(2)  { animation-delay: 0.02s; --burst-x: 25px;  --burst-y: -25px; }
.heart-burst-particle:nth-child(3)  { animation-delay: 0.04s; --burst-x: 30px;  --burst-y: 5px;   }
.heart-burst-particle:nth-child(4)  { animation-delay: 0.06s; --burst-x: -25px; --burst-y: 20px;  }
.heart-burst-particle:nth-child(5)  { animation-delay: 0.08s; --burst-x: 10px;  --burst-y: -35px; }
.heart-burst-particle:nth-child(6)  { animation-delay: 0.03s; --burst-x: -35px; --burst-y: -10px; width: 4px; height: 4px; }
.heart-burst-particle:nth-child(7)  { animation-delay: 0.05s; --burst-x: 15px;  --burst-y: 30px;  width: 4px; height: 4px; }
.heart-burst-particle:nth-child(8)  { animation-delay: 0.07s; --burst-x: -10px; --burst-y: -40px; width: 5px; height: 5px; }
.heart-burst-particle:nth-child(9)  { animation-delay: 0.01s; --burst-x: 35px;  --burst-y: -15px; width: 3px; height: 3px; }
.heart-burst-particle:nth-child(10) { animation-delay: 0.09s; --burst-x: -30px; --burst-y: 25px;  width: 3px; height: 3px; }

@keyframes heartBurst {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    50%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(0); }
}

/* Heart glow ring on select */
.heart-glow-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--copper);
    transform: translate(-50%, -50%) scale(0);
    animation: glowRingExpand 0.6s var(--ease-out-expo) forwards;
    pointer-events: none;
    z-index: 60;
}
@keyframes glowRingExpand {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; box-shadow: 0 0 20px var(--copper-glow); }
    100% { transform: translate(-50%, -50%) scale(4); opacity: 0; box-shadow: 0 0 0px transparent; }
}

/* --- NOTE CONTAINER --- */
.masonry-item .note-container { transform: translateY(100%); transition: transform 0.4s var(--ease-out-expo); }
.masonry-item.selected .note-container { transform: translateY(0); }
.masonry-item.selected .filename-badge { opacity: 0; }

/* --- MONOCHROME MODE --- */
body.monochrome-mode .masonry-item img { filter: grayscale(100%) contrast(1.15) !important; }
body.monochrome-mode #lightbox-img { filter: grayscale(100%) contrast(1.15) !important; }
body.monochrome-mode .compare-img { filter: grayscale(100%) contrast(1.15) !important; }

/* --- VAULT DOOR METALLIC ENHANCEMENT --- */
.vault-door {
    background: linear-gradient(180deg, #0a0a0a 0%, #111 30%, #080808 70%, #050505 100%);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.8);
}
.vault-door::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02) 50%, transparent);
    pointer-events: none;
}
.vault-door-left {
    border-right: 3px solid #1a1a1a;
    box-shadow: 20px 0 80px rgba(0,0,0,0.95), inset -1px 0 0 rgba(255,255,255,0.03);
}
.vault-door-right {
    border-left: 3px solid #111;
    box-shadow: -20px 0 80px rgba(0,0,0,0.95), inset 1px 0 0 rgba(255,255,255,0.03);
}

/* Lock wheel refined */
.vault-lock-ring {
    border: 2px solid rgba(200, 122, 76, 0.3);
    box-shadow: 0 0 30px rgba(200, 122, 76, 0.15), inset 0 0 20px rgba(200, 122, 76, 0.1);
}

/* --- VAULT LIGHT GOLDEN GLOW --- */
.vault-light-golden {
    background: radial-gradient(ellipse at center, rgba(200, 167, 76, 0.9) 0%, rgba(200, 122, 76, 0.5) 30%, rgba(255,255,255,0.8) 60%, rgba(255,255,255,0) 80%);
}

/* --- APERTURE EFFECTS --- */
.box-shadow-aperture {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 150vmax var(--bg-dark); 
    z-index: 9999; transition: width 1.8s var(--ease-in-out-circ), height 1.8s var(--ease-in-out-circ);
    pointer-events: none; display: flex; justify-content: center; align-items: center;
}
.box-shadow-aperture.aperture-open { width: 300vmax; height: 300vmax; }

.flash-overlay {
    position: fixed; inset: 0; background: #ffffff; z-index: 9998; pointer-events: none;
    animation: flashAnim 1.8s var(--ease-out-expo) forwards;
}
@keyframes flashAnim { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }

.no-select { -webkit-user-select: none; user-select: none; }

/* --- ADMIN CARD GLOW BORDER ON HOVER --- */
.admin-glow-card {
    position: relative;
    overflow: hidden;
}
.admin-glow-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, var(--copper), transparent, transparent);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s var(--ease-out-expo);
    animation: rotateBorder 4s linear infinite;
}
.admin-glow-card:hover::before {
    opacity: 1;
}
.admin-glow-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #0a0a0a;
    border-radius: inherit;
    z-index: -1;
}
@keyframes rotateBorder {
    to { transform: rotate(360deg); }
}

/* --- PREMIUM INPUT FOCUS GLOW --- */
.vault-input {
    transition: border-color 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.vault-input:focus {
    border-color: var(--copper) !important;
    box-shadow: 0 0 20px rgba(200, 122, 76, 0.15), 0 0 0 1px rgba(200, 122, 76, 0.3);
}

/* --- STORAGE BAR GLOW ANIMATION --- */
@keyframes storageGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(200, 122, 76, 0.3); }
    50% { box-shadow: 0 0 25px rgba(200, 122, 76, 0.6); }
}
.storage-bar-glow {
    animation: storageGlow 2s ease-in-out infinite;
}

/* --- PRELOADER ENHANCED (VAULT SPECIFIC) --- */
@keyframes loaderTextSlide {
    0%   { transform: translateX(-100vw); opacity: 0; }
    20%  { transform: translateX(0); opacity: 1; }
    80%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100vw); opacity: 0; }
}

@keyframes apertureGlow {
    0%   { box-shadow: 0 0 0 150vmax #050505, 0 0 0px rgba(200, 122, 76, 0); }
    50%  { box-shadow: 0 0 0 150vmax #050505, 0 0 80px rgba(200, 122, 76, 0.3); }
    100% { box-shadow: 0 0 0 150vmax #050505, 0 0 0px rgba(200, 122, 76, 0); }
}

/* --- LOGIN PARALLAX FLOAT --- */
@keyframes loginBgFloat {
    0%   { transform: scale(1.05) translate(0, 0); }
    25%  { transform: scale(1.08) translate(-5px, 3px); }
    50%  { transform: scale(1.06) translate(3px, -2px); }
    75%  { transform: scale(1.07) translate(-3px, -4px); }
    100% { transform: scale(1.05) translate(0, 0); }
}
.login-bg-float {
    animation: loginBgFloat 30s ease-in-out infinite;
}

/* --- BUTTON PULSE GLOW --- */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(200, 122, 76, 0.3); }
    50% { box-shadow: 0 0 35px rgba(200, 122, 76, 0.6), 0 0 60px rgba(200, 122, 76, 0.2); }
}
.btn-pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}
.btn-pulse-glow:hover {
    animation: none;
    box-shadow: 0 0 40px rgba(200, 122, 76, 0.5);
    transform: translateY(-2px);
    transition: all 0.4s var(--ease-out-expo);
}

/* --- ENCRYPTION ICON ANIMATION --- */
@keyframes encryptPulse {
    0%, 100% { opacity: 0.4; } 
    50% { opacity: 0.8; }
}
.encrypt-pulse {
    animation: encryptPulse 2.5s ease-in-out infinite;
}