/* ============================================= */
/* hwakryul.com - Art Deco Probability            */
/* Palette: Honeyed-Neutral                       */
/* ============================================= */

/* --- CSS Custom Properties --- */
:root {
    --bg-parchment: #F8F0E1;
    --surface-linen: #EDE3D0;
    --gold-accent: #C4A265;
    --deep-text: #5A4A2A;
    --body-text: #6B5D45;
    --soft-accent: #D4C4A0;
    --chart-stroke: #A08850;
    --dark-ground: #2A2418;
    --dust-gold: #8B7A5A;

    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Lora', serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --grid-interval: 60px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--body-text);
    background: var(--bg-parchment);
    background: radial-gradient(ellipse at 50% 0%, var(--bg-parchment) 0%, var(--surface-linen) 100%);
    line-height: 1.72;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Fixed Background Grid --- */
#grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to right,
            rgba(196, 162, 101, 0.05) 0px,
            rgba(196, 162, 101, 0.05) 1px,
            transparent 1px,
            transparent var(--grid-interval)
        ),
        repeating-linear-gradient(
            to bottom,
            rgba(196, 162, 101, 0.05) 0px,
            rgba(196, 162, 101, 0.05) 1px,
            transparent 1px,
            transparent var(--grid-interval)
        );
}

/* --- Zones --- */
.zone {
    position: relative;
    z-index: 1;
}

/* ============================================= */
/* ZONE 1: Title Cartouche                       */
/* ============================================= */
#title-cartouche {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.cartouche-card {
    position: relative;
    max-width: 720px;
    width: 100%;
    padding: 80px 60px;
    text-align: center;
    backdrop-filter: blur(12px);
    background: rgba(248, 240, 225, 0.72);
    border: 1px solid rgba(196, 162, 101, 0.3);
    border-radius: 4px;
    opacity: 0;
    transform: translateY(20px);
}

.cartouche-card.animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Deco borders */
.deco-border-top,
.deco-border-bottom {
    position: absolute;
    left: 16px;
    right: 16px;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--gold-accent) 0px,
        var(--gold-accent) 12px,
        transparent 12px,
        transparent 18px
    );
}

.deco-border-top { top: 16px; }
.deco-border-bottom { bottom: 16px; }

/* Corner fans */
.corner-fan {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 0.4;
}
.corner-fan.top-left { top: 20px; left: 20px; }
.corner-fan.top-right { top: 20px; right: 20px; }
.corner-fan.bottom-left { bottom: 20px; left: 20px; }
.corner-fan.bottom-right { bottom: 20px; right: 20px; }

.corner-fan svg {
    width: 100%;
    height: 100%;
}

/* Title fan ornament */
.cartouche-fan {
    margin: 0 auto 24px;
    max-width: 300px;
}

.cartouche-fan svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Fan line animation */
.fan-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.cartouche-card.animated .fan-line {
    animation: drawFanLine 1200ms ease-out forwards;
}

@keyframes drawFanLine {
    to { stroke-dashoffset: 0; }
}

/* Title text */
.site-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--deep-text);
    font-feature-settings: "liga" 0;
    margin-bottom: 20px;
}

.site-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--body-text);
    line-height: 1.72;
    opacity: 0;
    transform: translateY(12px);
}

.cartouche-card.animated .site-subtitle {
    animation: fadeUpSubtitle 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms forwards;
}

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

/* ============================================= */
/* Chevron Dividers                              */
/* ============================================= */
.chevron-divider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 8px,
        var(--gold-accent) 8px,
        var(--gold-accent) 9px,
        transparent 9px,
        transparent 16px
    );
    mask-image: repeating-conic-gradient(
        from 135deg at 50% 0%,
        #000 0deg 90deg,
        transparent 90deg 360deg
    );
    -webkit-mask-image: repeating-conic-gradient(
        from 135deg at 50% 0%,
        #000 0deg 90deg,
        transparent 90deg 360deg
    );
}

/* Fallback chevron using SVG background */
.chevron-divider {
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpolyline points='0,12 12,0 24,12' fill='none' stroke='%23C4A265' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 24px 12px;
    margin: 0;
}

/* ============================================= */
/* Card Grid System                              */
/* ============================================= */
.card-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
    display: grid;
    gap: 2px;
}

.card-grid.foundation {
    grid-template-columns: repeat(12, 1fr);
}

.card-grid.distributions {
    grid-template-columns: repeat(3, 1fr);
}

