:root {
    --bg-color: #F9F7F2;      /* Off-white paper */
    --forest-green: #2D4628;  /* Deep green */
    --earth-brown: #4A3728;   /* Deep brown - borders/text */
    --fox-copper: #D35400;    /* Copper/orange accent */
    --border-thickness: 3px;
}

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


img{
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    color: var(--earth-brown);
    padding: 20px; /* The outer "frame" spacing */
}

main {
    flex-grow: 1; /* Tells the middle section to take up all available room */
    display: flex;
    flex-direction: column;
}

a {
    color: var(--earth-brown); /* Covers default blue links */
    text-decoration: underline;      
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--fox-copper);   /* All links turn copper on hover */
}

a.active{
    color: var(--forest-green);
}


/* The Main Border Box around the whole site */
.site-wrapper {
    border: var(--border-thickness) solid var(--earth-brown);
    min-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 0 !important; /* Forcefully remove any bottom cushion */
    overflow: hidden; /* Prevents scrollbar sprouting due to main page fern animation */
}

/* Header & Sticky Nav */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: var(--border-thickness) solid var(--earth-brown);
    position: sticky;  /* This makes it stick */
    top: 0;
    background: var(--bg-color); /* Essential so content doesn't show through */
    z-index: 1000; /* Keeps it above the ferns and other content */
}

nav a {
    text-decoration: none;
    color: var(--earth-brown);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    margin: 0 15px;
}

nav a:hover {
    color: var(--fox-copper);
}

/* The Fox Icon */
.fox-fern-icon {
    width: 90px;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Logo Tilt Effect */
.fox-fern-icon:hover {
    transform: rotate(-15deg) scale(1.1);  /* A 15-degree tilt and a slight scale up */
}


.logo-center a {
    text-decoration: none;
    display: inline-block; /* Keeps the tilt animation smooth */
    outline: none;
}

#ff-logo{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.fox-landing-anim {
    animation: landingFox 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

#ff-logo.fox-landing-anim {
    /* Adding a 1.2s delay so the fox starts spinning into view
       just before the ferns fully finish their 1.5s slide-up */
    animation: landingFox 1.2s cubic-bezier(0.25, 1, 0.5, 1) 1.2s forwards !important;
    opacity: 0; /* Keeps the fox invisible during the delay */
}
@keyframes landingFox {
    0% {
        opacity: 0;
        /* Force 3D rendering with translateZ */
        transform: scale(0.5) rotate(-360deg) translateZ(0);
    }
    50% {
        opacity: 1;
        /* Mid-point of the spin */
        transform: scale(1.1) rotate(-180deg) translateZ(0);
    }
    70% {
        /* The spin finishes here */
        transform: scale(1) rotate(0deg) translateZ(0);
    }
    80% {
        transform: rotate(15deg) translateZ(0); /* Wobble right */
    }
    90% {
        transform: rotate(-10deg) translateZ(0); /* Wobble left */
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1) translateZ(0);
    }
}


/* Hero Section */
.hero-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px 20px;
}

.studio-title {
    font-family: 'DM Serif Display', serif;
    font-size: 5rem;
    color: var(--forest-green);
    letter-spacing: -2px;
}

.studio-tagline {
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 10px;
}

/* Bottom Graphic Area */
.bottom-graphic-section {
    overflow: visible !important; /* ensures container doesn't cut the image */
    border-top: var(--border-thickness) solid var(--earth-brown);
    overflow: visible; 
    position: relative;
    background-color: #f1ede4;
    height: 400px; 
    margin-top: auto; /* Pushes to the very bottom of the flex column */
    width: 100%;
}

.fern-image {
    will-change: transform;  /* this tells browswers that this item is going to be animated, so don't clip it too aggressively */
    position: absolute;
    bottom: -4px;  /* ensuring that no ferns try to float!  They were hovering a few pixels from the base before adding this. */
    left: 50%;
    /* Start with the transform for the slide-up */
    transform-origin: bottom center;
    transform: translateX(-50%) translateY(0);
    
    min-width: 110%;
    width: auto;
    height: 170%;
    object-fit: cover;
    object-position: bottom;
    display: block;
    z-index: 5;

    /* Add Hardware Acceleration to prevent clipping/flicker on some browsers */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(0);

    /* Combine both animations: 
       1. slideUp (1.5s, happens once)
       2. swayFern (6s, starts after a small delay, loops forever) */
    animation: 
        slideUpFern 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        swayFern 8s ease-in-out 1.5s infinite;
    
    opacity: 0;
    /* This ensures the animation origin is at the bottom, 
       so the ferns sway from the 'roots' rather than the middle */
}

/* The Slide up - animates ferns as they move into position */
@keyframes slideUpFern {
    0% {
        /* Keep the translateX(-50%) here so it stays centered while moving!!! */
        transform: translateX(-50%) translateY(80px) translateZ(0); 
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0) translateZ(0);
        opacity: 1;
    }
}
/* The Sway - A very gentle rotation and shift */
@keyframes swayFern {
    0%, 100% {
        /* Keep the centering translateX and add a 0 skew */
        transform: translateX(-50%) skewX(0deg) scale(1) translateZ(0);
    }
    50% {
        /* A very slight tilt (1-2 degrees is plenty) */
        /* This stretches the top/sides but leaves the bottom line untouched */
        transform: translateX(-50%) skewX(2.5deg) scale(1) translateZ(0);
    }
}

/* The 'Active' Page Indicator */
.main-header nav a.active {
    color: var(--fox-copper);
    font-weight: 900;
}


/* --- Simple Footer for Internal Pages --- */
.footer-simple {
    border-top: var(--border-thickness) solid var(--earth-brown);
    background-color: #f1ede4; /* Same background for consistency */
    padding: 30px 0;
    margin-top: auto; /* Keeps it at the very bottom */
    text-align: center;
}

.footer-credits {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--earth-brown);
    opacity: 0.8;
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    
    /* Reduce the outer padding to conserve screen space */
    body {
        padding: 10px;
    }

    /* Stack the Navigation */
    .main-header {
        flex-direction: column; /* Stacks links and logo vertically */
        padding: 15px;
        gap: 15px;
    }

    .nav-left, .nav-right {
        display: flex;
        justify-content: space-around;
        width: 100%;
    }

    /* Scale down the Typography */
    .studio-title {
        font-size: 2.5rem; /* Smaller for phone screens */
    }

    /* Adjust the Fern Graphic */
    .bottom-graphic-section {
        height: 300px; /* Shorter window for smaller screens - was covering too much previously */
    }
    
    .fern-image {
        height: 130%; /* Even more 'peek' on mobile as I lose the taller outer ferns */
        width: 150%; /* Allows the image to be wider than the screen for a nice crop */
        left: 50%;
        transform: translateX(-50%); /* Centers the over-wide image */
    }
}