/* ----------------------------------------------------
   GLOBAL / BACKGROUND (PARALLAX, FULL BLEED)
---------------------------------------------------- */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #fff;
    background: url("mountain-bg.png") center/cover no-repeat fixed;
    background-attachment: fixed;
    overflow-x: hidden;
}

/* WINTER MODE (auto enabled in JS) */
body.winter-mode {
    background: url("winter-bg.png") center/cover no-repeat fixed;
}


/* ----------------------------------------------------
   HERO SECTION + SOFT FADE
---------------------------------------------------- */
.hero-fade {
    width: 100%;
    padding: 40px 0 20px 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.30),
        rgba(0,0,0,0)
    );
}

.hero {
    text-align: center;
}

.hero img {
    width: 260px;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    border: 4px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 25px rgba(0,0,0,0.45);
}

.hero h1 {
    margin-top: 18px;
    font-size: 42px;
    font-weight: 700;
}

.hero p {
    font-size: 18px;
    opacity: 0.9;
}


/* ----------------------------------------------------
   HEADERS + CARD SECTION
---------------------------------------------------- */
h2 {
    text-align: center;
    margin-top: 35px;
    font-size: 32px;
}

.card-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
}

.card {
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    width: 280px;
    padding: 22px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.35);
}

.card h3 {
    margin-bottom: 10px;
    font-size: 22px;
}

footer {
    text-align: center;
    padding: 35px 0;
    font-size: 14px;
    opacity: 0.8;
}


/* ----------------------------------------------------
   FALLING LEAVES (REALISTIC)
---------------------------------------------------- */
#leaf-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

