/* ============================================================
   lrx.st — Wabi-Sabi Gallery Experience
   ============================================================ */

:root {
    /* Color Palette from DESIGN.md */
    --bg-base: #F5F0E8;
    --bg-accent: #EDE5D8;
    --text-primary: #3E1C12;
    --text-secondary: #5A3D2E;
    --text-tertiary: #8B7260;
    --burgundy: #6B1D2A;
    --burgundy-hover: #8A2438;
    --warm-highlight: #C4956A;
    --crack-line: #D4C4B0;
    --shadow-tone: rgba(62, 28, 18, 0.06);

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-caption: 'Karla', -apple-system, Helvetica Neue, sans-serif;

    /* Shadow Levels */
    --shadow-0: none;
    --shadow-1: 0 1px 8px rgba(62, 28, 18, 0.04);
    --shadow-2: 0 4px 20px rgba(62, 28, 18, 0.07);
    --shadow-3: 0 8px 32px rgba(62, 28, 18, 0.10);

    /* Animation */
    --ease-wabi: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Linen Texture Overlay
   ============================================================ */
.linen-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(139, 114, 96, 0.03) 0px,
            rgba(139, 114, 96, 0.03) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(139, 114, 96, 0.02) 0px,
            rgba(139, 114, 96, 0.02) 1px,
            transparent 1px,
            transparent 4px
        );
}

/* ============================================================
   Gallery Space
   ============================================================ */
.gallery-space {
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* ============================================================
   Opening Tableau (Threshold Entrance)
   ============================================================ */
.threshold {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.threshold-entrance {
    min-height: 100vh;
    padding: 4rem 2rem;
}

.domain-mark {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s var(--ease-wabi), transform 1.2s var(--ease-wabi);
    position: relative;
    z-index: 2;
}

.threshold.revealed .domain-mark {
    opacity: 1;
    transform: translateY(0);
}

.domain-name {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    font-weight: 300;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.domain-dot {
    color: var(--burgundy);
}

.domain-subtitle {
    font-family: var(--font-caption);
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--text-tertiary);
    opacity: 0.7;
}

/* Hero Photo Fragment — partially cropped, off-center */
.hero-photo-fragment {
    position: absolute;
    right: -8vw;
    bottom: 8vh;
    width: clamp(200px, 35vw, 480px);
    height: clamp(260px, 45vw, 600px);
    z-index: 1;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 1.6s var(--ease-wabi) 0.4s, transform 1.6s var(--ease-wabi) 0.4s;
}

.threshold-entrance.revealed .hero-photo-fragment {
    opacity: 1;
    transform: translateX(0);
}

.photo-surface {
    width: 100%;
    height: 100%;
    filter: saturate(0.85) contrast(1.05) brightness(0.98) sepia(0.08);
}

.photo-surface--cracked-clay {
    background: linear-gradient(
        145deg,
        #8B7260 0%,
        #C4956A 25%,
        #5A3D2E 40%,
        #8B7260 55%,
        #D4C4B0 70%,
        #C4956A 85%,
        #3E1C12 100%
    );
    background-size: 200% 200%;
}

.photo-surface--stone {
    background: linear-gradient(
        160deg,
        #D4C4B0 0%,
        #8B7260 30%,
        #5A3D2E 50%,
        #8B7260 70%,
        #C4956A 90%,
        #EDE5D8 100%
    );
    background-size: 180% 180%;
}

.photo-filter {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(62, 28, 18, 0.015) 2px,
            rgba(62, 28, 18, 0.015) 3px
        );
    pointer-events: none;
}

/* ============================================================
   Kintsugi Crack-Line Dividers
   ============================================================ */
.kintsugi-divider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 40px;
    position: relative;
}

.kintsugi-svg {
    width: 100%;
    height: 40px;
    overflow: visible;
}

.kintsugi-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.2s ease-out;
    opacity: 0.6;
}

.kintsugi-branch {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0.8s ease-out 0.6s;
}

.kintsugi-divider.drawn .kintsugi-path {
    stroke-dashoffset: 0;
}

/* ============================================================
   Gallery Rooms
   ============================================================ */
.gallery-room {
    padding: 6rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================================
   Portfolio Grid — Deliberately Imperfect
   ============================================================ */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    align-items: start;
}

