/* ============================================
   BBOTTL.com v2 — Wabi-Sabi Ceramic Vessels
   Kintsugi as interaction language
   Anti-velocity: slow, measured, deliberate
   ============================================ */

/* --- Custom Properties (all palette colors) --- */
:root {
    --bg-primary: #f5f0e8;
    --bg-secondary: #e8e0d4;
    --text-primary: #3a342e;
    --text-secondary: #8a7f72;
    --accent-gold: #c4953a;
    --accent-dark: #5c3d2e;
    --shadow-bisque: #d4c8b6;
    --highlight: #faf7f1;
    --ghost-tint: #f0ece6;

    --font-headline: 'Cormorant Garamond', 'Georgia', serif;
    --font-body: 'Karla', 'Helvetica Neue', sans-serif;
    --font-kanji: 'Noto Serif JP', serif;

    --ease-careful: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-slow: 1200ms;
    --duration-medium: 800ms;
    --duration-crack: 1200ms;

    --content-max: 680px;
    --editorial-margin: 17vw;
}

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

html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--bg-primary);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Grain Overlay ---
   Subtle noise texture over entire page,
   tactile quality of handmade paper / bisque-fired clay */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* --- Navigation --- */
#site-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 2rem;
}

#nav-toggle {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
}

.nav-line {
    display: block;
    width: 28px;
    height: 1.5px;
    background-color: var(--text-primary);
    transition: transform 600ms var(--ease-careful), opacity 400ms ease;
    transform-origin: center;
}

#nav-toggle.is-open .nav-line:first-child {
    transform: translateY(9px) rotate(25deg);
}

#nav-toggle.is-open .nav-line:last-child {
    transform: translateY(-9px) rotate(-25deg);
}

#nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    background-color: var(--bg-primary);
    transform: translateX(-100%);
    transition: transform 700ms var(--ease-careful);
    display: flex;
    align-items: center;
    padding: 4rem;
    border-right: 1px solid var(--shadow-bisque);
}

#nav-drawer.is-open {
    transform: translateX(0);
}

#nav-drawer ul {
    list-style: none;
}

#nav-drawer li {
    margin-bottom: 2.5rem;
}

#nav-drawer a {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
    transition: color 400ms ease;
}

/* Kanji annotation above each nav link */
#nav-drawer a::before {
    content: attr(data-kanji);
    font-family: var(--font-kanji);
    font-weight: 200;
    font-size: 0.75rem;
    color: var(--text-secondary);
    position: absolute;
    top: -0.8rem;
    right: -1.2rem;
    opacity: 0.5;
}

/* Kintsugi gold underline on hover (traces from left) */
#nav-drawer a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent-gold);
    transition: width 400ms var(--ease-careful);
}

#nav-drawer a:hover {
    color: var(--accent-dark);
}

#nav-drawer a:hover::after {
    width: 100%;
}

/* --- Scene (Section) Base ---
   Each section is a discrete "room" in the exhibition */
.scene {
    min-height: 100vh;
    position: relative;
    scroll-snap-align: start;
    background-color: var(--bg-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scene--smoke {
    background-color: var(--bg-secondary);
}

.scene-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 6rem var(--editorial-margin) 4rem;
    position: relative;
    z-index: 2;
}

/* --- Ghost Kanji ---
   Large decorative Japanese characters as watermark background elements.
   Near-invisible against the background, semantic (reinforces section theme). */
.ghost-kanji {
    position: absolute;
    font-family: var(--font-kanji);
    font-weight: 200;
    font-size: clamp(8rem, 15vw, 20rem);
    color: var(--ghost-tint);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    will-change: transform;
}

/* Slightly different tint for smoke-background sections */
.scene--smoke .ghost-kanji {
    color: #e2dbd0;
}

/* --- Section Dividers ---
   Hand-drawn SVG paths with variable wobble, drawn on scroll entry. */
.section-divider {
    width: 100%;
    height: 30px;
    display: block;
    flex-shrink: 0;
}

.divider-path {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
}

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

/* --- Headlines ---
   Cormorant Garamond Light, tight letter-spacing, intimate whispered quality */
.headline {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 1.8rem;
}

.headline--hero {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.headline--fracture {
    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
}

.headline--repair {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    color: var(--accent-dark);
}

/* --- Body Text ---
   Karla, warm humanist sans-serif, generous line-height */
.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-primary);
    max-width: var(--content-max);
    margin-bottom: 1.2rem;
}

.body-text--hero {
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.body-text--quiet {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 1rem;
}

.body-text--haiku {
    font-family: var(--font-headline);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 2;
    color: var(--accent-dark);
    letter-spacing: 0.01em;
    margin-top: 1.5rem;
}

.text-block {
    max-width: var(--content-max);
}

/* --- Fade Reveal Animation ---
   Text/elements enter via opacity + translateY(20px) to 0.
   Slow (1200ms), ease-out, no bounce. */
.fade-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-careful),
                transform var(--duration-slow) var(--ease-careful);
}

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

/* --- Deliberate Imperfection ---
   Small offsets/rotations to mimic handmade placement.
   Applied via JS as inline styles for per-element variation. */
.imperfect {
    /* Overridden per-element by JS with unique slight rotation/offset */
}

/* ===========================
   Section 1: CREATION (Hero)
   The vessel rises from the wheel
   =========================== */
.scene-content--creation {
    flex-direction: row;
    gap: 6vw;
    padding-top: 0;
    padding-bottom: 0;
    min-height: calc(100vh - 30px);
}

.vessel-stage {
    flex: 0 0 auto;
    width: clamp(180px, 22vw, 300px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#hero-vessel {
    width: 100%;
    height: auto;
    max-height: 70vh;
}

/* Path-draw animation: vessel outline draws bottom-to-top over 3s */
#vessel-outline {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
}

