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

@font-face {
    font-family: "vine";
    src: url("assets/fonts/GuavineDemoRegular-1jGgL.otf") format("opentype");
}

@font-face {
    font-family: "orpheus";
    src: url("assets/fonts/Orpheus.otf") format("opentype");
}

@font-face {
    font-family: "orpheus-b";
    src: url("assets/fonts/Orpheus Bold.otf") format("opentype");
}

/* Full-page hero */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    background: url("assets/backgrounds/background1.png") center/cover no-repeat;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1; /* FIXED */
}

.hero-content {
    position: absolute;
    top: 12%;
    left: 8%;
    z-index: 3; /* FIXED */
    text-align: left; /* cleaner for your layout */
}

.site-title {
    font-family: "orpheus";
    font-size: 68px;
    font-weight: 900;

    /* Marble texture */
    background: url("assets/backgrounds/brown-marble3.png") center/cover;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Softer shadows for sharper edges */
    text-shadow:
        1px 1px 2px rgba(0, 0, 0, 0.35),
        -1px -1px 2px rgba(255, 255, 255, 0.15);

    /* Reduced drop-shadow to avoid blur */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));

    position: relative;
    display: inline-block;
    z-index: 3;
}


.site-title::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/textures/cracks.png") center/contain repeat;
    mix-blend-mode: overlay;
    opacity: 0.25;
    pointer-events: none;
}

.tagline {
    font-family: "vine";
    font-size: 24px; /* FIXED */
    color: rgb(224, 224, 224);
    margin-top: 8px; /* FIXED */
    z-index: 3;
}

.statues {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(200px, 34vw, 500px);
    z-index: 4; /* FIXED */
    opacity: 0.8;
    filter:
        grayscale(100%)
        contrast(140%)
        brightness(80%)
        sepia(20%);
}

/* Mobile */
@media (max-width: 600px) {
    .site-title {
        font-size: 32px;
        line-height: 1.1;
        word-wrap: break-word;

        /* --- BLUR FIX STARTS HERE --- */
        background: none;
        -webkit-background-clip: initial;
        background-clip: initial;
        color: rgb(0, 157, 34);

        text-shadow:
            2px 2px 3px rgba(0, 0, 0, 0.45);

        filter: none;
    }

    .site-title::after {
        display: none; /* removes cracks texture on mobile */
    }

    .tagline {
        font-size: 17px;
    }
}


/* ------------------------------
CENTERED HAMBURGER MENU
--------------------------------*/

.hamburger-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hamburger icon */
.hamburger {
    width: 42px;
    height: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 11;
}

.hamburger span {
    display: block;
    height: 5px;
    background: white;
    border-radius: 4px;
    transition: 0.3s ease;
}

/* Hamburger animation */
.hamburger.open span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
}

/* Menu panel */
.menu {
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.65);
    padding: 20px 30px;
    border-radius: 10px;
    display: none;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.menu.open {
    display: flex;
}

.menu a {
    color: rgb(0, 164, 82);
    font-family: "orpheus";
    font-size: 26px;
    text-decoration: none;
    transition: 0.2s;
}

.menu a:hover {
    color: #c8a97e;
    transform: scale(1.1);
}

.contact {
    position: absolute;
    bottom: 8%;
    left: 6%;
    font-family: "vine";
    font-weight: bold;
    color: rgb(224, 255, 233);
    font-size: 15px;
}

.contactMe {
    position: absolute;
    bottom: 5%;
    left: 4%;
    font-family: "vine";
    color: rgb(224, 255, 233);
    font-size: 15px;
    z-index: 200;
}

.contactMe:hover {
    color: white;
}