/* ==========================================================
   a6c.xyz v2 — Kintsugi / Wabi-Sabi Design System
   Earthen Kiln Palette | Organic-Flow Layout | Ceramic Texture
   ========================================================== */

/* --- Custom Properties (Earthen Kiln palette) --- */
:root {
    --raw-clay: #E8DDD3;
    --kiln-ash: #3B3632;
    --gold-lacquer: #C5A55A;
    --celadon-glaze: #8FAE8B;
    --slip-white: #F5F0EA;
    --iron-oxide: #8B4513;
    --shino-blush: #D4A08A;

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

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--raw-clay);
    color: var(--kiln-ash);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.85;
    overflow-x: hidden;
}

/* --- SVG Filters (hidden) --- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Ceramic Texture Overlay --- */
.ceramic-texture-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    z-index: 0;
}

/* ==========================================================
   HERO SECTION — 100vh contemplative opening
   ========================================================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--raw-clay);
}

/* Hero kintsugi crack SVG */
.kintsugi-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.kintsugi-hero .crack-line {
    filter: drop-shadow(0 0 4px rgba(197, 165, 90, 0.4));
    stroke-dasharray: var(--dash-length, 2000);
    stroke-dashoffset: var(--dash-length, 2000);
    transition: stroke-width 300ms ease, filter 300ms ease;
}

.kintsugi-hero .crack-line.animated {
    animation: draw-crack 3000ms ease-in-out forwards;
}

.gold-particle {
    opacity: 0;
    transform-origin: center;
    filter: drop-shadow(0 0 3px rgba(197, 165, 90, 0.6));
}

.gold-particle.visible {
    animation: particle-appear 200ms ease-out forwards;
}

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

@keyframes particle-appear {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero Content — Logotype */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.logotype {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(60px, 12vw, 180px);
    letter-spacing: 0.02em;
    color: var(--iron-oxide);
    opacity: 0;
    /* Pressed-into-clay embossed effect */
    text-shadow:
        1px 2px 3px rgba(139, 69, 19, 0.15),
        -1px -1px 0 rgba(232, 221, 211, 0.3),
        0 0 0 transparent;
    -webkit-text-stroke: 0.5px rgba(139, 69, 19, 0.2);
}

.logotype.visible {
    animation: gentle-fade 1200ms ease-out forwards;
}

.xyz-mark {
    display: block;
    font-family: var(--font-headline);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(16px, 3vw, 36px);
    letter-spacing: 0.35em;
    color: var(--kiln-ash);
    opacity: 0;
    margin-top: 0.5em;
}

.xyz-mark.visible {
    animation: gentle-fade 1200ms ease-out forwards;
    --target-opacity: 0.5;
}

@keyframes gentle-fade {
    from { opacity: 0; }
    to { opacity: var(--target-opacity, 1); }
}

/* ==========================================================
   SECTION CRACK DIVIDERS — Kintsugi boundaries
   ========================================================== */
.section-crack {
    position: relative;
    width: 100%;
    overflow: visible;
    padding: 0;
}

.crack-divider {
    display: block;
    width: 100%;
    height: 40px;
}

.crack-divider .crack-line {
    filter: drop-shadow(0 0 4px rgba(197, 165, 90, 0.4));
    stroke-dasharray: var(--dash-length, 2000);
    stroke-dashoffset: var(--dash-length, 2000);
    transition: stroke-width 300ms ease, filter 300ms ease;
}

.crack-divider .crack-line.animated {
    animation: draw-crack 3000ms ease-in-out forwards;
}

.crack-divider .crack-parallel {
    transition: stroke-width 300ms ease, filter 300ms ease, opacity 300ms ease;
}

/* Kintsugi hover interaction — gold glow intensifies, crack widens */
.section-crack:hover .crack-line:not(.crack-parallel) {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(197, 165, 90, 0.8));
}

.section-crack:hover .crack-parallel {
    stroke-width: 0.8;
    opacity: 0.5;
    filter: drop-shadow(0 0 6px rgba(197, 165, 90, 0.8));
}

