@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600&family=Montserrat:wght@300;400;600;700;900&family=Alumni+Sans+Collegiate+One:ital@0;1&family=Graduate&display=swap');

/* Fluid typography for identical scaling across laptop screens */
@media (min-width: 64em) {
    html {
        font-size: clamp(0.6625rem, 1.0416vw, 1rem) !important;
    }
}

/* Scale down globally for mobile to prevent oversized elements */
@media (max-width: 53.125em) {
    html {
        font-size: 0.844rem !important;
    }
}

@font-face {
    font-family: 'Freshman';
    src: url('../fonts/Freshman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --dark-charcoal: #0b0d10;
    --gold-primary: #d7a234;
    --gold-light: #d7a234;
    --gold-dark: #aa7c11;
    --gold-gradient: linear-gradient(135deg, #aa7c11 0%, #d7a234 50%, #f5e8c7 100%);
    --gold-glow: rgba(215, 162, 52, 0.3);
    --logo-size: clamp(12rem, min(36vw, 54vh), 42rem);
}

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

html {
    background-color: #0b0d10 !important;
}

html, body {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

body {
    background: transparent;
    color: var(--gold-light);
    font-family: 'Playfair Display', serif;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("./bg.avif") no-repeat center center;
    background-size: cover;
    z-index: -1;
    will-change: transform;
}

/* Main Layout Centering */
.main-content-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding: 5rem 1.25rem 1rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
    position: relative;
}

/* ===== 3-COLUMN SPLIT LAYOUT SCHEMA ===== */
.content-split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    width: 100%;
    max-width: 106.25rem;
    padding: 0 1.5rem;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Left Column: Branding Text */
.text-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: start;
    text-align: left;
    width: 100%;
    min-width: 0;
    transform: translateY(32%);
}

/* Center Column: Logo */
.logo-column {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    transform: translate(-0.8vw, 5%);
}

/* Timer Box Wrapper for alignment */
.timer-wrapper {
    justify-self: end;
    width: 100%;
    transform: translateY(40%);
}

/* Timer Box */
.timer-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 35rem;
}

/* ===== 1. HERO SEAL / LOGO EMBLEM ===== */
.hero-seal-container {
    position: relative;
    width: var(--logo-size);
    height: var(--logo-size);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.hero-seal-container:hover {
    transform: scale(1.03);
}

.seal-bg-glow {
    position: absolute;
    width: calc(var(--logo-size) * 0.8);
    height: calc(var(--logo-size) * 0.8);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 75%);
    z-index: 1;
    pointer-events: none;
}

/* ===== BRANDING TYPOGRAPHY ===== */
.theme-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 3.8vw, 4.2rem);
    font-weight: 900;
    color: rgba(215, 162, 52, 0.95);
    text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.9);
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    line-height: 0.95;
    text-align: left;
    transform: translateY(-2%);
    display: inline-block;
}

.theme-subtitle {
    font-family: 'Freshman', 'Alumni Sans Collegiate One', 'Graduate', 'Collegiate', sans-serif;
    font-size: clamp(0.8rem, 1.6vw, 2.2rem);
    font-weight: normal;
    letter-spacing: clamp(0.1rem, 0.4vw, 0.3125rem);
    margin-top: 0.3rem;
    color: rgba(215, 162, 52, 0.95);
    filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.9));
    text-transform: uppercase;
    line-height: 1.15;
    display: inline-block;
    white-space: normal;
    text-align: center;
}



/* ===== COUNTDOWN TIMER GRAPHICS ===== */
.countdown-heading {
    font-family: 'Montserrat', sans-serif;
    color: var(--gold-primary);
    font-size: clamp(0.9rem, 1.6vw, 1.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: clamp(0.15rem, 0.3vw, 0.25rem);
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    text-shadow: 0 0 0.5rem var(--gold-glow);
    text-align: center;
}

.countdown-container {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: clamp(0.4rem, 1vw, 1.2rem);
    width: 100%;
}

.countdown-box {
    background: rgba(11, 13, 16, 0.85);
    border: 0.09375rem solid rgba(212, 175, 55, 0.25);
    border-radius: 0.75rem;
    padding: clamp(0.6rem, 1.5vw, 1.2rem) 0.5rem;
    flex: 1 1 0px;
    min-width: 0;
    max-width: 6.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
}

.countdown-box:hover {
    transform: translateY(-0.3125rem);
    border-color: var(--gold-primary);
}

.countdown-num {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.countdown-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
    font-weight: 600;
    color: var(--gold-primary);
    text-transform: uppercase;
    margin-top: clamp(0.25rem, 0.6vw, 0.5rem);
    letter-spacing: clamp(0.05rem, 0.1vw, 0.1rem);
}

/* ===== 2. SECTION DIVIDER ===== */
.section-divider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 43.75rem;
    margin: 0 auto 0.8rem auto;
    grid-column: 1 / -1; /* Always spans full width of parent grid */
    transform: translateY(2.5rem);
}

.divider-line {
    width: 100%;
    height: 0.125rem;
    background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
    opacity: 0.65;
}

/* ===== 3. BOTTOM COMMITTEES ROW ===== */
.committees-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 4.8rem);
    width: 100%;
    max-width: 81.25rem;
}

.committee-emblem-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: clamp(4rem, 15vw, 9.375rem);
}

