/* ============================================================
   mystical.day — Brutalist Herbalism
   Palette: Honeyed-Neutral
   Font: Commissioner (variable, 300–700)
   Colors: #c4b8a8 #ede5d5 #3d3229 #2a2420 #a89060 #7a8b6a #d4a84b #f5f0e8
   ============================================================ */

/* ---------- Reset & Base ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    overflow-x: hidden;
}

body {
    font-family: 'Commissioner', sans-serif;
    color: #3d3229;
    background-color: #2a2420;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Slab Procession (Main Grid) ---------- */

.slab-procession {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(100vh, auto);
    gap: 8px;
}

/* ---------- Individual Slab ---------- */

.slab {
    position: relative;
    display: grid;
    grid-template-columns: [gutter-start] minmax(2rem, 1fr) [content-start] minmax(0, 680px) [content-end] minmax(2rem, 1fr) [gutter-end];
    align-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

.slab-inner {
    grid-column: content-start / content-end;
    position: relative;
    z-index: 2;
}

/* ============================================================
   SLAB 1: The Threshold (Hero)
   ============================================================ */

.slab-threshold {
    min-height: 100vh;
    background-color: #c4b8a8;
    align-items: center;
    justify-items: center;
}

/* Concrete Texture Overlay */
.concrete-texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #c4b8a8;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n2)' opacity='0.02'/%3E%3C/svg%3E");
}

/* Hero Leaf Backdrop */
.hero-leaf-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.hero-leaf {
    width: clamp(250px, 40vw, 500px);
    height: auto;
    opacity: 0;
    animation: leaf-drift 120s linear infinite, leaf-fadein 1200ms 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes leaf-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes leaf-fadein {
    from { opacity: 0; }
    to { opacity: 0.03; }
}

/* Hero Title */
.hero-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 7rem);
    letter-spacing: 0.04em;
    color: #3d3229;
    text-transform: lowercase;
    opacity: 0;
    transform: translateY(20px);
    animation: hero-rise 800ms 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    z-index: 2;
    text-align: center;
}

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* The threshold starts visible since it's the hero */
.slab-threshold {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   SLAB 2: The Stillroom
   ============================================================ */

.slab-stillroom {
    min-height: 100vh;
    background-color: #ede5d5;
}

.stillroom-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}

.watermark-leaf {
    width: clamp(300px, 50vw, 600px);
    height: auto;
    opacity: 0.04;
    color: #7a8b6a;
}

.stillroom-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #3d3229;
    text-align: left;
    max-width: 680px;
}

/* ============================================================
   SLAB 3: The Distillery
   ============================================================ */

.slab-distillery {
    min-height: 100vh;
    background-color: #c4b8a8;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.distillery-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

.brass-line-container {
    width: 60vw;
    max-width: 600px;
    overflow: hidden;
}

.brass-line {
    width: 100%;
    height: 1px;
    background-color: #a89060;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 600ms cubic-bezier(0.25, 0.1, 0.25, 1),
                background-color 400ms ease;
    cursor: pointer;
}

.brass-line.line-drawn {
    transform: scaleX(1);
}

.brass-line:hover {
    background-color: #d4a84b;
    transform: scaleX(1.08);
    transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 400ms ease;
}

.specimen-label {
    font-family: 'Commissioner', sans-serif;
    font-weight: 600;
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #a89060;
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: color 400ms ease,
                transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.specimen-label::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #d4a84b, #d4a84b);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 300ms ease;
}

.specimen-label:hover {
    color: #d4a84b;
    transform: scale(1.08);
}

.specimen-label:hover::after {
    background-size: 100% 1px;
}

/* Distillery Round Leaf Decorations */
.distillery-leaf {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 0.06;
    transition: opacity 400ms ease,
                transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.distillery-leaf:hover {
    opacity: 0.15;
    transform: scale(1.08);
}

.distillery-leaf-left {
    left: calc(50% - 32vw);
    top: 50%;
    transform: translateY(-50%);
}

.distillery-leaf-right {
    right: calc(50% - 32vw);
    top: 50%;
    transform: translateY(-50%);
}

.distillery-leaf-left:hover {
    transform: translateY(-50%) scale(1.08);
}

.distillery-leaf-right:hover {
    transform: translateY(-50%) scale(1.08);
}

/* ============================================================
   SLAB 4: The Garden Wall
   ============================================================ */

.slab-garden {
    min-height: 100vh;
    background-color: #ede5d5;
    position: relative;
}

.garden-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='140' viewBox='0 0 100 140'%3E%3Cpath d='M50 5 C38 25 15 40 10 65 C5 90 25 120 50 135 C75 120 95 90 90 65 C85 40 62 25 50 5Z' fill='none' stroke='%237a8b6a' stroke-width='0.8'/%3E%3Cpath d='M50 15 L50 125' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3Cpath d='M50 40 L32 55' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3Cpath d='M50 40 L68 55' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3Cpath d='M50 65 L28 80' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3Cpath d='M50 65 L72 80' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3Cpath d='M50 90 L35 102' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3Cpath d='M50 90 L65 102' fill='none' stroke='%237a8b6a' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 100px 140px;
    background-repeat: repeat;
    pointer-events: none;
}

.garden-text {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    background-color: #f5f0e8; /* Mist Cream breathing room */
    padding: 3rem 2.5rem;
    border-radius: 2px;
}

.garden-text p {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #3d3229;
    text-align: center;
}

/* ============================================================
   SLAB 5: The Closing Stone
   ============================================================ */

.slab-closing {
    min-height: 50vh;
    background-color: #2a2420;
}

.slab-procession .slab-closing {
    grid-row: auto;
}

.closing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    min-height: 50vh;
}

.colophon-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #a89060;
    transition: color 400ms ease,
                transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.colophon-text:hover {
    color: #d4a84b;
    transform: scale(1.08);
}

.compound-leaf {
    width: 60px;
    height: auto;
    opacity: 0.5;
    transition: opacity 400ms ease,
                transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.compound-leaf:hover {
    opacity: 0.8;
    transform: scale(1.08);
}

/* ============================================================
   Scale-Hover Global Interaction Pattern
   ============================================================ */

.scale-hover {
    transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
                color 400ms ease;
}

.scale-hover:hover {
    transform: scale(1.08);
}

/* Hover-exit is slower */
.scale-hover:not(:hover) {
    transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1),
                color 400ms ease;
}

/* ============================================================
   Mobile Adaptation (< 768px)
   ============================================================ */

@media (max-width: 768px) {
    .slab {
        grid-template-columns: [gutter-start] minmax(1.5rem, 1fr) [content-start] minmax(0, 100%) [content-end] minmax(1.5rem, 1fr);
    }

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

    .hero-leaf {
        width: 80vw;
    }

    .brass-line-container {
        width: 80vw;
    }

    .distillery-leaf-left {
        left: 1rem;
    }

    .distillery-leaf-right {
        right: 1rem;
    }

    .distillery-content {
        gap: 2rem;
    }

    .garden-text p {
        font-size: clamp(0.95rem, 4vw, 1.1rem);
    }

    .closing-inner {
        gap: 2rem;
    }
}

/* ============================================================
   Closing Stone grid row override (50vh, not 100vh)
   ============================================================ */

.slab-procession > .slab-closing {
    min-height: 50vh;
}