.portfolio-grid--shifted {
    padding-left: 12px;
}

/* Grid Items */
.grid-item {
    opacity: 0;
    transform: translateY(12px);
    position: relative;
    cursor: default;
}

.grid-item.revealed {
    opacity: 1;
    transform: translateY(var(--item-offset-y, 0px)) rotate(var(--item-rotate, 0deg));
}

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

.grid-item--tall .item-frame {
    aspect-ratio: 3 / 4;
}

/* Item Frame and Surface */
.item-frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--bg-accent);
    box-shadow: var(--shadow-1);
    transition: box-shadow 400ms ease-out;
}

.grid-item--wide .item-frame {
    aspect-ratio: 16 / 9;
}

.grid-item:hover .item-frame {
    box-shadow: var(--shadow-2);
}

.item-surface {
    width: 100%;
    height: 100%;
    filter: saturate(0.85) contrast(1.05) brightness(0.98) sepia(0.08);
    transition: filter 500ms var(--ease-wabi);
}

.grid-item:hover .item-surface {
    filter: saturate(1.0) contrast(1.05) brightness(0.98) sepia(0.08);
}

/* Textured surfaces mimicking fine-art photography subjects */
.surface--weathered-wood {
    background: linear-gradient(
        175deg,
        #8B7260 0%, #C4956A 15%, #5A3D2E 30%,
        #8B7260 45%, #D4C4B0 55%, #C4956A 70%,
        #8B7260 85%, #5A3D2E 100%
    );
}

.surface--raku {
    background: radial-gradient(
        ellipse at 40% 35%,
        #3E1C12 0%, #6B1D2A 20%, #8A2438 35%,
        #5A3D2E 50%, #3E1C12 70%, #8B7260 100%
    );
}

.surface--amber {
    background: linear-gradient(
        135deg,
        #C4956A 0%, #EDE5D8 20%, #C4956A 40%,
        #8B7260 60%, #C4956A 80%, #F5F0E8 100%
    );
}

.surface--zelkova {
    background: repeating-linear-gradient(
        2deg,
        #3E1C12 0px, #5A3D2E 3px, #8B7260 5px,
        #5A3D2E 8px, #3E1C12 10px, #8B7260 13px,
        #C4956A 15px, #5A3D2E 18px
    );
}

.surface--patina {
    background: radial-gradient(
        ellipse at 60% 40%,
        #C4956A 0%, #8B7260 25%, #5A3D2E 45%,
        #C4956A 60%, #D4C4B0 80%, #8B7260 100%
    );
}

.surface--washi {
    background: linear-gradient(
        180deg,
        #F5F0E8 0%, #EDE5D8 20%, #D4C4B0 40%,
        #EDE5D8 60%, #F5F0E8 80%, #D4C4B0 100%
    );
}

.surface--glaze {
    background: radial-gradient(
        circle at 30% 50%,
        #6B1D2A 0%, #8A2438 20%, #5A3D2E 40%,
        #8B7260 60%, #6B1D2A 80%, #3E1C12 100%
    );
}

.surface--fired-earth {
    background: linear-gradient(
        160deg,
        #5A3D2E 0%, #8B7260 20%, #3E1C12 40%,
        #5A3D2E 55%, #C4956A 70%, #8B7260 85%,
        #3E1C12 100%
    );
}

.surface--transience {
    background: radial-gradient(
        ellipse at 50% 50%,
        #F5F0E8 0%, #D4C4B0 15%, #8B7260 35%,
        #3E1C12 60%, #5A3D2E 80%, #8B7260 100%
    );
}

.surface--machiya {
    background: linear-gradient(
        145deg,
        #C4956A 0%, #EDE5D8 15%, #D4C4B0 30%,
        #8B7260 50%, #C4956A 65%, #F5F0E8 80%,
        #8B7260 100%
    );
}

.surface--vertical-grain {
    background: repeating-linear-gradient(
        0deg,
        #5A3D2E 0px, #8B7260 2px, #3E1C12 4px,
        #C4956A 6px, #5A3D2E 8px, #8B7260 10px,
        #3E1C12 12px, #5A3D2E 14px
    );
}

.surface--kiln {
    background: radial-gradient(
        ellipse at 45% 55%,
        #3E1C12 0%, #5A3D2E 25%, #8B7260 45%,
        #C4956A 60%, #8B7260 75%, #3E1C12 100%
    );
}

