/* ==========================================================================
   Variables & Theme Tokens
   ========================================================================== */
:root {
    /* Colors - Ultra Premium Dark Theme */
    --bg-primary: #050505;
    /* Deep rich black */
    --bg-secondary: #0a0a0a;
    --bg-glass: rgba(15, 15, 15, 0.4);
    --text-primary: #f8f8f8;
    --text-secondary: #8c8c8c;
    --accent-color: #d4af37;
    /* Classic pale gold */
    --accent-hover: #fcf1d5;
    --border-color: rgba(212, 175, 55, 0.15);
    /* Subtle gold border */

    /* Typography */
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Montserrat', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 3rem;
    --spacing-lg: 5rem;
    --spacing-xl: 8rem;

    /* Transitions */
    --transition-fast: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-medium: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-slow: 1.2s cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadows */
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 20px 40px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 40px rgba(212, 175, 55, 0.2);
}

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

body.dark-theme {
    background-color: #050608;
    /* Rich, structured background mesh to remove the empty feeling:
       1. Base color is extremely deep dark charcoal.
       2. Subtle vignette effect pushing focus to the center.
       3. Very soft radial glows to create depth, but keeping tones pure (no mud).
       4. The existing SVG noise filter overlay adds texture.
    */
    background-image:
        radial-gradient(circle at 15% 50%, rgba(20, 25, 40, 0.45) 0%, transparent 60%),
        radial-gradient(circle at 85% 30%, rgba(15, 20, 35, 0.35) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(5, 5, 8, 0) 0%, rgba(2, 2, 4, 0.95) 100%);
    background-size: 100vw 100vh;
    background-attachment: fixed;
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.7;
    font-weight: 300;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 100%;
    }
}

body.dark-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.15;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
    mix-blend-mode: overlay;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.relative {
    position: relative;
}

.z-10 {
    z-index: 10;
}

.text-center {
    text-align: center;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(5px);
    }

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

.animate-fade-in {
    animation: fadeIn var(--transition-slow) forwards;
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp var(--transition-slow) forwards;
}

.delay-1 {
    animation-delay: 0.3s;
}

.delay-2 {
    animation-delay: 0.6s;
}

.delay-3 {
    animation-delay: 0.9s;
}

/* ==========================================================================
   Hero Header & Slider
   ========================================================================== */
.hero-header {
    height: 70vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* Background Slider */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slider .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: crossfade 24s infinite;
    transform: scale(1.05);
    /* Prevent edges showing during zoom */
}

/* 4 images, each gets 6s (24s total). Fade in 2s, show 4s, fade out 2s */
.hero-slider .slide:nth-child(1) {
    animation-delay: 0s;
}

.hero-slider .slide:nth-child(2) {
    animation-delay: 6s;
}

.hero-slider .slide:nth-child(3) {
    animation-delay: 12s;
}

.hero-slider .slide:nth-child(4) {
    animation-delay: 18s;
}

@keyframes crossfade {
    0% {
        opacity: 0;
        transform: scale(1.05);
        filter: blur(5px);
    }

    8% {
        opacity: 1;
        transform: scale(1.03);
        filter: blur(0px);
    }

    25% {
        opacity: 1;
        transform: scale(1.0);
    }

    33% {
        opacity: 0;
        transform: scale(0.98);
    }

    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.7) 0%, rgba(5, 5, 5, 0.4) 50%, rgba(5, 5, 5, 1) 100%);
    z-index: 1;
}

/* Ambient glow */
.hero-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.08) 0%, transparent 40%);
    animation: rotateGlow 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes rotateGlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hero-title {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-sm);
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
    font-weight: 400;
}

.hero-subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    color: var(--accent-color);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-lg);
    font-weight: 400;
    opacity: 0.9;
}

/* ==========================================================================
   Custom Select (Year Filter)
   ========================================================================== */
.year-selector-container {
    max-width: 350px;
    margin: 0 auto;
}

.custom-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.custom-select {
    width: 100%;
    padding: 1.2rem 2rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-primary);
    background-color: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    appearance: none;
    outline: none;
    cursor: pointer;
    backdrop-filter: blur(20px);
    transition: all var(--transition-medium);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.custom-select:hover,
