/* Förhindra layout shift och använd font-display swap */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

/* Definiera fonts med bra fallbacks */
body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-display: swap;
}

.font-heading {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-display: swap;
}

/* Optimera för font loading */
* {
    font-display: swap;
}


/* Tailwind-like utility classes */
.font-heading {
    font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* Christmas color palette */
.bg-sand {
    background-color: #f7f5f1;
}

.text-sand {
    color: #f7f5f1;
}

.bg-darkred {
    background-color: #ac0f0f;
}

.text-darkred {
    color: #ac0f0f;
}

.bg-darkerred {
    background-color: #4a0606;
}

.text-darkerred {
    color: #4a0606;
}

.bg-graphite {
    background-color: #d7d4d3;
}

.text-graphite {
    color: #d7d4d3;
}


/* Julkalender-animationer */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.4);
    }
}

.calendar-day.active:hover {
    animation: glow 2s infinite;
}

.christmas-snow {
    background-image: radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, white, transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent);
    background-size: 100px 100px;
    animation: snow 10s linear infinite;
}

@keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    100% {
        background-position: 100px 100px, -100px 100px, 50px 100px;
    }
}

/* CSS-SNÖ EFFEKT - Tre lager för djup (parallax) */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    /* Gör att man kan klicka på saker bakom snön */
    z-index: 9999;
    /* Högt z-index för att vara ovanpå allt */
    overflow: hidden;
}

.snow {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* LAGER 1: Långsam, små flingor (långt bort) */
.layer-1 {
    width: 4px;
    height: 4px;
    background: white;
    opacity: 0.6;
    box-shadow:
        10vw 14vh 0 white, 85vw 75vh 0 white, 55vw 15vh 0 white,
        32vw 88vh 0 white, 12vw 45vh 0 white, 92vw 25vh 0 white,
        65vw 5vh 0 white, 45vw 55vh 0 white, 25vw 95vh 0 white,
        5vw 35vh 0 white, 75vw 65vh 0 white, 38vw 12vh 0 white,
        95vw 42vh 0 white, 15vw 82vh 0 white, 62vw 32vh 0 white;
    animation: fall 15s linear infinite;
}

.layer-1::after {
    content: '';
    position: absolute;
    top: -100vh;
    left: 0;
    width: 4px;
    height: 4px;
    background: white;
    opacity: 0.6;
    box-shadow: inherit;
}

/* LAGER 2: Medium hastighet, mellanstora flingor */
.layer-2 {
    width: 6px;
    height: 6px;
    background: white;
    opacity: 0.8;
    box-shadow:
        20vw 84vh 0 white, 72vw 15vh 0 white, 48vw 62vh 0 white,
        91vw 34vh 0 white, 8vw 91vh 0 white, 33vw 22vh 0 white,
        67vw 49vh 0 white, 14vw 8vh 0 white, 82vw 77vh 0 white,
        53vw 94vh 0 white, 27vw 41vh 0 white;
    animation: fall 10s linear infinite;
    animation-delay: -5s;
}

.layer-2::after {
    content: '';
    position: absolute;
    top: -100vh;
    left: 0;
    width: 6px;
    height: 6px;
    background: white;
    opacity: 0.8;
    box-shadow: inherit;
}

/* LAGER 3: Snabb, större flingor (nära) */
.layer-3 {
    width: 8px;
    height: 8px;
    background: white;
    opacity: 1;
    left: 50%;
    box-shadow:
        -35vw 18vh 0 white, 42vw 66vh 0 white, -15vw 92vh 0 white,
        25vw 38vh 0 white, 8vw 81vh 0 white, -45vw 52vh 0 white,
        38vw 12vh 0 white;
    animation: fall 6s linear infinite;
    animation-delay: -2s;
}

.layer-3::after {
    content: '';
    position: absolute;
    top: -100vh;
    left: 0;
    width: 8px;
    height: 8px;
    background: white;
    opacity: 1;
    box-shadow: inherit;
}

/* Animationen som får allt att falla nedåt */
@keyframes fall {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100vh);
    }
}

.city-silhouette {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
}

.building {
    position: absolute;
    bottom: 0;
    background: #1f2937;
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}

.building.pointed {
    clip-path: polygon(0 100%, 0 20%, 50% 0, 100% 20%, 100% 100%);
}

/* DÖRR-ANIMATION FÖR ADVENTSKALENDER */
.door-container {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.door {
    transform-origin: left center;
    transition: transform 0.6s ease-in-out;
    backface-visibility: visible;
    transform: rotateY(-15deg);
}

.door-closed {
    transform: rotateY(-0deg);
}

.door-open {
    transform: rotateY(-75deg);
}

.door-locked {
    transform: rotateY(-0deg);
}

.group:hover .door-closed {
    transform: rotateY(-95deg);
}

.group:hover .door-open {
    transform: rotateY(-95deg);
}

.group:hover .door-locked {
    transform: rotateY(-20deg);
}