.card-grid.theorems {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================= */
/* Cards                                         */
/* ============================================= */
.card {
    backdrop-filter: blur(12px);
    background: rgba(248, 240, 225, 0.72);
    border: 1px solid rgba(196, 162, 101, 0.3);
    border-radius: 4px;
    padding: 32px 28px;
    position: relative;
}

/* Foundation grid card sizes */
.card-wide {
    grid-column: span 6;
}

.card-medium {
    grid-column: span 4;
}

.card-tall {
    grid-row: span 2;
}

/* Fan ornaments in cards */
.card-fan {
    margin-bottom: 16px;
    max-width: 240px;
}

.card-fan svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Card titles */
.card-title {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--deep-text);
    font-feature-settings: "liga" 0;
    margin-bottom: 14px;
}

.card-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: var(--body-text);
}

.card-body em {
    color: var(--deep-text);
}

/* ============================================= */
/* Math Notation & Pulse                         */
/* ============================================= */
.math-notation {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: 0.04em;
    color: var(--dust-gold);
    background: rgba(196, 162, 101, 0.1);
    padding: 0.1em 0.3em;
    border-radius: 2px;
    display: inline-block;
}

.pulse {
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1.0);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.03);
        opacity: 1.0;
    }
}

/* ============================================= */
/* Reveal Animations                             */
/* ============================================= */
.reveal-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease, transform 500ms ease;
}

.reveal-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================= */
/* ZONE 3: Distribution Cards                    */
/* ============================================= */
.card-dist {
    text-align: center;
    padding: 24px 20px;
}

.dist-chart {
    margin-bottom: 16px;
}

.dist-chart svg {
    width: 100%;
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.dist-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--deep-text);
    font-feature-settings: "liga" 0;
    margin-bottom: 10px;
}

.dist-metaphor {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    font-style: italic;
    line-height: 1.6;
    color: var(--body-text);
}

/* ============================================= */
/* ZONE 4: Theorem Cards                         */
/* ============================================= */
.card-theorem {
    background: rgba(196, 162, 101, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 162, 101, 0.3);
    border-radius: 4px;
    padding: 0 28px 32px;
}

.theorem-header-bar {
    margin: 0 -28px;
    overflow: hidden;
}

.theorem-header-bar svg {
    display: block;
}

.theorem-fan {
    margin: 20px 0 16px;
    max-width: 200px;
}

.theorem-fan svg {
    width: 100%;
    height: auto;
    display: block;
}

.theorem-curve {
    margin-top: 20px;
}

.theorem-curve svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================================= */
/* ZONE 5: Closing Epigraph                      */
/* ============================================= */
#closing-epigraph {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
}

.epigraph-card {
    max-width: 860px;
    width: 100%;
    text-align: center;
    backdrop-filter: blur(12px);
    background: rgba(248, 240, 225, 0.72);
    border: 1px solid rgba(196, 162, 101, 0.3);
    border-radius: 4px;
    padding: 60px 48px;
}

.epigraph-fan {
    margin: 0 auto 32px;
    max-width: 300px;
}

.epigraph-fan svg {
    width: 100%;
    height: auto;
    display: block;
}

.epigraph-text {
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-style: italic;
    line-height: 1.72;
    color: var(--body-text);
    margin-bottom: 40px;
}

.epigraph-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-domain {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--deep-text);
    font-feature-settings: "liga" 0;
}

.footer-hangul {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    color: var(--soft-accent);
    font-weight: 400;
}

/* ============================================= */
/* Responsive: Tablet (< 768px)                  */
/* ============================================= */
@media (max-width: 768px) {
    :root {
        --grid-interval: 40px;
    }

    .card-grid.foundation {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-wide {
        grid-column: span 2;
    }

    .card-medium {
        grid-column: span 1;
    }

    .card-tall {
        grid-row: span 1;
    }

    .card-grid.distributions {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid.theorems {
        grid-template-columns: 1fr;
    }

    .cartouche-card {
        padding: 60px 36px;
    }

    .corner-fan {
        width: 36px;
        height: 36px;
    }

    .epigraph-card {
        padding: 40px 28px;
    }
}

/* ============================================= */
/* Responsive: Mobile (< 480px)                  */
/* ============================================= */
@media (max-width: 480px) {
    .card-grid.foundation {
        grid-template-columns: 1fr;
    }

    .card-wide,
    .card-medium {
        grid-column: span 1;
    }

    .card-grid.distributions {
        grid-template-columns: 1fr;
    }

    .cartouche-card {
        padding: 50px 24px;
    }

    .corner-fan {
        width: 28px;
        height: 28px;
    }
}