.kintsugi-hero:hover .crack-line {
    stroke-width: 2.5;
    filter: drop-shadow(0 0 6px rgba(197, 165, 90, 0.8));
}

/* ==========================================================
   CONTENT SECTIONS — Organic-flow composition
   ========================================================== */
.content-section {
    position: relative;
    width: 100%;
    padding: 0 6vw;
}

/* Organic spacing — non-uniform vertical margins (ma principle) */
#philosophy {
    margin-top: 16vh;
    margin-bottom: 8vh;
}

#process {
    margin-top: 8vh;
    margin-bottom: 12vh;
}

#impermanence {
    margin-top: 10vh;
    margin-bottom: 8vh;
}

#stillness {
    margin-top: 12vh;
    margin-bottom: 16vh;
}

/* Section inner: flex row for 60-40 asymmetric split */
.section-inner {
    display: flex;
    align-items: flex-start;
    gap: 4vw;
    max-width: 1200px;
    margin: 0 auto;
}

/* Asymmetric placement: left-heavy */
.section-left .content-block {
    flex: 0 0 58%;
}

.section-left .decorative-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Asymmetric placement: right-heavy */
.section-right .section-inner {
    flex-direction: row-reverse;
}

.section-right .content-block {
    flex: 0 0 58%;
}

.section-right .decorative-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content Block — fade-reveal animation */
.content-block {
    opacity: 0;
    transform: translateY(20px);
}

.content-block.revealed {
    animation: reveal-content 800ms ease-out forwards;
}

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

/* ==========================================================
   POTTER'S MARKS — Section identifiers (replace bullets)
   ========================================================== */
.potters-mark {
    margin-bottom: 1.5rem;
}

.mark-circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--iron-oxide);
    border-radius: 50%;
    position: relative;
    opacity: 0.4;
}

.mark-circle::before,
.mark-circle::after {
    content: '';
    position: absolute;
    background-color: var(--iron-oxide);
    opacity: 0.4;
}

