/* ppuzzl.org - Generative Terracotta Mosaic */
/* Palette: Kiln-fired terracotta system */
:root {
    --clay-deep: #8B4513;
    --fired-orange: #C2703E;
    --copper-line: #D4894A;
    --slip-white: #F5EDE3;
    --kiln-black: #2A1F1A;
    --sage-glaze: #7A8B6F;
    --ash-grey: #B8AFA6;
    --ember-glow: #E85D3A;
}

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

html {
    scroll-behavior: auto;
    overflow-x: hidden;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    color: var(--kiln-black);
    background: var(--kiln-black);
    overflow-x: hidden;
}

/* Scroll container */
#scroll-container {
    width: 100%;
}

/* Layer base */
.layer {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* Split screen panels */
.split-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 38.2%;
    height: 100%;
    background: var(--kiln-black);
    z-index: 1;
}

.split-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 61.8%;
    height: 100%;
    background: var(--slip-white);
    z-index: 1;
}

/* Noise texture overlay */
.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    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 baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

.noise-light {
    opacity: 0.03;
}

.noise-medium {
    opacity: 0.06;
}

.noise-heavy {
    opacity: 0.10;
}

/* Fracture line SVG */
.fracture-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.tree-overlay {
    z-index: 5;
}

/* Central tile for shatter */
.central-tile {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    z-index: 15;
}

.voronoi-canvas {
    width: 100%;
    height: 100%;
}

/* Oversized display title */
.oversized-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(5rem, 14vw, 12rem);
    letter-spacing: -0.04em;
    color: var(--copper-line);
    opacity: 0.2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 1.2s ease;
}

.repair-glow {
    color: var(--ember-glow);
    opacity: 0;
    text-shadow: 0 0 60px rgba(232, 93, 58, 0.4), 0 0 120px rgba(232, 93, 58, 0.2);
}

.repair-glow.active {
    opacity: 1;
}

/* Sort section */
.sort-column {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 4px;
    padding: 20px;
}

.sort-tile {
    width: 60px;
    height: 40px;
    border-radius: 3px;
    border: 1px solid var(--copper-line);
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1.0), opacity 0.4s ease;
    perspective: 800px;
}

/* Body text block */
.body-text-block {
    position: relative;
    z-index: 5;
    padding: 60px 40px;
    max-width: 500px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.body-text-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.grow-text-overlay {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    z-index: 12;
    padding: 30px;
}

.grow-text-overlay.visible {
    transform: translateY(-50%);
}

.section-heading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
    color: var(--clay-deep);
    line-height: 1.1;
    margin-bottom: 20px;
}

.body-copy {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    color: var(--kiln-black);
    max-width: 38ch;
    margin-bottom: 16px;
}

.accent-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--copper-line);
    margin-bottom: 12px;
}

/* Leaf clusters */
.leaf-cluster {
    position: absolute;
    z-index: 8;
    pointer-events: none;
}

.leaf-svg {
    position: absolute;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
    transform: scale(0.1);
    opacity: 0;
}

.leaf-svg.grown {
    transform: scale(1);
    opacity: 1;
}

/* Grow section tiles */
.grow-tiles {
    position: relative;
    z-index: 6;
    width: 100%;
    height: 100%;
}

.grow-tile {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 1px solid var(--copper-line);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--slip-white);
    background: var(--clay-deep);
    transform: scale(0);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.grow-tile.visible {
    transform: scale(1);
}

/* Flip section */
.flip-tiles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.flip-tile-wrapper {
    position: absolute;
    perspective: 1000px;
}

.flip-tile {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.flip-tile.flipped {
    transform: rotateY(180deg);
}

.flip-tile .front,
.flip-tile .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid var(--copper-line);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-tile .front {
    background: var(--fired-orange);
}

.flip-tile .back {
    background: var(--sage-glaze);
    transform: rotateY(180deg);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: var(--slip-white);
    letter-spacing: 0.05em;
    padding: 4px;
    text-align: center;
    word-break: break-all;
}

/* Flip phrases */
.flip-text-container {
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 0 60px;
}

.flip-phrase {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: -0.03em;
    color: var(--clay-deep);
    line-height: 1.15;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1.0);
    margin-bottom: 8px;
}

.flip-phrase.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Repair section */
.repair-mosaic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    z-index: 12;
}

.repair-leaves {
    position: absolute;
    top: 0;
    left: 38.2%;
    width: 0;
    height: 100%;
    z-index: 7;
    transform: translateX(-50%);
}

/* Section indicators */
.section-indicators {
    position: fixed;
    left: 38.2%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.section-indicators:hover {
    opacity: 1;
}

.indicator {
    width: 10px;
    height: 10px;
    background: var(--ash-grey);
    border: 1px solid var(--copper-line);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.indicator.active {
    background: var(--copper-line);
    transform: scale(1.3) rotate(45deg);
}

/* Voronoi cell styles */
.voronoi-cell {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.voronoi-cell:hover {
    filter: brightness(1.15);
}

/* Fragment pieces */
.fragment {
    position: absolute;
    z-index: 15;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
}

.fragment svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Branch paths for tree */
.branch-path {
    stroke: var(--clay-deep);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
}

.branch-path-light {
    stroke: var(--copper-line);
}

/* Layer specific backgrounds */
#layer-sort .split-left {
    background: var(--kiln-black);
}

#layer-grow .split-left {
    background: var(--kiln-black);
}

#layer-grow .split-right {
    background: var(--slip-white);
}

#layer-flip .split-left {
    background: var(--kiln-black);
}

#layer-repair .split-left {
    background: var(--kiln-black);
}

#layer-repair .split-right {
    background: var(--slip-white);
}

/* Responsive */
@media (max-width: 768px) {
    .split-left {
        width: 35%;
    }
    .split-right {
        width: 65%;
    }
    .body-text-block {
        padding: 30px 20px;
    }
    .flip-text-container {
        padding: 0 20px;
    }
    .central-tile {
        width: 200px;
        height: 200px;
    }
    .repair-mosaic {
        width: 260px;
        height: 260px;
    }
    .grow-text-overlay {
        right: 2%;
    }
}

/* Shatter title letter spans */
.title-letter {
    display: inline-block;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1s ease;
}