/* tsundere.monster — Victorian Ornate / Gold-Black Luxury */

/* ================================================
   CSS Custom Properties
================================================ */
:root {
    --onyx: #0D0D0D;
    --charcoal: #111111;
    --deep-dark: #1A1A1A;
    --cabinet-dark: #2A1F0A;
    --old-gold: #B8972A;
    --antique-gold: #8C7020;
    --pale-gilt: #D4B966;
    --tarnished-bronze: #6B5A2F;
    --ivory: #F5EED6;
    --gold-muted: #FFD700;

    --sidebar-width: 280px;
    --content-max: 680px;
    --transition-base: 200ms ease;
    --transition-slow: 600ms ease;
    --transition-load: 1200ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--charcoal);
    color: var(--ivory);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    line-height: 1.85;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ================================================
   Noise Texture Overlay
================================================ */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
}

/* ================================================
   Sidebar
================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--onyx);
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tarnished-bronze);
    opacity: 0;
    animation: sidebarFadeIn var(--transition-load) ease forwards;
    animation-delay: 200ms;
}

@keyframes sidebarFadeIn {
    to { opacity: 1; }
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 40px 0;
    position: relative;
}

/* Vertical wordmark */
.sidebar-wordmark-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sidebar-wordmark {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--pale-gilt);
    text-transform: lowercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    user-select: none;
}

/* Animated pulse rule */
.sidebar-pulse-rule {
    width: 1px;
    height: 40px;
    background-color: var(--old-gold);
    margin: 16px 0;
    animation: pulseSidebar 3s infinite alternate ease-in-out;
}

@keyframes pulseSidebar {
    from {
        box-shadow: 0 0 4px var(--antique-gold);
    }
    to {
        box-shadow: 0 0 12px var(--pale-gilt);
    }
}

/* Navigation */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    position: relative;
    padding: 2px 0;
}

.nav-link-text {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--tarnished-bronze);
    text-transform: uppercase;
    transition: color var(--transition-base);
    writing-mode: horizontal-tb;
}

.nav-link-line {
    display: block;
    height: 1px;
    width: 100%;
    background-color: var(--pale-gilt);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    margin-top: 3px;
}

.nav-link:hover .nav-link-text {
    color: var(--pale-gilt);
}

.nav-link:hover .nav-link-line {
    transform: scaleX(1);
}

/* Date display */
.sidebar-date {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--tarnished-bronze);
    text-align: center;
    padding-top: 20px;
    opacity: 0.7;
}

/* ================================================
   Main Content
================================================ */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

/* ================================================
   Section Drawers
================================================ */
.drawer {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0;
    overflow: hidden;
}

.drawer-content {
    width: var(--content-max);
    max-width: calc(100vw - var(--sidebar-width) - 80px);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.section-hairline {
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 1px;
    background-color: var(--tarnished-bronze);
    opacity: 0.4;
}

/* Section labels */
.section-label {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--tarnished-bronze);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

/* Filigree SVG */
.filigree-svg {
    width: 160px;
    height: 20px;
    display: block;
    margin-bottom: 24px;
    opacity: 0.7;
}

.section-filigree {
    margin-bottom: 32px;
}

/* ================================================
   Content Reveal (IntersectionObserver at 15% threshold.)
================================================ */
.content-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms ease, transform 800ms ease;
}

.content-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================
   Botanical Silhouettes
================================================ */
.drawer-botanical {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.06;
    width: 120px;
    height: 160px;
    pointer-events: none;
    z-index: 1;
}

.botanical-rose {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none'%3E%3Cpath d='M60 150 Q45 130 40 110 Q30 90 35 72 Q40 55 55 52 Q60 50 65 52 Q80 55 85 72 Q90 90 80 110 Q75 130 60 150Z' stroke='%23D4B966' stroke-width='1' fill='none'/%3E%3Cpath d='M60 52 Q55 40 48 32 Q40 22 42 12 Q44 4 52 2 Q58 0 65 3 Q72 7 72 15 Q72 25 65 32 Q59 40 60 52Z' stroke='%23D4B966' stroke-width='1' fill='none'/%3E%3Cpath d='M40 100 Q20 92 15 78 Q10 64 20 57 Q30 50 44 62 Q50 70 40 100Z' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M80 100 Q100 92 105 78 Q110 64 100 57 Q90 50 76 62 Q70 70 80 100Z' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.botanical-hydrangea {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none'%3E%3Ccircle cx='60' cy='80' r='45' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Ccircle cx='60' cy='80' r='30' stroke='%23D4B966' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='45' cy='65' r='8' stroke='%23D4B966' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='75' cy='65' r='8' stroke='%23D4B966' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='60' cy='95' r='8' stroke='%23D4B966' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='38' cy='88' r='6' stroke='%23D4B966' stroke-width='0.5' fill='none'/%3E%3Ccircle cx='82' cy='88' r='6' stroke='%23D4B966' stroke-width='0.5' fill='none'/%3E%3Cpath d='M60 130 L60 155' stroke='%23D4B966' stroke-width='1' fill='none'/%3E%3Cpath d='M60 142 Q45 135 38 125' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M60 142 Q75 135 82 125' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.botanical-fern {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none'%3E%3Cpath d='M60 155 Q60 80 60 10' stroke='%23D4B966' stroke-width='1' fill='none'/%3E%3Cpath d='M60 130 Q40 115 25 105' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M60 110 Q80 95 95 85' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M60 90 Q40 75 28 65' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M60 70 Q80 55 92 45' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M60 50 Q45 38 35 28' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3Cpath d='M60 35 Q72 25 80 15' stroke='%23D4B966' stroke-width='0.75' fill='none'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* ================================================
   Section 1: Vitrine / Wordmark
================================================ */
.vitrine-lockup {
    text-align: left;
}

.vitrine-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--pale-gilt);
    margin-bottom: 24px;
}

.vitrine-dot {
    color: var(--old-gold);
    opacity: 0.7;
}

.vitrine-filigree {
    margin-bottom: 28px;
}

.vitrine-filigree .filigree-svg {
    width: 240px;
    height: 20px;
}

.vitrine-tagline {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.85;
    color: var(--ivory);
    opacity: 0.75;
    max-width: 400px;
}

/* ================================================
   Section 2: Character Text
================================================ */
.character-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.character-text p {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--ivory);
    opacity: 0.85;
}