.mark-circle::before {
    width: 1px;
    height: 14px;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.mark-circle::after {
    width: 14px;
    height: 1px;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

/* Headings — Cormorant Garamond 600 */
.section-heading {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(28px, 4vw, 64px);
    letter-spacing: 0.02em;
    color: var(--kiln-ash);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Body Text — Karla 400, max-width 42em */
.section-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.85;
    color: var(--kiln-ash);
    max-width: 42em;
    margin-bottom: 1.2rem;
}

/* Annotations — Cormorant Garamond 300 italic */
.annotation {
    font-family: var(--font-headline);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14px, 1.1vw, 17px);
    color: var(--gold-lacquer);
    margin-top: 1.5rem;
    letter-spacing: 0.02em;
}

/* ==========================================================
   DECORATIVE ELEMENTS
   ========================================================== */

/* Glaze Swatch SVG */
.glaze-swatch {
    width: 160px;
    height: 160px;
    opacity: 0.6;
    transition: opacity 400ms ease;
}

.glaze-swatch:hover {
    opacity: 0.8;
}

.glaze-swatch .swatch-crack {
    filter: drop-shadow(0 0 3px rgba(197, 165, 90, 0.3));
    transition: stroke-width 300ms ease, filter 300ms ease;
}

.glaze-swatch:hover .swatch-crack {
    stroke-width: 1.8;
    filter: drop-shadow(0 0 5px rgba(197, 165, 90, 0.7));
}

/* Glaze Panels — hand-shaped border-radius */
.glaze-panel {
    width: 180px;
    height: 180px;
    position: relative;
    border-radius: 8px 14px 10px 16px;
    overflow: hidden;
    transition: background 400ms ease, opacity 400ms ease;
}

.celadon-wash {
    background: linear-gradient(135deg, var(--celadon-glaze), var(--slip-white));
    opacity: 0.5;
}

.shino-wash {
    background: linear-gradient(135deg, var(--shino-blush), var(--raw-clay));
    opacity: 0.5;
}

/* Glaze panel hover: rotate gradient 5deg, increase grain */
.glaze-panel:hover {
    opacity: 0.65;
}

.celadon-wash:hover {
    background: linear-gradient(140deg, var(--celadon-glaze), var(--slip-white));
}

.shino-wash:hover {
    background: linear-gradient(140deg, var(--shino-blush), var(--raw-clay));
}

.crackle-pattern {
    width: 100%;
    height: 100%;
    transition: opacity 400ms ease;
}

/* Ceramic Glyph — potter's wheel mark */
.ceramic-glyph {
    width: 120px;
    height: 120px;
    opacity: 0.6;
    transition: opacity 400ms ease;
}

.ceramic-glyph:hover {
    opacity: 0.8;
}

/* Kanji Watermark — 金 at 30vw, 6% opacity */
.kanji-watermark {
    position: absolute;
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: 30vw;
    color: var(--gold-lacquer);
    opacity: 0.06;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    z-index: 0;
    user-select: none;
}

/* ==========================================================
   CLOSING SECTION
   ========================================================== */
.closing-section {
    padding: 16vh 6vw 12vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.closing-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding-left: 8%;
    opacity: 0;
    transform: translateY(20px);
}

.closing-content.revealed {
    animation: reveal-content 800ms ease-out forwards;
}

.closing-text {
    font-family: var(--font-headline);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(24px, 3.5vw, 52px);
    color: var(--kiln-ash);
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.closing-mark {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.logotype-small {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 32px);
    color: var(--iron-oxide);
    letter-spacing: 0.02em;
}

.xyz-small {
    font-family: var(--font-headline);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14px, 1.5vw, 24px);
    letter-spacing: 0.25em;
    color: var(--kiln-ash);
    opacity: 0.5;
}

/* ==========================================================
   RESPONSIVE — Maintaining asymmetry at all breakpoints
   ========================================================== */

/* Tablet — 70/30 split */
@media (max-width: 900px) {
    .section-inner {
        gap: 3vw;
    }

    .section-left .content-block,
    .section-right .content-block {
        flex: 0 0 68%;
    }

    .glaze-panel {
        width: 140px;
        height: 140px;
    }

    .glaze-swatch {
        width: 120px;
        height: 120px;
    }

    .ceramic-glyph {
        width: 90px;
        height: 90px;
    }

    #philosophy { margin-top: 10vh; margin-bottom: 6vh; }
    #process { margin-top: 6vh; margin-bottom: 8vh; }
    #impermanence { margin-top: 7vh; margin-bottom: 6vh; }
    #stillness { margin-top: 8vh; margin-bottom: 10vh; }
}

/* Mobile — 85/15 split, minimum 4vh spacing */
@media (max-width: 600px) {
    .section-inner {
        flex-direction: column !important;
        gap: 2rem;
    }

    .section-left .content-block,
    .section-right .content-block {
        flex: 1 1 auto;
        width: 85%;
    }

    .decorative-side {
        order: -1;
        width: 100%;
        justify-content: flex-start !important;
        padding-left: 15%;
    }

    .section-right .decorative-side {
        padding-left: 0;
        padding-right: 15%;
        justify-content: flex-end !important;
    }

    .glaze-panel {
        width: 100px;
        height: 100px;
    }

    .glaze-swatch {
        width: 80px;
        height: 80px;
    }

    .ceramic-glyph {
        width: 60px;
        height: 60px;
    }

    /* Minimum inter-section spacing 4vh */
    #philosophy { margin-top: 6vh; margin-bottom: 4vh; }
    #process { margin-top: 4vh; margin-bottom: 5vh; }
    #impermanence { margin-top: 5vh; margin-bottom: 4vh; }
    #stillness { margin-top: 4vh; margin-bottom: 6vh; }

    .closing-content {
        padding-left: 4%;
    }

    .kanji-watermark {
        font-size: 50vw;
    }

    .content-section {
        padding: 0 5vw;
    }
}