#vessel-outline.is-drawing {
    animation: vessel-draw 3s var(--ease-careful) forwards;
}

@keyframes vessel-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Kintsugi cracks: hidden initially, draw in with golden glow after vessel completes */
#kintsugi-hero-crack,
#kintsugi-hero-branch {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

#kintsugi-hero-crack.is-visible,
#kintsugi-hero-branch.is-visible {
    opacity: 1;
    animation: crack-draw var(--duration-crack) var(--ease-careful) forwards;
}

@keyframes crack-draw {
    to {
        stroke-dashoffset: 0;
    }
}

.creation-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: var(--content-max);
}

/* ===========================
   Section 2: THE VESSEL (About)
   A vessel is not its perfection
   =========================== */
.scene-content--vessel {
    flex-direction: row;
    gap: 4vw;
    align-items: center;
}

.vessel-display {
    flex: 0 0 auto;
    width: clamp(200px, 28vw, 380px);
    position: relative;
}

.vessel-bg-silhouette {
    width: 100%;
    height: auto;
    opacity: 0.35;
}

.kintsugi-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.kintsugi-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
}

.kintsugi-line.is-drawn {
    animation: crack-draw var(--duration-crack) var(--ease-careful) forwards;
}

.vessel-text {
    max-width: var(--content-max);
}

/* ===========================
   Section 3: FRACTURE (Breaking)
   Everything breaks — the moment of tension
   =========================== */
.scene-content--fracture {
    flex-direction: row-reverse;
    gap: 5vw;
}

.fracture-stage {
    flex: 0 0 auto;
    width: clamp(200px, 25vw, 340px);
    position: relative;
}

.fracture-vessel {
    width: 100%;
    height: auto;
}

/* Shards separate on fracture: slow, careful translation */
.fracture-shard {
    transition: transform 1500ms var(--ease-careful);
    transform-origin: center center;
}

.fracture-vessel.is-fractured .fracture-shard--left {
    transform: translate(-8px, 4px) rotate(-0.8deg);
}

.fracture-vessel.is-fractured .fracture-shard--right {
    transform: translate(8px, -3px) rotate(0.6deg);
}

.fracture-crack {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}

.fracture-crack.is-drawn {
    opacity: 1;
    animation: crack-draw 1800ms var(--ease-careful) forwards;
}

.fracture-text {
    max-width: var(--content-max);
}

/* ===========================
   Section 4: REPAIR (Resolution)
   More beautiful for having been broken
   =========================== */
.scene-content--repair {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3rem;
}

.repair-vessel-wrap {
    position: relative;
    width: clamp(220px, 30vw, 380px);
    margin-bottom: 2rem;
}

.repair-vessel {
    width: 100%;
    height: auto;
}

.repair-gold {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

.repair-gold--branch {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.repair-gold.is-drawn {
    animation: crack-draw 2000ms var(--ease-careful) forwards;
}

.repair-gold--branch.is-drawn {
    animation: crack-draw 1400ms var(--ease-careful) 600ms forwards;
}

/* Radial gold glow behind the repaired vessel */
.repair-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 149, 58, 0.1) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 2000ms ease;
}

.repair-glow.is-visible {
    opacity: 1;
}

.repair-text {
    max-width: var(--content-max);
}

/* ===========================
   Footer
   Minimal closing mark
   =========================== */
#site-footer {
    padding: 4rem var(--editorial-margin) 3rem;
    background-color: var(--bg-secondary);
    display: flex;
    justify-content: flex-start;
}

.footer-mark {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-vessel-mark {
    width: 30px;
    height: auto;
}

.footer-text {
    font-family: var(--font-headline);
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* ===========================
   Glaze Drip Shapes
   Organic asymmetric border-radius,
   simulating the uneven edge of ceramic glaze
   =========================== */
.glaze-shape {
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
    background-color: var(--highlight);
    padding: 2rem 2.5rem;
    margin-top: 2rem;
    display: inline-block;
}

.glaze-shape .body-text {
    margin-bottom: 0;
}

/* ===========================
   Kintsugi Hover Border
   Golden line traces perimeter on hover (400ms)
   =========================== */
.kintsugi-hover {
    position: relative;
    overflow: hidden;
}

.kintsugi-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1.5px solid transparent;
    pointer-events: none;
    transition: border-color 400ms var(--ease-careful);
    border-radius: inherit;
}

.kintsugi-hover:hover::before {
    border-color: var(--accent-gold);
}

/* ===========================
   Responsive Design
   Fluid between 320px and 1200px
   =========================== */
@media (max-width: 900px) {
    :root {
        --editorial-margin: 8vw;
    }

    .scene-content--creation,
    .scene-content--vessel,
    .scene-content--fracture {
        flex-direction: column;
        gap: 3rem;
        padding-top: 8rem;
        padding-bottom: 4rem;
    }

    .vessel-stage,
    .vessel-display,
    .fracture-stage {
        width: clamp(160px, 50vw, 260px);
    }

    .ghost-kanji {
        font-size: clamp(6rem, 20vw, 12rem);
        right: 4%;
    }

    #nav-drawer {
        width: 80vw;
    }
}

@media (max-width: 560px) {
    :root {
        --editorial-margin: 6vw;
    }

    .headline--hero {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }

    .scene-content--creation {
        padding-top: 6rem;
    }

    .vessel-stage,
    .vessel-display,
    .fracture-stage,
    .repair-vessel-wrap {
        width: clamp(140px, 55vw, 220px);
    }

    .glaze-shape {
        padding: 1.5rem 2rem;
    }
}