/* =============================================================
   base.css
   Global resets, custom font, typography, and animations.
   These rules apply site-wide and change rarely.
   ============================================================= */

/* --- Custom font -------------------------------------------- */

@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MYRIADPRO-REGULAR.OTF') format('opentype'),
         url('../fonts/MYRIADPRO-BOLD.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Reset --------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Base elements ------------------------------------------- */

html, body {
    overflow-x: hidden;
}

body {
    font-family: 'Myriad Pro', Arial, sans-serif;
    line-height: 1.8;
    color: #2c3e50;
    background-image: url("../img/zen_background.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: rgba(231, 220, 215, 0.97); /* fallback if image fails to load */
    position: relative
}

/* Mobile Fallback: For screens 768px or smaller */
@media (max-width: 768px) {
    body {
        background-image: url("../img/zen_background_mobile.jpg");
        background-size: contain;
        background-position: top;
        background-attachment: unset;
        background-repeat: repeat;
        background-color: rgba(231, 220, 215, 0.97); /* fallback if image fails to load */
    }
}

h1 {
    font-size: 2.4rem;
    color: #3d5a47;
    margin-bottom: 1rem;
    line-height: 1.2;
/*
    font-size: 3rem;
    color: #6a8c79;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
*/
}

h2 {
    font-size: 1.2rem;
    color: #6a8c79;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid rgba(139, 168, 148, 0.3);
    padding-bottom: 0.5rem;
}

p {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
}

/* --- Animations --------------------------------------------- */

@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -30px) scale(1.1); }
    66%       { transform: translate(-20px, 20px) scale(0.9); }
}