/* Item Texture Overlay — linen weave on cards */
.item-texture {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(62, 28, 18, 0.02) 3px,
            rgba(62, 28, 18, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 3px,
            rgba(62, 28, 18, 0.015) 3px,
            rgba(62, 28, 18, 0.015) 4px
        );
    pointer-events: none;
    mix-blend-mode: multiply;
}

/* Item Caption */
.item-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 0.25rem 0;
}

.caption-title {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.1vw, 0.95rem);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.caption-meta {
    font-family: var(--font-caption);
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    font-weight: 400;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

.meta-dot {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--burgundy);
    opacity: 0.6;
}

/* Hover Bottom Border */
.item-hover-border {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--burgundy);
    opacity: 0;
    transition: opacity 300ms var(--ease-wabi);
}

.grid-item:hover .item-hover-border {
    opacity: 1;
}

/* ============================================================
   Interstitial Pauses
   ============================================================ */
.interstitial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    padding: 4rem 2rem;
    text-align: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 1.5s var(--ease-wabi), transform 1.5s var(--ease-wabi);
}

.interstitial.revealed {
    opacity: 1;
    transform: translateY(0);
}

.interstitial-text {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 300;
    font-style: italic;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.6;
    opacity: 0.5;
}

/* ============================================================
   Closing Section
   ============================================================ */
.threshold-closing {
    min-height: 70vh;
    position: relative;
    padding: 4rem 2rem;
}

.closing-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.closing-photo .photo-surface {
    position: absolute;
    inset: 0;
}

.closing-warm-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(245, 240, 232, 0.7) 0%,
        rgba(237, 229, 216, 0.5) 40%,
        rgba(237, 229, 216, 0.6) 70%,
        rgba(245, 240, 232, 0.85) 100%
    );
}

.closing-content {
    position: relative;
    z-index: 2;
    text-align: center;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s var(--ease-wabi), transform 1.2s var(--ease-wabi);
}

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

.closing-text {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 400;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    letter-spacing: 0.01em;
    line-height: 1.7;
}

/* Seal Mark — potter's hanko */
.seal-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--burgundy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    transform: rotate(-12deg);
    opacity: 0.15;
}

.seal-text {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 300;
    color: var(--burgundy);
    letter-spacing: 0.05em;
}

.closing-year {
    font-family: var(--font-caption);
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-tertiary);
    opacity: 0.35;
    letter-spacing: 0.1em;
}

/* ============================================================
   Animations
   ============================================================ */

/* Subtle tremble — human tremor of placement */
@keyframes subtle-tremble {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(1.5px); }
    50%  { transform: translateX(-1.5px); }
    75%  { transform: translateX(0.8px); }
    100% { transform: translateX(0); }
}

.grid-item.trembling {
    animation: subtle-tremble 150ms linear 1;
}

/* Fade-in reveal for grid items */
.grid-item {
    transition: opacity 800ms var(--ease-wabi), transform 800ms var(--ease-wabi);
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--crack-line);
    border-radius: 2px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .gallery-room {
        padding: 4rem 1.5rem;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

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

    .portfolio-grid--shifted {
        padding-left: 0;
    }

    .threshold-entrance {
        padding: 3rem 1.5rem;
    }

    .hero-photo-fragment {
        right: -12vw;
        width: clamp(160px, 40vw, 280px);
        height: clamp(200px, 50vw, 360px);
    }

    .interstitial {
        min-height: 120px;
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .grid-item--wide {
        grid-column: span 1;
    }

    .grid-item--wide .item-frame {
        aspect-ratio: 4 / 3;
    }

    /* Remove rotation on small screens */
    .grid-item.revealed {
        transform: translateY(0) rotate(0deg) !important;
    }

    .domain-name {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .gallery-room {
        padding: 3rem 1rem;
    }

    .interstitial-text {
        font-size: clamp(1.1rem, 5vw, 1.8rem);
    }

    .item-caption {
        flex-direction: column;
        gap: 0.15rem;
    }

    .hero-photo-fragment {
        right: -15vw;
        width: clamp(140px, 45vw, 220px);
        height: clamp(180px, 55vw, 300px);
    }
}