.committee-emblem-card:hover {
    transform: translateY(-0.5rem);
}

.emblem-circle {
    width: clamp(3rem, 12vw, 7.8125rem);
    height: clamp(3rem, 12vw, 7.8125rem);
    border-radius: 50%;
    border: 0.09375rem solid var(--gold-primary);
    background-color: rgba(11, 13, 16, 0.8);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.4), inset 0 0 0.625rem rgba(212, 175, 55, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.6rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.emblem-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 0.09375rem solid transparent;
    background: var(--gold-gradient) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.committee-emblem-card:hover .emblem-circle {
    border-color: transparent;
    box-shadow: 0 0 1.5625rem rgba(212, 175, 55, 0.4), inset 0 0 0.9375rem rgba(212, 175, 55, 0.15);
}

.committee-emblem-card:hover .emblem-circle::after {
    opacity: 1;
}

.emblem-circle img {
    transform: scale(1.22);
    transition: transform 0.4s ease;
}

.committee-emblem-card:hover .emblem-circle img {
    transform: scale(1.3);
}

.emblem-label {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.4rem, 1.5vw, 0.85rem);
    font-weight: 700;
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    transition: color 0.3s ease;
}

.committee-emblem-card:hover .emblem-label {
    color: var(--gold-light);
    text-shadow: 0 0 0.5rem var(--gold-glow);
}

/* ===== RESPONSIVENESS ===== */
@media (max-width: 68.75em) {
    .content-split-layout {
        padding: 0 1rem;
        gap: 1rem;
    }
    :root {
        --logo-size: min(32rem, 58vh);
    }
    .text-column {
        min-width: 11.25rem;
    }
}

@media (max-width: 53.125em) {
    html, body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        background-color: #0b0d10 !important;
    }
    
    .content-split-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        justify-items: center;
        text-align: center;
    }
    
    .text-column {
        align-items: center;
        text-align: center;
        transform: none;
        order: 1;
    }
    
    .logo-column {
        transform: none;
        order: 2;
    }
    
    .timer-wrapper {
        transform: none;
        justify-content: center !important;
        order: 4;
    }

    .section-divider-container {
        display: flex;
        order: 3;
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 auto 1rem auto;
        transform: none;
    }

    .theme-title {
        font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
        text-align: center !important;
        display: block !important;
        line-height: 1.0 !important;
    }
    
    .theme-subtitle {
        font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
        text-align: center !important;
        display: block !important;
        margin-top: 0.6rem !important;
    }
}

@media (max-width: 53.125em) {
    :root {
        --logo-size: min(32.5rem, 80vw, 55vh);
    }
    
    .main-content-layout {
        padding-top: 6.25rem;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .committees-grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: 1.5rem;
        max-width: 28.125rem;
    }
}

@media (max-width: 30em) {
    :root {
        --logo-size: min(22rem, 85vw, 45vh);
    }

    .timer-column {
        width: 100%;
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
    }

    .countdown-container {
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        justify-content: center;
    }

    .countdown-box {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0.8rem 0.3rem !important;
        border-radius: 0.5rem;
    }

    .countdown-num {
        font-size: 1.6rem !important;
    }

    .countdown-label {
        font-size: 0.625rem !important;
        letter-spacing: 0.05em !important;
        margin-top: 0.2rem !important;
    }

    .committees-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
        max-width: 95vw;
    }

    .emblem-circle {
        width: 8.25rem !important;
        height: 8.25rem !important;
    }

    .emblem-label {
        font-size: 0.9rem !important;
    }

    .committee-emblem-card {
        width: auto !important;
    }

    .committee-emblem-card:last-child {
        grid-column: span 2;
        justify-self: center;
    }
}

/* ===== INTRO LOADER SHAPE TRANSITION ===== */
.loader-active .main-content-layout {
    clip-path: circle(var(--logo-r, 0px) at var(--logo-x, 49.2vw) var(--logo-y, 55vh));
    transition: clip-path 1.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.loader-active.reveal-content .main-content-layout {
    clip-path: circle(150% at var(--logo-x, 49.2vw) var(--logo-y, 55vh));
}



.intro-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0b0d10;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 1s ease;
}

.intro-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.intro-loader-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.intro-loader-logo {
    position: absolute;
    width: min(14.375rem, 40vw);
    height: auto;
    filter: drop-shadow(0 0 1.875rem rgba(212, 175, 55, 0.3));
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.8s ease;
    transform: translate(0, 0) scale(1);
}

/* Pulsing state */
.intro-loader:not(.logo-moving) .intro-loader-logo {
    animation: loaderLogoPulse 2s infinite ease-in-out;
}

.intro-loader.fade-out .intro-loader-logo {
    opacity: 0;
}

.intro-loader-text {
    position: absolute;
    bottom: 12vh;
    font-family: 'Freshman', sans-serif;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    color: var(--gold-primary);
    -webkit-text-fill-color: var(--gold-primary);
    letter-spacing: 0.25rem;
    filter: drop-shadow(0 0.125rem 0.25rem rgba(0,0,0,0.9));
    transition: opacity 0.6s ease;
    opacity: 1;
}

.intro-loader.logo-moving .intro-loader-text {
    opacity: 0;
}

@keyframes loaderLogoPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 1.875rem rgba(212, 175, 55, 0.3));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 3.125rem rgba(212, 175, 55, 0.6));
    }
}