/* ============================================
   PPADDL.com v2 — Wabi-Sabi Paddle Artifact
   ============================================ */

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    font-size: 16px;
}

body {
    background-color: #f4efe6;
    color: #4a4540;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.85;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: none;
}

/* Restore cursor on touch devices */
@media (hover: none) {
    body { cursor: auto; }
}

::selection {
    background: #c4a265;
    color: #f4efe6;
}

/* ============================================
   OPENING VIEWPORT
   ============================================ */
.opening {
    position: relative;
    height: 100vh;
    min-height: 600px;
    background-color: #f4efe6;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 12vh 8vw;
    scroll-snap-align: start;
    overflow: hidden;
}

/* Wood grain on opening — angle 86deg */
.opening::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            86deg,
            #d4c4a8 0px, #cebfa3 1px, #c8b99e 2px,
            #d1c1a5 3px, #cfbda1 5px, #d4c4a8 6px,
            #bfb196 7px, #c5b89b 9px, #d2c2a6 10px,
            #cdbea2 12px, #d4c4a8 14px
        );
    opacity: 0.04;
    pointer-events: none;
}

/* Central kintsugi crack */
.crack-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 75%;
    z-index: 1;
}

.kintsugi-crack-opening {
    width: 100%;
    height: 100%;
}

/* Title: PPADDL */
.opening-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(18vw, 22vw, 280px);
    letter-spacing: 0.12em;
    color: #4a4540;
    line-height: 1;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    opacity: 0;
    animation: title-arrive 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

.letter {
    display: inline-block;
    transition: color 0.6s ease;
}

.letter:hover {
    color: #b87333;
}

