/* ============================================================
   tsundere.today — Bauhaus Geometry × Honeyed-Neutral Palette
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    background: #F5EDD6;
    color: #3D2B0F;
    font-family: 'Spectral', Georgia, serif;
    overflow-x: hidden;
}

/* --- Fixed Vertical Spine (The Bauhaus Backbone) --- */
.spine {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 12px;
    background: #1A1209;
    z-index: 100;
}

/* --- Main Content (offset from spine) --- */
main {
    margin-left: 36px;
}

/* --- Shared Rib Styles --- */
.rib {
    position: relative;
    overflow: hidden;
}

/* --- Noise Texture Overlay (vintage washi paper) --- */
.noise-texture {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cline x1='0' y1='4' x2='4' y2='0' stroke='%239B6B2A' stroke-width='0.3' opacity='0.35'/%3E%3Cline x1='-1' y1='3' x2='3' y2='-1' stroke='%239B6B2A' stroke-width='0.3' opacity='0.35'/%3E%3Cline x1='1' y1='5' x2='5' y2='1' stroke='%239B6B2A' stroke-width='0.3' opacity='0.35'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0.08;
}

/* --- Gradient Mesh Base --- */
.gradient-mesh {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* --- Rib 1: Hero --- */
.rib-1 {
    height: 100vh;
    min-height: 600px;
    background: #F5EDD6;
    display: flex;
    align-items: flex-end;
    padding-bottom: 80px;
}

.hero-mesh {
    background:
        radial-gradient(ellipse 60% 50% at 20% 40%, rgba(200, 148, 74, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 80% 70% at 80% 80%, rgba(245, 237, 214, 0.80) 0%, transparent 60%),
        radial-gradient(ellipse 40% 40% at 5% 10%, rgba(250, 246, 238, 0.95) 0%, transparent 60%),
        radial-gradient(ellipse 90% 60% at 50% 60%, rgba(232, 201, 138, 0.20) 0%, transparent 80%);
    will-change: transform;
}

.rib-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 0 60px 0 24px;
}

.hero-headline {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 900;
    font-size: clamp(56px, 8vw, 112px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #1A1209;
    max-width: 75vw;
}

.hero-headline br {
    display: block;
}

/* Spine anchor mark (rotated em-dash) */
.spine-anchor {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 64px;
    color: #9B6B2A;
    opacity: 0.6;
    z-index: 3;
    pointer-events: none;
    line-height: 1;
}

/* --- Rib 2: Manifesto --- */
.rib-2 {
    min-height: 80vh;
    background: #FAF6EE;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 0;
}

.rib-2 .rib-content {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.manifesto-left {
    flex: 2;
    padding: 40px 48px 40px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.manifesto-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-left: 1px solid rgba(200, 148, 74, 0.15);
}

.ripple-panel {
    width: 100%;
    max-width: 220px;
    height: auto;
    min-height: 300px;
}

.manifesto-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.8;
    color: #3D2B0F;
    max-width: 600px;
}

/* Section transition rule */
.rib-transition-rule {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: visible;
    margin-top: 40px;
}

.transition-ellipse {
    width: 100%;
    height: 8px;
    display: block;
}

/* --- Rib 3: Gallery Asymmetry --- */
.rib-3 {
    min-height: 120vh;
    background: #F5EDD6;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 60fr 35fr;
    grid-template-rows: 1fr 1fr;
    height: 120vh;
    min-height: 700px;
    gap: 3px;
    background: #3D2B0F;
}

.gallery-panel {
    position: relative;
    overflow: hidden;
    background: #F5EDD6;
}

.panel-large {
    grid-row: 1 / 3;
    cursor: pointer;
}

.dark-mesh {
    background:
        radial-gradient(ellipse 70% 60% at 30% 50%, rgba(42, 31, 10, 0.95) 0%, transparent 70%),
        radial-gradient(ellipse 50% 70% at 80% 80%, rgba(155, 107, 42, 0.60) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 60% 20%, rgba(61, 43, 15, 0.80) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #2A1F0A 0%, #9B6B2A 100%);
}

.panel-phrase {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(32px, 4vw, 48px);
    color: #F5EDD6;
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
}

.panel-phrase em {
    font-style: italic;
    color: #E8C98A;
}

.light-mesh {
    background:
        radial-gradient(ellipse 80% 80% at 50% 50%, #F5EDD6 0%, #E8C98A 60%, #F5EDD6 100%),
        radial-gradient(ellipse 40% 40% at 20% 30%, rgba(200, 148, 74, 0.3) 0%, transparent 70%);
}

.panel-upper-right {
    background: #FAF6EE;
}

.panel-lower-right {
    background: #FAF6EE;
    cursor: pointer;
    transition: background 0.4s ease;
}

.panel-lower-right:hover {
    background: #F5EDD6;
}

.panel-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 3;
}

/* --- Section Label (Space Grotesk utility) --- */
.section-label {
    font-family: 'Space Grotesk', 'Arial', sans-serif;
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #7A5228;
    display: block;
}

/* --- Rib 4: Text Dominant --- */
.rib-4 {
    min-height: 70vh;
    background: #FAF6EE;
    padding: 100px 0;
}

.rib-4 .rib-content {
    padding: 0 60px 0 24px;
}

.text-column {
    width: 55vw;
    min-width: 280px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.pull-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(22px, 2.5vw, 32px);
    color: #9B6B2A;
    border-left: 3px solid #C8944A;
    padding-left: 24px;
    margin: 8px 0;
    line-height: 1.4;
}

.body-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.body-text p {
    font-family: 'Spectral', Georgia, serif;
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.75;
    color: #3D2B0F;
}

/* --- Rib 5: Closing Statement --- */
.rib-5 {
    height: 100vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.closing-mesh {
    background:
        radial-gradient(ellipse 80% 60% at 20% 60%, rgba(26, 18, 9, 0.95) 0%, transparent 60%),
        radial-gradient(ellipse 60% 70% at 80% 30%, rgba(61, 43, 15, 0.80) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #2A1F0A 0%, #1A1209 100%);
}

.closing-content {
    position: relative;
    z-index: 3;
    left: 24px;
    width: calc(50vw - 36px);
    display: flex;
    align-items: center;
}

.closing-line {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 24px;
    color: #E8C98A;
    line-height: 1.5;
}

.domain-label {
    position: absolute;
    bottom: 32px;
    left: 24px;
    z-index: 3;
    font-family: 'Space Grotesk', 'Arial', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #7A5228;
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

/* --- Scroll Reveal Animations --- */
.reveal-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms ease-out, transform 700ms ease-out;
}

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

/* --- Ripple hover animation keyframes --- */
@keyframes ripple-expand {
    0% {
        r: 0;
        opacity: 0.4;
    }
    100% {
        r: 48px;
        opacity: 0;
    }
}

@keyframes ripple-expand-2 {
    0% {
        r: 0;
        opacity: 0.3;
    }
    100% {
        r: 40px;
        opacity: 0;
    }
}

@keyframes ripple-expand-3 {
    0% {
        r: 0;
        opacity: 0.2;
    }
    100% {
        r: 32px;
        opacity: 0;
    }
}

.ripple-circle-1 {
    fill: none;
    stroke: #9B6B2A;
    stroke-width: 1;
    animation: ripple-expand 600ms ease-out forwards;
}

.ripple-circle-2 {
    fill: none;
    stroke: #9B6B2A;
    stroke-width: 1;
    animation: ripple-expand-2 600ms 100ms ease-out forwards;
}

.ripple-circle-3 {
    fill: none;
    stroke: #9B6B2A;
    stroke-width: 1;
    animation: ripple-expand-3 600ms 200ms ease-out forwards;
}

/* ============================================================
   Responsive Adjustments
   ============================================================ */
@media (max-width: 768px) {
    main {
        margin-left: 20px;
    }

    .spine {
        width: 8px;
    }

    .rib-content {
        padding: 0 20px 0 16px;
    }

    .rib-2 .rib-content {
        flex-direction: column;
    }

    .manifesto-right {
        border-left: none;
        border-top: 1px solid rgba(200, 148, 74, 0.15);
        padding: 20px 0;
        max-height: 180px;
    }

    .ripple-panel {
        max-width: 140px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr 1fr;
        height: auto;
        min-height: unset;
    }

    .panel-large {
        grid-row: 1;
        min-height: 300px;
    }

    .text-column {
        width: 90vw;
    }

    .closing-content {
        width: calc(90vw - 20px);
    }

    .hero-headline {
        max-width: 95vw;
    }
}