/* ================================================
   Section 3: Artifact Card Grid
================================================ */
.artifact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 8px;
}

/* Card flip containers */
.card-container {
    perspective: 1200px;
    height: 280px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition-slow) ease;
}

.card-container:hover .card-inner,
.card-container.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 1px solid var(--tarnished-bronze);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Front face: near-black */
.card-front {
    background-color: var(--onyx);
    padding: 32px;
}

.card-ornament {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 120px;
    font-weight: 600;
    color: var(--old-gold);
    opacity: 0.15;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    pointer-events: none;
}

.card-label {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--tarnished-bronze);
    text-transform: uppercase;
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
}

/* Back face: warm amber cabinet dark */
.card-back {
    background-color: var(--cabinet-dark);
    transform: rotateY(180deg);
    padding: 28px 24px;
    justify-content: flex-start;
    position: relative;
}

/* Organic blob shape on back */
.blob-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.08;
}

.card-container[data-card="1"] .blob-shape {
    background: var(--pale-gilt);
    clip-path: polygon(25% 5%, 60% 0%, 88% 15%, 95% 42%, 85% 72%, 65% 90%, 35% 95%, 10% 80%, 5% 50%, 12% 22%);
}

.card-container[data-card="2"] .blob-shape {
    background: var(--pale-gilt);
    clip-path: polygon(30% 2%, 65% 8%, 90% 28%, 92% 58%, 75% 82%, 50% 95%, 20% 88%, 5% 65%, 8% 35%, 18% 12%);
}

.card-container[data-card="3"] .blob-shape {
    background: var(--pale-gilt);
    clip-path: polygon(15% 8%, 55% 0%, 85% 12%, 98% 40%, 90% 68%, 70% 88%, 38% 98%, 12% 82%, 2% 55%, 5% 25%);
}

.card-container[data-card="4"] .blob-shape {
    background: var(--pale-gilt);
    clip-path: polygon(20% 3%, 58% 0%, 85% 18%, 96% 45%, 88% 75%, 60% 92%, 28% 95%, 8% 75%, 4% 42%, 14% 16%);
}

.card-back-filigree {
    width: 80px;
    height: 8px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.card-back-filigree svg {
    width: 80px;
    height: 8px;
}

.card-back-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ivory);
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* ================================================
   Section 4: Poem
================================================ */
.poem-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.poem-line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: var(--ivory);
    opacity: 0.9;
}

/* Staggered right-to-left offset */
.poem-line-0 { padding-left: 0; }
.poem-line-1 { padding-left: 40px; }
.poem-line-2 { padding-left: 20px; }
.poem-line-3 { padding-left: 80px; }
.poem-line-4 { padding-left: 120px; }
.poem-line-5 { padding-left: 60px; margin-top: 24px; }
.poem-line-6 { padding-left: 100px; }
.poem-line-7 { padding-left: 140px; }
.poem-line-8 { padding-left: 20px; margin-top: 16px; }

/* ================================================
   Section 5: Silence
================================================ */
.drawer-silence {
    min-height: 60vh;
    justify-content: center;
    align-items: center;
}

.silence-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.silence-botanical {
    opacity: 0.06;
}

.pressed-flower {
    width: 200px;
    height: 240px;
    display: block;
}

.silence-date {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 10px;
    letter-spacing: 0.25em;
    color: var(--tarnished-bronze);
    text-align: center;
    opacity: 0.5;
}

/* ================================================
   Responsive (mobile touch flip toggle)
================================================ */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 60px;
    }

    .sidebar-wordmark-wrap {
        display: none;
    }

    .sidebar-nav {
        gap: 12px;
    }

    .nav-link-text {
        font-size: 7px;
        letter-spacing: 0.1em;
    }

    .drawer-content {
        max-width: calc(100vw - var(--sidebar-width) - 40px);
        padding: 0 20px;
    }

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

    .vitrine-title {
        font-size: clamp(36px, 10vw, 64px);
    }

    .drawer-botanical {
        display: none;
    }

    .poem-line-3 { padding-left: 40px; }
    .poem-line-4 { padding-left: 60px; }
    .poem-line-7 { padding-left: 80px; }
    .poem-line-8 { padding-left: 10px; }
}