@keyframes title-arrive {
    0% {
        opacity: 0;
        transform: translateY(30px) rotate(0.5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

/* ============================================
   BREATH SECTIONS (Interstitial Pauses)
   ============================================ */
.breath {
    height: 50vh;
    min-height: 300px;
    scroll-snap-align: start;
    position: relative;
}

.breath-one {
    background-color: #f4efe6;
}

.breath-two {
    background: linear-gradient(to bottom, #f4efe6, #ebe5d9);
}

.breath-three {
    background-color: #ebe5d9;
}

.breath-four {
    background: linear-gradient(to bottom, #ebe5d9, #e2dcd0);
}

.breath-five {
    background: linear-gradient(to bottom, #e2dcd0, #3b4a3f);
}

.breath-six {
    background: linear-gradient(to bottom, #3b4a3f, #1a1713);
}

/* Rope fiber divider on breaths — custom dash/gap simulating braided rope */
.breath::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 1px;
    background-image: repeating-linear-gradient(
        90deg,
        #9a8f82 0px, #9a8f82 6px,
        transparent 6px, transparent 9px
    );
    background-size: 9px 1px;
    opacity: 0.3;
}

/* Hide rope divider on dark breaths */
.breath-five::after,
.breath-six::after {
    opacity: 0.12;
}

/* ============================================
   OBJECT STUDY SECTIONS
   ============================================ */
.object-study {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    overflow: hidden;
}

/* Wood grain pseudo — angle varies per section */
.object-study::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.study-raw::before {
    background:
        repeating-linear-gradient(
            84deg,
            #d4c4a8 0px, #cebfa3 1px, #c8b99e 3px,
            #d1c1a5 4px, #cfbda1 6px, #d4c4a8 7px,
            #bfb196 8px, #c5b89b 10px, #d2c2a6 11px,
            #cdbea2 13px, #d4c4a8 15px
        );
    opacity: 0.045;
}

.study-water::before {
    background:
        repeating-linear-gradient(
            86deg,
            #d4c4a8 0px, #cfbda1 1px, #c8b99e 2px,
            #d1c1a5 4px, #cebfa3 6px, #d4c4a8 8px,
            #bfb196 9px, #c5b89b 11px, #d2c2a6 13px,
            #d4c4a8 15px
        );
    opacity: 0.05;
}

.study-seasoned::before {
    background:
        repeating-linear-gradient(
            82deg,
            #d4c4a8 0px, #cebfa3 2px, #bfb196 3px,
            #c8b99e 5px, #d1c1a5 7px, #cfbda1 8px,
            #d4c4a8 10px, #c5b89b 12px, #d2c2a6 14px,
            #d4c4a8 16px
        );
    opacity: 0.055;
}

.study-worn::before {
    background:
        repeating-linear-gradient(
            88deg,
            #d4c4a8 0px, #cebfa3 1px, #bfb196 3px,
            #c8b99e 4px, #cfbda1 6px, #d1c1a5 8px,
            #d4c4a8 9px, #c5b89b 11px, #d2c2a6 13px,
            #cdbea2 15px, #d4c4a8 17px
        );
    opacity: 0.025;
}

.study-raw {
    background-color: #f4efe6;
}

.study-water {
    background-color: #f1ebe1;
}

.study-seasoned {
    background-color: #ebe5d9;
}

.study-worn {
    background-color: #3b3530;
    color: #e2dcd0;
}

.study-worn .study-title {
    color: #e2dcd0;
}

.study-worn .study-body {
    color: #bfb196;
    text-shadow: 0 0 1px rgba(191, 177, 150, 0.1);
}

.study-worn .kintsugi-heading svg path {
    stroke: #c4a265;
}

/* Content positioning */
.study-content {
    position: relative;
    z-index: 2;
    max-width: 38ch;
    padding: 8vh 0 8vh 11vw;
}

.study-content--offset-right {
    margin-left: auto;
    padding: 8vh 11vw 8vh 0;
}

/* Study typography */
.study-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.5rem, 5vw, 5rem);
    letter-spacing: 0.12em;
    line-height: 1.15;
    color: #4a4540;
    text-transform: lowercase;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px) rotate(0.8deg);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.study-title.revealed {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.study-body {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.85;
    color: #4a4540;
    max-width: 38ch;
    margin-bottom: 1.8rem;
    text-shadow: 0 0 1px rgba(74, 69, 64, 0.1);
    opacity: 0;
    transform: translateY(18px) rotate(0.3deg);
    transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.study-body.revealed {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

/* Kintsugi heading line */
.kintsugi-heading {
    width: 120px;
    height: 6px;
    margin-bottom: 1.5rem;
    overflow: visible;
}

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

.kintsugi-heading svg path {
    stroke: #4a4540;
    opacity: 0.2;
    transition: stroke 0.8s ease, opacity 0.8s ease;
}

/* Kintsugi gold fill — cracks fill from 20% opacity dark to 80% opacity gold */
.kintsugi-heading.gold svg path {
    stroke: #c4a265;
    opacity: 0.8;
}

/* Dark section kintsugi starts as faint crack */
.study-worn .kintsugi-heading svg path {
    stroke: #9a8f82;
    opacity: 0.15;
}

.study-worn .kintsugi-heading.gold svg path {
    stroke: #c4a265;
    opacity: 0.8;
}

/* Water stain rings */
.water-stain {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        circle,
        transparent 30%,
        rgba(212, 196, 168, 0.06) 40%,
        transparent 45%,
        rgba(212, 196, 168, 0.04) 55%,
        transparent 60%,
        rgba(212, 196, 168, 0.03) 72%,
        transparent 80%
    );
}

/* ============================================
   PATINA GALLERY
   ============================================ */
.patina-gallery {
    position: relative;
    min-height: 100vh;
    background-color: #ebe5d9;
    scroll-snap-align: start;
    padding: 10vh 5vw;
    overflow: hidden;
}

/* Wood grain — angle 88deg */
.patina-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            88deg,
            #d4c4a8 0px, #cebfa3 2px, #c8b99e 3px,
            #d1c1a5 5px, #bfb196 7px, #d4c4a8 9px,
            #c5b89b 11px, #d2c2a6 13px, #d4c4a8 16px
        );
    opacity: 0.04;
    pointer-events: none;
}

.gallery-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: 0.12em;
    line-height: 1.15;
    color: #4a4540;
    text-transform: lowercase;
    margin-bottom: 6vh;
    padding-left: 7.3%;
    opacity: 0;
    transform: translateY(20px) rotate(0.5deg);
    transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gallery-title.revealed {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

.gallery-field {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
}

/* Patina blocks */
.patina-block {
    position: absolute;
    border: 1px solid rgba(154, 143, 130, 0.2);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.6s ease;
}

.patina-block.revealed {
    opacity: 1;
}

.patina-block:hover {
    border-color: #b87333;
}

.patina-caption {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.8rem;
    color: #9a8f82;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.patina-block:hover .patina-caption {
    opacity: 1;
}

/* Block textures — each with different wood grain angle / texture type */
.block-1 {
    background:
        repeating-linear-gradient(
            84deg,
            #d4c4a8, #cebfa3 1px, #c8b99e 2px,
            #d1c1a5 4px, #bfb196 6px, #d4c4a8 8px,
            #c5b89b 10px, #d4c4a8 13px
        );
}

.block-2 {
    background:
        radial-gradient(ellipse at 35% 40%, rgba(212, 196, 168, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 65%, rgba(191, 177, 150, 0.25) 0%, transparent 45%),
        #e8e0d3;
}

.block-3 {
    background: #e2dcd0;
    border-top: 2px dashed rgba(154, 143, 130, 0.25);
    border-bottom: 2px dashed rgba(154, 143, 130, 0.25);
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 8px,
        rgba(154, 143, 130, 0.06) 8px,
        rgba(154, 143, 130, 0.06) 9px
    );
}

.block-4 {
    background:
        radial-gradient(circle at 30% 30%, rgba(212, 196, 168, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 65% 70%, rgba(200, 185, 158, 0.12) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(191, 177, 150, 0.08) 0%, transparent 55%),
        linear-gradient(to bottom, #ebe5d9, #e2dcd0);
}

.block-5 {
    background:
        repeating-linear-gradient(
            87deg,
            #cebfa3 0px, #d4c4a8 1px, #c8b99e 3px,
            #bfb196 5px, #d1c1a5 7px, #c5b89b 9px,
            #d4c4a8 12px
        );
}

/* Negative margins for overlap — workshop table feel */
.block-2 {
    margin-left: -12px;
}

.block-4 {
    margin-top: -8px;
}

.block-5 {
    margin-left: -15px;
    margin-top: -10px;
}

/* ============================================
   FINAL VIEWPORT
   ============================================ */
.final-viewport {
    position: relative;
    height: 100vh;
    min-height: 500px;
    background-color: #1a1713;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    overflow: hidden;
}

.kintsugi-crack-final {
    width: 200px;
    margin-bottom: 3rem;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.kintsugi-crack-final.revealed {
    opacity: 1;
}

.kintsugi-crack-final svg {
    width: 100%;
    height: 4px;
}

/* Gold fill transition for final crack */
.kintsugi-crack-final svg path {
    transition: stroke 0.8s ease, opacity 0.8s ease;
}

.kintsugi-crack-final.gold svg path {
    opacity: 0.8;
}

.proverb {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: #c4a265;
    text-align: center;
    max-width: 36ch;
    line-height: 1.6;
    padding: 0 2rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s,
                transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

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

.proverb-attribution {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.8rem;
    color: #9a8f82;
    margin-top: 1.5rem;
    opacity: 0;
    transition: opacity 1s ease 0.8s;
}

.proverb-attribution.revealed {
    opacity: 0.7;
}

/* ============================================
   PADDLE CURSOR FOLLOWER
   ============================================ */
.paddle-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.paddle-cursor.active {
    opacity: 1;
}

.paddle-cursor.clicking {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

/* Hide paddle cursor on touch devices */
@media (hover: none) {
    .paddle-cursor { display: none; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .study-content {
        padding: 6vh 7vw;
        max-width: none;
    }

    .study-content--offset-right {
        margin-left: 0;
        padding: 6vh 7vw;
    }

    .gallery-field {
        height: auto;
        min-height: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0 5vw;
    }

    .patina-block {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: 160px !important;
        margin: 0 !important;
    }

    .patina-caption {
        opacity: 0.7;
    }

    .opening-title {
        font-size: clamp(14vw, 18vw, 220px);
    }

    .opening {
        padding: 0 0 15vh 6vw;
    }

    .breath {
        height: 30vh;
        min-height: 200px;
    }
}