/* ============================================
   WOODPUNK — Landing Page Styles
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&display=swap');

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root variables */
:root {
    --color-bg: #0a0a0a;
    --color-gold: #C8956C;
    --color-gold-light: #E8C88A;
    --color-gold-dark: #A0714A;
    --color-text-muted: rgba(200, 149, 108, 0.8);
}

/* Body */
html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', 'Georgia', serif;
}

/* Main container */
.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    animation: fadeIn 2s ease-out;
}

/* Logo */
.logo {
    width: min(60vw, 400px);
    height: auto;
    filter: invert(0.78) sepia(0.45) saturate(1.8) hue-rotate(340deg) drop-shadow(0 0 40px rgba(200, 149, 108, 0.08));
    animation: breathe 6s ease-in-out infinite;
}

/* Tagline */
.tagline {
    color: var(--color-text-muted);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: fadeIn 3s ease-out 0.5s both;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes breathe {

    0%,
    100% {
        filter: invert(0.78) sepia(0.45) saturate(1.8) hue-rotate(340deg) drop-shadow(0 0 40px rgba(200, 149, 108, 0.08));
    }

    50% {
        filter: invert(0.78) sepia(0.45) saturate(1.8) hue-rotate(340deg) drop-shadow(0 0 60px rgba(200, 149, 108, 0.15));
    }
}

/* Subtle vignette overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center,
            transparent 50%,
            rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

.landing {
    position: relative;
    z-index: 2;
}