/* Authentic Daily Tear-Off Lunar Almanac (Kalender Robek / 撕历) Styles */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@600;700;900&family=Noto+Serif:ital,wght@0,600;0,700;0,900;1,400&family=Playfair+Display:wght@700;900&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
    --primary-red: #c41d18;
    --primary-darkred: #940f0c;
    --gold-accent: #d4af37;
    --gold-light: #fece6c;
    --jade-green: #0d7544;
    --parchment-bg: #fbf8ef;
    --ink-black: #1c1917;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: #1c1917;
    background-image: 
        linear-gradient(rgba(20, 16, 14, 0.82), rgba(20, 16, 14, 0.88)), 
        url('../assets/bg.png'), 
        url('assets/bg.png'),
        url('https://lh3.googleusercontent.com/aida-public/AB6AXuBtjNIM1b-8P1wAUMqEuZS8v3vgE6QNvwzLm-cubnWURFqSjdxeyEu3xTp-CR0BTtRR3otcmh9m7Qrgk7rWcWpOmjOE6SOpQo-4py1UEhR0xEOrGalTcF0zBa1YQRWLVdSH4_JwI6UIM8d8ae83CnekKNI74RLek6636rTx8xYJFNJS_xuQMAXyvyeOfYPB-Bx9B0XoiNiRpgRnv01w2cttcqpFU_3VXQreTP7FFJxnTYa84LifYa42K4J25aShE2IA9g');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    font-family: 'Libre Caslon Text', 'Noto Serif', 'Georgia', serif;
    color: #292524;
    user-select: none;
    -webkit-user-select: none;
}

/* Subtle vintage newsprint texture */
.bg-paper-texture {
    background-color: #fbf8ef;
    background-image: 
        radial-gradient(#dfd4be 0.75px, transparent 0.75px), 
        radial-gradient(#d6c9af 0.5px, #fbf8ef 0.5px);
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

/* Authentic Chinese letterpress ink stamp effect */
.ink-stamp {
    filter: contrast(115%) drop-shadow(0 0.4px 0.2px rgba(180, 20, 20, 0.35));
}

/* Realistic Perforated Top Edge */
.perforated-edge {
    background-image: radial-gradient(circle at 50% 0%, #3e3223 3.5px, transparent 4px);
    background-size: 11px 8px;
    background-repeat: repeat-x;
}

/* Realistic Perforated Divider */
.perforated-divider {
    background-image: radial-gradient(circle at 50% 50%, #2b1c11 3px, transparent 3.5px);
    background-size: 12px 6px;
    background-repeat: repeat-x;
}

/* Metal Tin Clamp texture */
.metal-bracket {
    background: linear-gradient(180deg, #c7a353 0%, #efda88 35%, #8f6c1e 70%, #5d440c 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 2px rgba(0,0,0,0.6);
}

/* Double retro borders */
.calendar-double-border {
    border: 3.5px solid #c41d18;
    outline: 1.5px solid #c41d18;
    outline-offset: 3px;
}

/* Shadow styling */
.shadow-calendar-stack {
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0,0,0,0.18);
}
.shadow-vintage-inset {
    box-shadow: inset 0 0 16px rgba(180, 60, 20, 0.04);
}

/* Tear Animation Keyframes */
@keyframes tearAway {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
        transform-origin: bottom right;
    }
    35% {
        transform: translate(30px, 40px) rotate(8deg);
        opacity: 0.92;
    }
    100% {
        transform: translate(140px, 320px) rotate(24deg) scale(0.9);
        opacity: 0;
    }
}

.tear-animating {
    animation: tearAway 0.52s ease-in forwards;
    pointer-events: none;
}

/* Custom Scrollbar for activity lists */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 4px;
}