/* ============================================================
   yami.bar — McBling × Watercolor
   Colors: #E8C97A, #E8E8E8, #3D2B1F, #F5E6C8, #1C1007,
           #8B4A2E, #D4524A, #9B9B9B
   Fonts: EB Garamond, Playfair Display, Space Mono, Inter
   ============================================================ */

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

:root {
    --gold: #E8C97A;
    --chrome-light: #E8E8E8;
    --deep-brown: #3D2B1F;
    --ivory: #F5E6C8;
    --near-black: #1C1007;
    --terracotta: #8B4A2E;
    --crimson: #D4524A;
    --silver: #9B9B9B;
    --chrome-mid: #C0C0C0;
    --taupe: #7A6B5A;
    --mid-gray: #888888;

    --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    --hex-size-hero: 400px;
    --hex-size-flank: 280px;
    --hex-size-medium: 280px;
    --hex-size-tiny: 80px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--near-black);
    font-family: 'Inter', sans-serif;
    color: var(--ivory);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Hide the SVG filter container */
#svg-filters {
    display: none;
}

/* --- Hex Cell Base ----------------------------------------- */
.hex-cell {
    position: relative;
    clip-path: var(--hex-clip);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Chrome ring — pseudo-element overlay with shimmer gradient */
.hex-chrome-ring {
    position: absolute;
    inset: 0;
    clip-path: var(--hex-clip);
    background: transparent;
    z-index: 2;
    pointer-events: none;
}

.hex-chrome-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    clip-path: var(--hex-clip);
    background: linear-gradient(
        135deg,
        #C0C0C0 0%,
        #E8E8E8 25%,
        #9B9B9B 50%,
        #E8E8E8 75%,
        #C0C0C0 100%
    );
    background-size: 300% 300%;
    animation: chrome-shimmer 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes chrome-shimmer {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

/* Inner inset to show chrome as border */
.hex-chrome-ring::after {
    content: '';
    position: absolute;
    inset: 3px;
    clip-path: var(--hex-clip);
    background: var(--near-black);
    z-index: 0;
}

/* --- Watercolor Backgrounds -------------------------------- */
.hex-watercolor-bg {
    position: absolute;
    inset: 3px;
    clip-path: var(--hex-clip);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
}

/* Watercolor wash variants */
.wc-amber {
    background: radial-gradient(ellipse at 60% 40%, #C97B3A 0%, #E8C97A 40%, #8B4A2E 80%, #3D2B1F 100%);
    filter: url(#watercolor-a);
}

.wc-amber-light {
    background: radial-gradient(ellipse at 40% 60%, #E8C97A 0%, #F5E6C8 45%, #C97B3A 80%, #8B4A2E 100%);
    filter: url(#watercolor-b);
}

.wc-terracotta {
    background: radial-gradient(ellipse at 50% 50%, #8B4A2E 0%, #C97B3A 35%, #3D2B1F 70%, #1C1007 100%);
    filter: url(#watercolor-c);
}

.wc-terracotta-amber {
    background: radial-gradient(ellipse at 45% 55%, #8B4A2E 0%, #C97B3A 30%, #E8C97A 55%, #3D2B1F 85%, #1C1007 100%);
    filter: url(#watercolor-a);
}

.wc-deep {
    background: radial-gradient(ellipse at 55% 45%, #3D2B1F 0%, #8B4A2E 40%, #1C1007 75%, #1C1007 100%);
    filter: url(#watercolor-b);
}

.wc-ivory {
    background: radial-gradient(ellipse at 50% 40%, #F5E6C8 0%, #E8C97A 40%, #C97B3A 70%, #8B4A2E 100%);
    filter: url(#watercolor-c);
}

/* Watercolor revealed on page load or entry */
.hex-cell.wc-revealed .hex-watercolor-bg {
    opacity: 1;
}

/* --- Hex Content ------------------------------------------- */
.hex-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    width: 100%;
    height: 100%;
    gap: 8px;
}

/* --- Typography -------------------------------------------- */
.hero-title {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 64px;
    letter-spacing: -0.03em;
    line-height: 1;
    /* Gold-chrome metallic gradient */
    background: linear-gradient(
        160deg,
        #E8C97A 0%,
        #C0C0C0 30%,
        #E8C97A 55%,
        #E8E8E8 70%,
        #C97B3A 90%,
        #E8C97A 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gold-chrome-shift 4s ease-in-out infinite;
}

@keyframes gold-chrome-shift {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.hero-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--silver);
    text-transform: uppercase;
    margin-top: 8px;
}

.label-space-mono {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--silver);
    text-transform: uppercase;
}

.cell-text {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.45;
    color: var(--ivory);
    text-shadow: 0 1px 4px rgba(28, 16, 7, 0.6);
    max-width: 200px;
}

.garamond-italic {
    font-family: 'EB Garamond', serif;
    font-style: italic;
}

/* --- Underline Draw Animation ------------------------------ */
.hex-underline-draw {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 10px;
    z-index: 4;
    overflow: visible;
}

.hero-underline {
    width: 70%;
    height: 12px;
    bottom: 16%;
}

.draw-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.4s ease-out;
}

.hex-cell.line-drawn .draw-line {
    stroke-dashoffset: 0;
}

/* --- Rhinestone Clusters ----------------------------------- */
.rhinestone-cluster {
    width: 60px;
    height: 60px;
}

.rhinestone-cluster.rh-center {
    width: 75px;
    height: 75px;
}

.rhinestone-cluster.rh-small {
    width: 45px;
    height: 45px;
}

/* --- Sharp Angle Accents ----------------------------------- */
.sharp-angle-accent {
    width: 60px;
    height: 60px;
    position: relative;
    background: transparent;
}

.sharp-angle-accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-bottom: 60px solid rgba(232, 201, 122, 0.5);
    filter: drop-shadow(0 0 4px rgba(232, 201, 122, 0.7));
}

.sharp-angle-accent::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 0; height: 0;
    border-right: 40px solid transparent;
    border-top: 40px solid rgba(192, 192, 192, 0.35);
    filter: drop-shadow(0 0 3px rgba(192, 192, 192, 0.6));
}

.sharp-angle-accent.sa-variant::before {
    border-left: 50px solid transparent;
    border-bottom: 50px solid rgba(139, 74, 46, 0.55);
}

.sharp-angle-accent.sa-variant::after {
    border-right: 35px solid transparent;
    border-top: 35px solid rgba(232, 201, 122, 0.4);
}

/* --- Act I: Hero ------------------------------------------- */
.act-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px 20px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, #3D2B1F 0%, #1C1007 60%, #1C1007 100%);
}

.hero-cluster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    z-index: 2;
}

/* Hero center hex */
.hex-hero-center {
    width: var(--hex-size-hero);
    height: calc(var(--hex-size-hero) * 1.1547);
    z-index: 2;
}

/* Hero flanking hexes */
.hex-hero-flank {
    width: var(--hex-size-flank);
    height: calc(var(--hex-size-flank) * 1.1547);
    margin-left: calc(var(--hex-size-flank) * -0.25);
    margin-right: calc(var(--hex-size-flank) * -0.25);
    z-index: 1;
}

/* Hero entry animation */
.hex-hero-center,
.hex-hero-flank {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hex-hero-center.hero-entered {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0s;
}

.hex-hero-flank.hero-entered {
    opacity: 1;
    transform: scale(1);
}

.hex-left.hero-entered {
    transition-delay: 0.15s;
}

.hex-right.hero-entered {
    transition-delay: 0.3s;
}

/* Chrome border stroke animation for hero cells */
.hex-hero-center .hex-chrome-ring::before,
.hex-hero-flank .hex-chrome-ring::before {
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}

.hex-hero-center.hero-entered .hex-chrome-ring::before,
.hex-hero-flank.hero-entered .hex-chrome-ring::before {
    opacity: 1;
}

/* Hero content */
.hex-content-hero {
    gap: 10px;
}

/* Sharp angle hero accent */
.sharp-angle-hero {
    position: absolute;
    bottom: 10%;
    right: 8%;
    width: 0; height: 0;
    border-right: 80px solid transparent;
    border-bottom: 120px solid rgba(232, 201, 122, 0.12);
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(232, 201, 122, 0.2));
}

.sharp-angle-hero::before {
    content: '';
    position: absolute;
    top: 20px; left: -120px;
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-top: 80px solid rgba(192, 192, 192, 0.08);
    filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.15));
}

/* Taupe and mid-gray accents for field cells */
.wc-taupe-accent {
    color: #7A6B5A;
}

.wc-gray-accent {
    color: #888888;
}

/* --- Act II: The Field ------------------------------------- */
.act-field {
    background: var(--near-black);
    padding: 60px 0 40px;
    position: relative;
}

.honeycomb-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Hex rows */
.hex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
}

/* Medium hex cells in field */
.hex-medium {
    width: var(--hex-size-medium);
    height: calc(var(--hex-size-medium) * 1.1547);
    margin-left: calc(var(--hex-size-medium) * -0.12);
    margin-right: calc(var(--hex-size-medium) * -0.12);
}

/* Odd rows offset for honeycomb tessellation */
.hex-row-odd {
    margin-top: calc(var(--hex-size-medium) * -0.28);
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.hex-row-even {
    margin-top: calc(var(--hex-size-medium) * -0.28);
    position: relative;
    z-index: 0;
}

.hex-row-even:first-child {
    margin-top: 0;
}

/* Cell reveal animation */
.reveal-cell {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

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

/* Dissolve row cells */
.dissolve-cell {
    opacity: 0;
    transform: translateY(40px);
}

.dissolve-row.dissolve-active .dissolve-cell {
    transform: translateY(0);
}

/* Fade out effect for dissolution */
.dissolve-row.fully-dissolved .dissolve-cell {
    opacity: 0.3;
}

/* --- Act III: Footer --------------------------------------- */
.act-footer {
    background: var(--near-black);
    padding: 20px 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(192, 192, 192, 0.1);
}

.footer-hex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: -4px;
}

.hex-tiny {
    width: var(--hex-size-tiny);
    height: calc(var(--hex-size-tiny) * 1.1547);
    margin-left: -8px;
    margin-right: -8px;
}

.footer-cell {
    transition: opacity 0.3s ease;
}

.footer-dark {
    background: linear-gradient(135deg, #1C1007 0%, #3D2B1F 100%);
}

.footer-dark .hex-watercolor-bg {
    display: none;
}

.footer-ivory {
    background: linear-gradient(135deg, #F5E6C8 0%, #E8C97A 100%);
}

.footer-ivory .hex-watercolor-bg {
    display: none;
}

/* Override clip for footer cells to show backgrounds */
.footer-dark::before,
.footer-dark::after,
.footer-ivory::before,
.footer-ivory::after {
    display: none;
}

/* Footer cells need special styling since they're solid colored */
.hex-tiny.footer-dark {
    background: #1C1007;
    clip-path: var(--hex-clip);
}

.hex-tiny.footer-ivory {
    background: #F5E6C8;
    clip-path: var(--hex-clip);
}

.hex-tiny .hex-chrome-ring,
.hex-tiny .hex-watercolor-bg {
    display: none;
}

.footer-word {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: lowercase;
    text-align: center;
    line-height: 1;
}

.footer-dark .footer-word {
    color: var(--silver);
}

.footer-ivory .footer-word {
    color: var(--near-black);
}

/* --- Stagger delays for cell reveal ----------------------- */
.hex-row .reveal-cell:nth-child(1) { transition-delay: 0ms; }
.hex-row .reveal-cell:nth-child(2) { transition-delay: 80ms; }
.hex-row .reveal-cell:nth-child(3) { transition-delay: 160ms; }
.hex-row .reveal-cell:nth-child(4) { transition-delay: 240ms; }
.hex-row .reveal-cell:nth-child(5) { transition-delay: 320ms; }
.hex-row .reveal-cell:nth-child(6) { transition-delay: 400ms; }

/* --- Responsive ------------------------------------------- */
@media (max-width: 900px) {
    :root {
        --hex-size-hero: 280px;
        --hex-size-flank: 200px;
        --hex-size-medium: 200px;
    }

    .hero-title {
        font-size: 44px;
    }

    .hex-row {
        flex-wrap: nowrap;
    }

    .honeycomb-grid {
        overflow-x: auto;
        width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    :root {
        --hex-size-hero: 220px;
        --hex-size-flank: 160px;
        --hex-size-medium: 160px;
    }

    .hero-title {
        font-size: 32px;
    }

    .cell-text {
        font-size: 13px;
    }

    .hero-cluster {
        flex-wrap: nowrap;
    }

    .footer-hex-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .hex-tiny {
        margin: 2px;
    }
}