/*
Theme Name: The Ephemeral Archive
Theme URI: http://example.com/ephemeral-archive
Author: Gemini
Author URI: https://ai.google/
Description: A minimalist, typography-focused WordPress theme inspired by high-end creative archives. High contrast, clean, and animated.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-background, custom-colors, custom-logo, custom-menu, large-header, minimalism, typography, animation
Text Domain: ephemeral-archive
*/

/* --- 1. Reset and Box Model --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- 2. Variables and Base --- */
:root {
    --color-primary: #000000;
    --color-secondary: #FFFFFF;
    --color-background: #FAFAFA;
    --font-serif: 'Playfair Display', serif; /* Linked via Google Fonts in functions.php */
    --font-sans: 'Open Sans', sans-serif;   /* Linked via Google Fonts in functions.php */
}

body {
    background-color: var(--color-background);
    color: var(--color-primary);
    font-family: var(--font-sans);
    line-height: 1.8;
    padding: 5vh 5vw;
}

/* --- 3. Typography and Base Links --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em;
}

h1 { font-size: 4rem; }
h2 { font-size: 2.5rem; }
p { margin-bottom: 1.5em; }

a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-primary);
    transition: border-color 0.3s;
}
a:hover {
    border-bottom-color: transparent;
}

/* --- 4. Layout/Structure (Minimal Container) --- */
.site-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5vh;
}

/* --- 5. Header and Navigation Styles --- */
.site-header a {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-bottom: none;
    display: block;
    padding-bottom: 0;
}

.main-navigation {
    position: fixed;
    top: 5vh;
    right: 5vw;
    z-index: 1000;
}

.menu-item {
    display: inline-block;
    margin-left: 2em;
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

.menu-item a {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: none;
}

.main-navigation:hover .menu-item {
    opacity: 1;
}

/* --- 6. Creative Animation and Event Effects --- */

/* Scroll Fade-In Preparation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1), transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Text Hover Effect (Slide-in Underline) */
.entry-title a {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding-bottom: 2px;
}
.entry-title a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    transform: translateX(-105%);
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.entry-title a:hover::before {
    transform: translateX(0);
}
.entry-title a {
    border-bottom: none;
}

/* Custom Cursor Placeholder */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.1s linear, opacity 0.2s;
    opacity: 0.8;
}
/* JS will add .is-hovering */
#custom-cursor.is-hovering {
    transform: scale(3);
    opacity: 1;
}

/* Keyboard ESC Filter Effect (JS adds body.filter-sepia) */
body.filter-sepia {
    filter: sepia(0.2) saturate(0.8);
    transition: filter 0.5s ease;
}