.custom-select:focus {
    border-color: rgba(212, 175, 55, 0.5);
    background-color: rgba(15, 15, 15, 0.8);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.custom-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.select-icon {
    position: absolute;
    right: 1.5rem;
    color: var(--accent-color);
    pointer-events: none;
    transition: transform var(--transition-fast);
}

.custom-select:focus+.select-icon {
    transform: rotate(180deg);
}

/* ==========================================================================
   Main Content & Authors Grid
   ========================================================================== */
.main-content {
    padding: var(--spacing-xl) var(--spacing-sm);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--text-primary);
    position: relative;
    padding-bottom: var(--spacing-sm);
    letter-spacing: 0.05em;
    font-weight: 400;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 1px;
    background-color: var(--accent-color);
}

.authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* slightly wider columns */
    gap: 3rem 2rem;
    /* reduced vertical gap */
}

.author-card {
    background: rgba(15, 15, 15, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 1.5rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Luxury hover effect */
.author-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: border-color 0.6s ease;
    pointer-events: none;
    z-index: 10;
    border-radius: 4px;
}

.author-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
    background: rgba(25, 25, 25, 0.6);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.author-card:hover::after {
    border-color: rgba(212, 175, 55, 0.4);
}

.author-img-wrapper {
    position: relative;
    width: 100%;
    padding-top: 110%;
    /* Slightly less tall */
    /* Portrait aspect ratio */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Subtle inner glow for the image wrapper */
.author-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 2;
    transition: box-shadow var(--transition-medium);
}

.author-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
    filter: grayscale(30%) contrast(110%) brightness(0.9);
    z-index: 1;
}

.author-card:hover .author-img {
    transform: scale(1.08);
    filter: grayscale(0%) contrast(110%) brightness(1.1);
}

.author-card:hover .author-img-wrapper::after {
    box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.2);
}

.author-info {
    padding: 0 1rem;
    width: 100%;
    text-align: center;
    transition: transform var(--transition-medium);
}

.author-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    transition: color var(--transition-fast);
}

.author-card:hover .author-name {
    color: var(--accent-color);
}

.author-desc {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0.8;
}

.author-link {
    margin-top: 1.5rem;
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0.3;
    transition: all var(--transition-medium);
    transform: translateY(5px);
}

.author-card:hover .author-link {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Image Frame Effect */
.author-img-wrapper::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 5;
    pointer-events: none;
    transition: border-color var(--transition-medium);
}

.author-card:hover .author-img-wrapper::before {
    border-color: rgba(212, 175, 55, 0.4);
}

/* Skeleton Loading State */
.skeleton {
    background-color: var(--bg-secondary);
    border-color: transparent;
}

.skeleton-img {
    width: 100%;
    padding-top: 100%;
    background: linear-gradient(90deg, #161920 25%, #222630 50%, #161920 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-text {
    margin: var(--spacing-sm);
    background: linear-gradient(90deg, #161920 25%, #222630 50%, #161920 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text.title {
    height: 24px;
    width: 70%;
    margin-bottom: 8px;
}

.skeleton-text.subtitle {
    height: 16px;
    width: 40%;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   Footer (Premium Redesign)
   ========================================================================== */
.main-footer {
    padding: var(--spacing-lg) 0 var(--spacing-md);
    position: relative;
    background: linear-gradient(to top, rgba(5, 5, 5, 0.95), transparent);
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    margin-top: 4rem;
}

/* Subtle decorative line above the footer text */
.main-footer::before {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--accent-color);
    margin: 0 auto 2rem;
    opacity: 0.3;
}

.main-footer p {
    opacity: 0.6;
    transition: opacity var(--transition-medium);
}

.main-footer:hover p {
    opacity: 1;
}

.admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all var(--transition-medium);
    text-decoration: none;
}

.admin-link:hover {
    color: var(--accent-color);
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.05);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Mobile & Tablet Responsive */
@media (max-width: 768px) {
    :root {
        --spacing-sm: 1rem;
        --spacing-md: 2rem;
        --spacing-lg: 3rem;
        --spacing-xl: 4rem;
    }

    .container { padding: 0 1rem; }

    .hero-section { min-height: 70vh; padding: 3rem 0; }
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1rem; }

    .section-title { font-size: 2rem; }

    .gallery-grid { grid-template-columns: 1fr; gap: 1.5rem; }

    .authors-grid { grid-template-columns: 1fr; gap: 2rem; }

    .years-grid { grid-template-columns: 1fr; }
}