/* ═══════════════════════════════════════════
   PRESSED FLOWERS — Dark Album
   Warm charcoal · Hand-placed photos · Vine thread
   Sepia→color bloom · B&W→color wipe on feature
   ═══════════════════════════════════════════ */

:root {
    /* Palette — warm charcoal, inspired by Edge forced-dark */
    --bg:         #2e2a25;
    --bg-deep:    #241f1b;
    --text:       #e8e2d8;
    --text-muted: rgba(232, 226, 216, .5);
    --sage:       #8a9a7b;
    --sage-light: #9aad8a;
    --gold:       #c6a882;
    --shadow:     rgba(0, 0, 0, .4);

    /* Type */
    --serif:  'Cormorant Garamond', Georgia, serif;
    --script: 'Pinyon Script', cursive;
    --sans:   'Karla', sans-serif;

    /* Spacing */
    --pad: clamp(1.5rem, 6vw, 3.5rem);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; }

body {
    background: var(--bg);
    color: var(--text);
    font: 300 clamp(.875rem, 2.5vw, 1rem)/1.8 var(--sans);
    overflow-x: hidden;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ═══════════ TEXTURE ═══════════ */
.texture {
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; opacity: .2;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' opacity='.06'/%3E%3C/svg%3E") repeat;
    background-size: 200px; mix-blend-mode: screen;
}

/* ═══════════ VINE ═══════════ */
.vine {
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 2px; height: 100%; z-index: 0;
    pointer-events: none; overflow: visible;
}
.vine-path { stroke: var(--sage); opacity: .15; stroke-dasharray: 4 8; }

/* ═══════════ PRELOADER ═══════════ */
#preloader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
}
.pre-inner { text-align: center; }
.pre-ornament {
    font-size: .55rem; color: var(--sage);
    letter-spacing: .5em; opacity: 0; margin-bottom: 1.25rem;
}
.pre-names {
    font: 300 clamp(2rem, 8vw, 4rem)/1.15 var(--serif);
    letter-spacing: .05em; opacity: 0; transform: translateY(10px);
}
.pre-names em {
    font: normal clamp(1.3rem, 5vw, 2.6rem) var(--script);
    color: var(--sage-light); margin: 0 .12em;
}
.pre-date {
    font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--text-muted); margin-top: .75rem; opacity: 0;
}
.pre-rule {
    width: 0; height: 1px; background: var(--sage);
    margin: 1.25rem auto 0; opacity: .4;
}

/* ═══════════ HERO ═══════════ */
.hero {
    min-height: 100svh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 8vh var(--pad) 4vh; text-align: center;
}
.hero-text { margin-bottom: 3rem; opacity: 0; transform: translateY(20px); }
.hero-kicker {
    font-size: .6rem; font-weight: 300;
    letter-spacing: .4em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: .75rem;
}
.hero-names {
    display: flex; flex-direction: column; align-items: center;
    font: 300 1em var(--serif);
}
.name-line {
    font-size: clamp(3rem, 13vw, 6.5rem);
    line-height: .95; letter-spacing: .03em;
}
.name-amp {
    font: clamp(1.75rem, 6vw, 3rem) var(--script);
    color: var(--sage-light); margin: .12em 0;
}
.hero-date {
    font-size: .6rem; font-weight: 300;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 1rem;
}

/* ═══════════ PLACED PHOTOS ═══════════ */
.placed-photo {
    position: relative; width: 80%; max-width: 360px;
    margin: 0 auto; opacity: 0; transform: translateY(24px);
}
.placed-photo img {
    aspect-ratio: 3/4; border-radius: 2px;
    box-shadow: 0 4px 25px var(--shadow), 0 1px 3px rgba(0,0,0,.2);
    filter: sepia(.5) saturate(.7) brightness(1.02);
    transition: filter 1.8s var(--ease);
}
.placed-photo.visible img { filter: sepia(0) saturate(1) brightness(1); }

/* Variants */
.wide      { width: 90%; max-width: 500px; }
.wide img  { aspect-ratio: 16/10; }
.circle    { width: 50%; max-width: 200px; }
.circle img { aspect-ratio: 1/1; border-radius: 50%; }
.right     { margin: 2.5rem 0 0 auto; }
.feature   { width: 95%; max-width: 520px; }