.leaf {
    position: fixed;
    top: -40px;
    width: 40px;
    height: 40px;
    animation: fall linear infinite, sway ease-in-out infinite;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Realistic maple leaf 1 */
.leaf1 { 
    background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 64 64' fill='%23E97451' xmlns='http://www.w3.org/2000/svg'><path d='M32 2l6 10 12-4-4 12 10 6-10 6 4 12-12-4-6 10-6-10-12 4 4-12-10-6 10-6-4-12 12 4z'/></svg>");
}

/* Realistic maple leaf 2 */
.leaf2 { 
    background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 64 64' fill='%23D35400' xmlns='http://www.w3.org/2000/svg'><path d='M32 6l4 8 10-3-3 10 8 4-8 4 3 10-10-3-4 8-4-8-10 3 3-10-8-4 8-4-3-10 10 3z'/></svg>");
}

/* Realistic maple leaf 3 */
.leaf3 {
    background-image: url("data:image/svg+xml;utf8,<svg width='40' height='40' viewBox='0 0 64 64' fill='%23FF7F50' xmlns='http://www.w3.org/2000/svg'><path d='M32 4l5 9 9-3-3 9 9 5-9 5 3 9-9-3-5 9-5-9-9 3 3-9-9-5 9-5-3-9 9 3z'/></svg>");
}

@keyframes fall {
    0% { transform: translateY(-40px) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(360deg); }
}

@keyframes sway {
    0% { margin-left: -20px; }
    50% { margin-left: 20px; }
    100% { margin-left: -20px; }
}


/* ----------------------------------------------------
   MOBILE FRIENDLY
---------------------------------------------------- */
@media (max-width: 768px) {

    .hero img {
        width: 200px;
        height: 200px;
    }

    h2 {
        font-size: 26px;
    }

    .card {
        width: 90%;
        margin-bottom: 20px;
    }
}

/* ----------------------------------------------------
   REALISTIC LEAVES (new system)
---------------------------------------------------- */

/* Leaf container */
#leaf-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}

/* Base leaf style */
.leaf {
    position: fixed;
    top: -80px;
    width: 50px;
    height: 50px;
    opacity: 0.95;
    background-size: contain;
    background-repeat: no-repeat;
    animation: fall linear infinite, drift ease-in-out infinite;
}

/* 🍁 RED MAPLE — fully realistic */
.leaf1 {
    background-image: url("data:image/svg+xml;utf8,
    <svg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>
    <path fill='%23D8493A' d='M32 2l6 14 14-6-6 14 14 6-14 6 6 14-14-6-6 14-6-14-14 6 6-14-14-6 14-6-6-14 14 6z' />
    </svg>");
}

/* 🍂 OAK LEAF — warm brown */
.leaf2 {
    background-image: url("data:image/svg+xml;utf8,
    <svg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>
    <path fill='%23C47A2C' d='M32 2c5 8 10 10 10 18s-5 12-10 18c-5-6-10-10-10-18s5-10 10-18z'/>
    </svg>");
}

/* 🍁 ORANGE MAPLE — large edges */
.leaf3 {
    background-image: url("data:image/svg+xml;utf8,
    <svg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>
    <path fill='%23E67E22' d='M32 4l7 12 12-4-4 12 12 7-12 7 4 12-12-4-7 12-7-12-12 4 4-12-12-7 12-7-4-12 12 4z'/>
    </svg>");
}

/* 🍂 SMALL BIRCH LEAF */
.leaf4 {
    background-image: url("data:image/svg+xml;utf8,
    <svg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'>
    <path fill='%23F4A742' d='M25 2c6 5 10 10 10 15s-4 10-10 15C19 27 15 22 15 17s4-10 10-15z'/>
    </svg>");
}

/* ----------------------------------------------------------------------------
   MORE LEAF VARIETY (optional)
---------------------------------------------------------------------------- */
.leaf5 {
    background-image: url("data:image/svg+xml;utf8,
    <svg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
    <path fill='%23FF9F2F' d='M24 3l5 10 10-3-3 10 10 5-10 5 3 10-10-3-5 10-5-10-10 3 3-10-10-5 10-5-3-10 10 3z'/>
    </svg>");
}

/* ----------------------------------------------------
   FALL + DRIFT MOTION
---------------------------------------------------- */
@keyframes fall {
    0%   { transform: translateY(-100px) rotate(0deg); }
    100% { transform: translateY(120vh) rotate(360deg); }
}

@keyframes drift {
    0%   { margin-left: -30px; }
    50%  { margin-left: 30px; }
    100% { margin-left: -30px; }
}


/* ----------------------------------------------------
   WINTER BACKGROUND (auto enabled)
---------------------------------------------------- */
body.winter-mode {
    background: url("winter-bg.png") center/cover no-repeat fixed !important;
}

/* Snowflakes replace leaves */
.snowflake {
    position: fixed;
    top: -40px;
    width: 18px;
    height: 18px;
    opacity: 0.9;
    pointer-events: none;
    z-index: 9999;
    background-size: contain;
    background-repeat: no-repeat;
    animation: snowFall linear infinite, snowDrift ease-in-out infinite;
}

/* Realistic snowflake SVG */
.snowflake {
    background-image: url("data:image/svg+xml;utf8,
    <svg width='24' height='24' viewBox='0 0 24 24' fill='%23FFFFFF' xmlns='http://www.w3.org/2000/svg'>
    <path d='M12 2l1 4-1 1-1-1 1-4zm0 20l1-4-1-1-1 1 1 4zm10-10l-4 1-1-1 1-1 4 1zm-20 0l4 1 1-1-1-1-4 1zm15.5 7.5l-2.8-2.8.3-1.4 1.4-.3 2.8 2.8-1.7 1.7zm-11 0l2.8-2.8-.3-1.4-1.4-.3-2.8 2.8 1.7 1.7zm0-15l2.8 2.8-.3 1.4-1.4.3-2.8-2.8 1.7-1.7zm11 0l-2.8 2.8.3 1.4 1.4.3 2.8-2.8-1.7-1.7z'/>
    </svg>");
}

@keyframes snowFall {
    0% { transform: translateY(-50px) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(360deg); }
}

@keyframes snowDrift {
    0% { margin-left: -20px; }
    50% { margin-left: 20px; }
    100% { margin-left: -20px; }
}