/* Corner mounts */
.corner {
    position: absolute; width: 14px; height: 14px;
    border: solid var(--gold); border-width: 0;
    opacity: .3; z-index: 2;
}
.tl { top: -4px; left: -4px;   border-top-width: 1px; border-left-width: 1px; }
.tr { top: -4px; right: -4px;  border-top-width: 1px; border-right-width: 1px; }
.bl { bottom: -4px; left: -4px;  border-bottom-width: 1px; border-left-width: 1px; }
.br { bottom: -4px; right: -4px; border-bottom-width: 1px; border-right-width: 1px; }
.circle .corner { display: none; }

/* ═══════════ WIPE FRAME (Inside placed-photo) ═══════════ */
.wipe-frame {
    position: relative; width: 100%;
    aspect-ratio: 16/10; overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 4px 25px var(--shadow), 0 1px 3px rgba(0,0,0,.2);
}
.wipe-frame img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    box-shadow: none; filter: none;
}
.wipe-bw { filter: grayscale(1) contrast(1.05) brightness(1.02) !important; }
.wipe-overlay {
    position: absolute; inset: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

/* ═══════════ PIN WRAP (Dedicated pinnable block) ═══════════ */
.pin-wrap {
    position: relative;
    width: 100%;
}
.pin-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem var(--pad);
}

/* The wipe photo — always visible, no fade-in */
.wipe-photo {
    position: relative;
    width: 90%;
    max-width: 500px;
    transform: rotate(-1.2deg);
}

.wipe-caption {
    font: italic 300 clamp(1rem, 3vw, 1.2rem)/2 var(--serif);
    color: var(--text-muted);
    max-width: 30ch;
    margin-top: 1.5rem;
    text-align: center;
    align-self: center;
}

/* ═══════════ CHAPTERS ═══════════ */
.chapter {
    padding: 5rem var(--pad) 2rem;
}
.dot-label {
    display: flex; align-items: center; gap: .75rem;
    margin-bottom: 2rem; opacity: 0;
}
.dot {
    display: block; width: 6px; height: 6px;
    border-radius: 50%; background: var(--sage);
}
.dot-label {
    font: italic 300 clamp(1.25rem, 4vw, 1.75rem) var(--serif);
    letter-spacing: .04em;
}
.caption {
    font: italic 300 clamp(1rem, 3vw, 1.2rem)/2 var(--serif);
    color: var(--text-muted); max-width: 30ch;
    margin-top: 1.5rem; opacity: 0; transform: translateY(12px);
}
.right-text { margin-left: auto; text-align: right; }

/* ═══════════ BREATH ═══════════ */
.breath {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 5rem var(--pad); text-align: center;
}
.whisper {
    font: clamp(1.5rem, 5vw, 2.25rem) var(--script);
    color: var(--sage-light); margin-top: 1.5rem;
    opacity: 0; transform: translateY(10px);
}

/* ═══════════ CLOSING ═══════════ */
.closing {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 50vh; padding: 5rem var(--pad) 6rem; text-align: center;
}
.ornament {
    font-size: .5rem; color: var(--sage);
    letter-spacing: .5em; opacity: 0;
}
.closing-line {
    font: italic 300 clamp(1.5rem, 5vw, 2.25rem)/1.4 var(--serif);
    margin: 1.5rem 0; opacity: 0; transform: translateY(12px);
}
.closing-rule {
    width: 0; height: 1px; background: var(--sage);
    margin: 0 auto 1.25rem; opacity: .4;
}
.closing-names {
    font: 300 clamp(1.125rem, 3.5vw, 1.5rem) var(--serif);
    letter-spacing: .06em; opacity: 0;
}
.closing-year {
    font-size: .6rem; letter-spacing: .3em;
    text-transform: uppercase; color: var(--text-muted);
    margin-top: .5rem; opacity: 0;
}

/* ═══════════ SCROLLBAR ═══════════ */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(138,154,123,.3); border-radius: 10px; }
::selection { background: var(--sage); color: var(--bg); }

/* ═══════════ DESKTOP ═══════════ */
@media (min-width: 768px) {
    .hero { padding-top: 12vh; }
    .placed-photo { max-width: 420px; }
    .wide { max-width: 600px; }
    .feature { max-width: 600px; }
    .chapter { max-width: 700px; margin: 0 auto; padding-top: 7rem; }
    .breath { padding: 7rem var(--pad); }
}

@media (min-width: 1200px) {
    .chapter { max-width: 850px; }
    .wide { max-width: 700px; }
    .feature { max-width: 700px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}