/* amamya.net v2 — Blobitecture Sepia Salon */

:root {
    --wax-ink: #1A130B;
    --walnut-sepia: #2E2117;
    --fossil-amber: #A87642;
    --candle-cream: #D8AF7B;
    --ivory-wax: #F0E2C9;
    --dusk-plum: #5A3849;
    --flame-tangerine: #C24B22;

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-soft: cubic-bezier(0.22, 1.0, 0.36, 1.0);
    --ease-slow: cubic-bezier(0.4, 0.0, 0.2, 1);

    --pad-x: 6vw;
    --rhythm: 28px;
}

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

html, body {
    background: var(--wax-ink);
    color: var(--candle-cream);
    font-family: 'Commissioner', 'Inter', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(17px, 1.25vw, 20px);
    line-height: 1.7;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    position: relative;
    background:
        radial-gradient(ellipse at 24% 18%, rgba(168, 118, 66, 0.10), transparent 56%),
        radial-gradient(ellipse at 78% 78%, rgba(90, 56, 73, 0.12), transparent 60%),
        var(--wax-ink);
}

::selection {
    background: var(--fossil-amber);
    color: var(--wax-ink);
}

img, svg {
    display: block;
    max-width: 100%;
}

/* Grain overlay (subtle candle-lit film) */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image:
        radial-gradient(rgba(240, 226, 201, 0.6) 1px, transparent 1px),
        radial-gradient(rgba(26, 19, 11, 0.6) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 2px;
}

/* Header salon-marker (top-line cipher + nav) */
.salon-marker {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    padding: 22px var(--pad-x) 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(26, 19, 11, 0.86), rgba(26, 19, 11, 0));
}
.marker-line {
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--candle-cream);
    pointer-events: auto;
}
.marker-label {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ivory-wax);
    opacity: 0.78;
}
.marker-dot {
    width: 5px; height: 5px;
    background: var(--flame-tangerine);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--flame-tangerine);
    animation: dotPulse 800ms ease-in-out infinite alternate;
}
@keyframes dotPulse {
    from { opacity: 0.55; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1.08); }
}
.salon-nav {
    display: flex;
    gap: 22px;
    pointer-events: auto;
}
.nav-item {
    color: var(--candle-cream);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.55;
    transition: opacity 600ms var(--ease-slow), color 600ms var(--ease-slow);
    padding: 6px 0;
}
.nav-item .nav-num {
    color: var(--fossil-amber);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.nav-item:hover, .nav-item.is-active {
    opacity: 1;
    color: var(--ivory-wax);
}
.nav-item.is-active .nav-num {
    color: var(--flame-tangerine);
}

/* Main: full-bleed split */
main {
    width: 100%;
    position: relative;
    z-index: 10;
}

.section {
    width: 100%;
    display: grid;
    grid-template-columns: 56% 44%;
    position: relative;
    overflow: hidden;
}

.section-foyer { min-height: 100vh; }
.section-tasting { min-height: 140vh; }
.section-letters { min-height: 160vh; }
.section-spread { min-height: 140vh; }
.section-colophon { min-height: 100vh; }

.panel {
    position: relative;
    padding: var(--pad-x);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.panel-left {
    background: var(--wax-ink);
    overflow: hidden;
}
.panel-right {
    background: var(--walnut-sepia);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.panel-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(194, 75, 34, 0.14), transparent 58%),
        radial-gradient(ellipse at 50% 18%, rgba(216, 175, 123, 0.10), transparent 70%);
    pointer-events: none;
}

/* Blob seam between panels (per section) */
.seam-svg {
    position: absolute;
    top: 0;
    right: -2px;
    width: 22px;
    height: 100%;
    z-index: 4;
    overflow: visible;
    pointer-events: none;
}
.seam-path {
    fill: none;
    stroke: var(--candle-cream);
    stroke-width: 1.6;
    stroke-opacity: 0.55;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    filter: drop-shadow(0 0 6px rgba(216, 175, 123, 0.35));
    animation: drawSeam 2.6s var(--ease-slow) 0.6s forwards, seamMorph 14s ease-in-out infinite alternate;
}
@keyframes drawSeam {
    to { stroke-dashoffset: 0; }
}
@keyframes seamMorph {
    0%   { d: path("M50,0 C30,80 80,200 40,320 C0,440 90,560 30,700 C0,820 80,920 50,1000"); }
    100% { d: path("M50,0 C70,80 20,180 60,300 C100,420 10,540 70,660 C100,800 20,920 50,1000"); }
}

/* Global seam overlay (full-page seam ribbon) */
.seam-overlay {
    position: fixed;
    top: 0;
    left: 56%;
    width: 30px;
    height: 100vh;
    margin-left: -15px;
    pointer-events: none;
    z-index: 60;
}
.seam-overlay svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.global-seam {
    fill: none;
    stroke: var(--candle-cream);
    stroke-width: 1;
    stroke-opacity: 0.18;
    filter: drop-shadow(0 0 8px rgba(216, 175, 123, 0.18));
    animation: globalSeamMorph 16s ease-in-out infinite alternate;
}
@keyframes globalSeamMorph {
    0%   { d: path("M50,0 C30,80 70,180 40,300 C10,420 80,540 30,660 C0,780 80,900 50,1000"); }
    100% { d: path("M50,0 C70,80 30,200 60,320 C90,440 20,560 70,680 C100,800 20,920 50,1000"); }
}

/* === SECTION 0: FOYER === */
.foyer-blob-wrap {
    position: relative;
    width: min(60vw, 720px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 30px 80px rgba(168, 118, 66, 0.35));
    animation: heroAssemble 2.4s var(--spring) 0.2s both, heroDrift 12s ease-in-out infinite alternate 2.6s;
}
.hero-blob-path {
    animation: blobMorphA 10s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
}
@keyframes heroAssemble {
    0% { transform: scale(0.04); opacity: 0; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes heroDrift {
    from { transform: translateX(-12px) scale(1); }
    to   { transform: translateX(12px) scale(1.015); }
}
@keyframes blobMorphA {
    0%   { d: path("M0,-160 C90,-160 170,-90 170,0 C170,90 90,160 0,160 C-90,160 -170,90 -170,0 C-170,-90 -90,-160 0,-160 Z"); }
    50%  { d: path("M10,-170 C100,-160 180,-80 165,10 C150,100 80,170 -10,160 C-100,150 -180,80 -165,-10 C-150,-100 -80,-170 10,-170 Z"); }
    100% { d: path("M-8,-156 C86,-170 174,-100 172,-4 C170,92 92,166 -6,162 C-100,158 -174,86 -170,-8 C-166,-100 -86,-160 -8,-156 Z"); }
}

.wordmark {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--ivory-wax);
    pointer-events: none;
}
.wordmark-text {
    display: block;
    font-weight: 600;
    font-size: clamp(48px, 7vw, 116px);
    letter-spacing: -0.005em;
    line-height: 1;
    color: var(--ivory-wax);
    text-shadow:
        0 2px 0 rgba(26, 19, 11, 0.35),
        0 18px 60px rgba(194, 75, 34, 0.18);
}
.wordmark-letters {
    display: block;
    font-weight: 600;
    font-size: clamp(48px, 7vw, 116px);
    letter-spacing: -0.005em;
    line-height: 1;
    color: var(--ivory-wax);
}
.wordmark-letters .ltr {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 800ms var(--spring), transform 1000ms var(--spring);
}
.wordmark-letters .ltr.is-in {
    opacity: 1;
    transform: translateY(0);
}
.wordmark-text {
    display: none;
}
.wordmark.is-fallback .wordmark-text { display: block; }
.wordmark.is-fallback .wordmark-letters { display: none; }

.wordmark-sub {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--candle-cream);
    opacity: 0;
    animation: fadeUp 1.2s var(--spring-soft) 2.0s forwards;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 0.78; transform: translateY(0); }
}

.foyer-cipher {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    color: var(--fossil-amber);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeUp 1.2s var(--spring-soft) 2.2s forwards;
}

/* SECTION 0 right: candle still */
.candle-still {
    position: relative;
    width: min(70%, 360px);
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.candle-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.candle-svg.tall { height: 90vh; }

.flame {
    transform-origin: 150px 220px;
    animation: flameFlicker 800ms ease-in-out infinite alternate;
}
@keyframes flameFlicker {
    0%   { opacity: 0.78; transform: scale(0.96) translateY(0); }
    100% { opacity: 1.0;  transform: scale(1.04) translateY(-2px); }
}
.flame-halo {
    opacity: 0.32;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: haloFlicker 800ms ease-in-out infinite alternate;
}
@keyframes haloFlicker {
    0%   { opacity: 0.22; transform: scale(0.96); }
    100% { opacity: 0.38; transform: scale(1.06); }
}
.flame-halo.small {
    opacity: 0.42;
    animation: haloFlicker 800ms ease-in-out infinite alternate;
}

.candle-still-foyer .candle-svg { animation: fadeInSlow 2.6s var(--ease-slow) 0.4s both; }
.candle-still-hand .candle-svg { animation: fadeInSlow 1.6s var(--ease-slow) both; }
.candle-still-pool .candle-svg { animation: poolZoom 12s ease-in-out infinite alternate; }
@keyframes fadeInSlow {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes poolZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.04); }
}

.still-caption {
    position: absolute;
    bottom: 44px;
    left: var(--pad-x);
    right: var(--pad-x);
    display: flex;
    gap: 12px;
    align-items: baseline;
    color: var(--candle-cream);
    z-index: 3;
}
.caption-num {
    font-variant-numeric: tabular-nums;
    color: var(--fossil-amber);
    font-size: 13px;
    letter-spacing: 0.12em;
}
.caption-text {
    font-style: italic;
    font-size: 14px;
    opacity: 0.72;
}

/* === Section eyebrow + title (shared) === */
.section-eyebrow {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    color: var(--fossil-amber);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 24px;
}
.section-eyebrow .eyebrow-num {
    font-variant-numeric: tabular-nums;
    color: var(--flame-tangerine);
}
.section-eyebrow::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--fossil-amber);
    opacity: 0.5;
}
.section-title {
    font-weight: 600;
    color: var(--ivory-wax);
    font-size: clamp(36px, 4.6vw, 72px);
    letter-spacing: -0.005em;
    line-height: 1.05;
    margin-bottom: 56px;
    max-width: 16ch;
}

/* === SECTION 1: WAX TASTING === */
.section-tasting .panel-left {
    padding-top: 18vh;
    padding-bottom: 12vh;
}
.tincture-blobs {
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin-top: 30px;
}
.tincture {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 36px;
    align-items: center;
    opacity: 0;
    transform: scale(0.86) translateY(20px);
    transition: opacity 1.0s var(--spring), transform 1.0s var(--spring);
}
.tincture.is-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.tincture-blob {
    width: 220px;
    height: 220px;
    overflow: visible;
    filter: drop-shadow(0 14px 40px rgba(168, 118, 66, 0.35));
}
.tincture[data-blob="a"] .tincture-blob { animation: blobMorphA 9s ease-in-out infinite alternate, drift 12s ease-in-out infinite alternate; transition: animation-duration 600ms; }
.tincture[data-blob="b"] .tincture-blob { animation: blobMorphB 11s ease-in-out infinite alternate, drift 14s ease-in-out infinite alternate; animation-delay: -2s, -3s; }
.tincture[data-blob="c"] .tincture-blob { animation: blobMorphC 10s ease-in-out infinite alternate, drift 13s ease-in-out infinite alternate; animation-delay: -4s, -1s; }
.tincture:hover .tincture-blob {
    animation-duration: 5s, 12s;
}
.tincture:hover .tincture-name {
    transform: scale(1.04);
}
.tincture-name {
    transition: transform 700ms var(--spring);
    transform-origin: left center;
}
@keyframes blobMorphB {
    0%   { d: path("M-20,-150 C80,-160 170,-80 160,20 C155,110 70,160 -30,150 C-130,140 -170,60 -160,-30 C-150,-110 -100,-140 -20,-150 Z"); }
    100% { d: path("M0,-160 C100,-150 175,-60 158,30 C144,120 80,170 -20,162 C-120,154 -174,70 -166,-30 C-160,-120 -90,-160 0,-160 Z"); }
}
@keyframes blobMorphC {
    0%   { d: path("M10,-145 C110,-155 165,-55 155,40 C145,130 40,160 -50,145 C-140,130 -165,40 -155,-50 C-145,-120 -70,-140 10,-145 Z"); }
    100% { d: path("M-10,-156 C100,-160 168,-72 160,30 C152,128 30,168 -60,154 C-150,140 -172,50 -160,-40 C-148,-128 -82,-156 -10,-156 Z"); }
}
@keyframes drift {
    from { transform: translateX(-12px); }
    to   { transform: translateX(12px); }
}

.tincture-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tincture-num {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--fossil-amber);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
.tincture-name {
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 600;
    color: var(--ivory-wax);
    letter-spacing: -0.005em;
    line-height: 1.05;
}
.tincture-note {
    color: var(--candle-cream);
    max-width: 36ch;
    font-style: italic;
    line-height: 1.65;
}

/* SECTION 1 right: hand-held candle */
.section-tasting .panel-right .candle-svg {
    width: min(70%, 360px);
    height: 80vh;
}
.candle-still-hand { width: 100%; height: 80vh; }

/* === SECTION 2: LETTERS === */
.section-letters .panel-left {
    padding-top: 16vh;
    padding-bottom: 12vh;
    display: flex;
    flex-direction: column;
}
.lattice-wrap {
    position: relative;
    flex: 1;
    margin-top: 28px;
    min-height: 60vh;
}
.lattice-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 20px 60px rgba(168, 118, 66, 0.25));
}
.lattice-blob {
    transform-origin: center;
    transform-box: fill-box;
}
.lattice-blob.b1 { animation: drift 14s ease-in-out infinite alternate, morphRot 18s ease-in-out infinite alternate; }
.lattice-blob.b2 { animation: drift 12s ease-in-out infinite alternate -3s, morphRot 16s ease-in-out infinite alternate -2s; }
.lattice-blob.b3 { animation: drift 16s ease-in-out infinite alternate -5s, morphRot 20s ease-in-out infinite alternate -4s; }
.lattice-blob.b4 { animation: drift 13s ease-in-out infinite alternate -2s, morphRot 17s ease-in-out infinite alternate -6s; }
.lattice-blob.b5 { animation: drift 15s ease-in-out infinite alternate -4s, morphRot 22s ease-in-out infinite alternate -1s; }
@keyframes morphRot {
    from { transform: scale(0.96) rotate(-2deg); }
    to   { transform: scale(1.04) rotate(3deg); }
}

.section-letters .panel-right {
    padding-top: 16vh;
    padding-bottom: 12vh;
}
.letters-stack {
    display: flex;
    flex-direction: column;
    gap: 44px;
    width: 100%;
    max-width: 460px;
}
.letter {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    opacity: 0;
    transform: scale(0.86) translateY(20px);
    transition: opacity 1.0s var(--spring), transform 1.0s var(--spring);
}
.letter.is-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.letter-vignette {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    box-shadow: 0 18px 50px rgba(26, 19, 11, 0.6);
}
.letter-vignette svg {
    width: 100%;
    height: 100%;
}
.letter-body {
    position: relative;
    padding: 14px 4px 0 18px;
}
.wax-drop {
    position: absolute;
    top: 12px;
    left: -4px;
    width: 12px;
    height: 14px;
    background: var(--dusk-plum);
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    box-shadow: 0 4px 10px rgba(90, 56, 73, 0.5);
    transition: transform 800ms var(--spring), width 800ms var(--spring), height 800ms var(--spring);
}
.letter:hover .wax-drop {
    transform: scale(1.15);
    animation: dropPulse 1.4s ease-in-out infinite alternate;
}
@keyframes dropPulse {
    from { transform: scale(1.06); }
    to   { transform: scale(1.22); }
}
.letter-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fossil-amber);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
    font-weight: 500;
}
.letter-text {
    color: var(--candle-cream);
    font-size: 17px;
    line-height: 1.75;
    font-style: italic;
    position: relative;
}
.letter-text em { font-style: italic; }
.letter:hover .letter-text {
    background-image: linear-gradient(var(--dusk-plum), var(--dusk-plum));
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    animation: drawUnderline 1.4s var(--ease-slow) forwards;
}
@keyframes drawUnderline {
    to { background-size: 100% 1px; }
}

/* === SECTION 3: SALON SPREAD === */
.section-spread .panel-left {
    padding: 0;
    overflow: visible;
}
.spread-blob-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 140vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spread-blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 30px 100px rgba(168, 118, 66, 0.35));
}
.spread-path {
    animation: spreadMorph 14s ease-in-out infinite alternate;
}
@keyframes spreadMorph {
    0%   { d: path("M-200,-420 C-40,-460 180,-440 280,-340 C380,-220 360,-40 320,140 C280,320 180,420 0,440 C-180,460 -340,360 -360,180 C-380,0 -340,-340 -200,-420 Z"); }
    100% { d: path("M-220,-400 C-60,-470 200,-430 300,-310 C400,-180 350,0 310,170 C270,340 160,440 -20,460 C-200,470 -350,340 -380,160 C-400,-20 -360,-330 -220,-400 Z"); }
}
.spread-prose {
    position: relative;
    z-index: 4;
    max-width: 38ch;
    padding: 60px 30px;
    color: var(--wax-ink);
}
.spread-prose .section-eyebrow {
    color: var(--walnut-sepia);
}
.spread-prose .section-eyebrow .eyebrow-num {
    color: var(--flame-tangerine);
}
.spread-prose .section-eyebrow::before {
    background: var(--walnut-sepia);
    opacity: 0.7;
}
.spread-title {
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.15;
    color: var(--wax-ink);
    margin-bottom: 28px;
    letter-spacing: -0.005em;
}
.spread-prose p {
    color: var(--walnut-sepia);
    margin-bottom: 22px;
    line-height: 1.78;
}
.pull-quote {
    position: relative;
    padding-left: 26px;
    color: var(--dusk-plum) !important;
    font-style: italic;
    font-size: 1.05em;
    margin: 28px 0 !important;
}
.quote-drop {
    position: absolute;
    top: 4px;
    left: 0;
    width: 10px;
    height: 12px;
    background: var(--dusk-plum);
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    box-shadow: 0 4px 12px rgba(90, 56, 73, 0.6);
    transition: width 700ms var(--spring), height 700ms var(--spring);
}
.pull-quote:hover .quote-drop {
    width: 16px;
    height: 18px;
}
.spread-sign {
    color: var(--dusk-plum) !important;
    font-style: italic;
    font-size: 14px;
    margin-top: 36px !important;
    letter-spacing: 0.04em;
}

.section-spread .panel-right {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.candle-still-pool {
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

/* === SECTION 4: COLOPHON === */
.section-colophon {
    display: block;
    background: var(--wax-ink);
    position: relative;
    min-height: 100vh;
}
.merged-blob-wrap {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12vh var(--pad-x);
}
.merged-blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 40px 120px rgba(168, 118, 66, 0.32));
}
.merged-path {
    animation: mergedMorph 14s ease-in-out infinite alternate;
}
@keyframes mergedMorph {
    0%   { d: path("M-440,-180 C-300,-260 -100,-240 0,-220 C150,-200 320,-260 420,-180 C500,-100 480,80 400,180 C300,260 100,260 -50,240 C-220,220 -380,260 -460,160 C-520,80 -500,-100 -440,-180 Z"); }
    50%  { d: path("M-460,-160 C-320,-280 -80,-260 20,-230 C170,-210 340,-280 440,-160 C520,-60 470,100 380,200 C280,290 80,270 -70,250 C-240,230 -400,260 -480,140 C-540,60 -520,-80 -460,-160 Z"); }
    100% { d: path("M-420,-200 C-280,-260 -120,-220 20,-200 C170,-180 320,-280 440,-180 C530,-90 490,90 400,190 C300,280 100,250 -50,230 C-220,210 -370,250 -460,150 C-520,80 -500,-100 -420,-200 Z"); }
}
.colophon-content {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 720px;
    padding: 0 20px;
    color: var(--wax-ink);
}
.colophon-content .section-eyebrow {
    justify-content: center;
    color: var(--walnut-sepia);
    margin-bottom: 36px;
}
.colophon-content .section-eyebrow .eyebrow-num { color: var(--flame-tangerine); }
.colophon-content .section-eyebrow::before { background: var(--walnut-sepia); opacity: 0.7; }
.colophon-line {
    color: var(--walnut-sepia);
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.65;
}
.colophon-line.big {
    color: var(--wax-ink);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 40px);
    letter-spacing: -0.005em;
    margin-top: 30px;
    margin-bottom: 36px;
    line-height: 1.15;
}
.colophon-meta {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dusk-plum);
    font-weight: 500;
}
.colophon-meta .dot { color: var(--flame-tangerine); }

/* === IN-VIEW ANIMATIONS (bounce-enter) === */
.section-eyebrow,
.section-title,
.tincture,
.letter,
.colophon-line,
.spread-prose p,
.foyer-cipher,
.still-caption {
    will-change: transform, opacity;
}

/* Generic bounce-enter trigger for non-tincture/letter */
.bounce-target {
    opacity: 0;
    transform: scale(0.86) translateY(20px);
    transition: opacity 1.0s var(--spring), transform 1.0s var(--spring);
}
.bounce-target.is-in {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Section-progress markers (right margin) */
.section-marker {
    position: absolute;
    top: 6vh;
    right: var(--pad-x);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--fossil-amber);
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
    z-index: 5;
}

/* Responsive collapse */
@media (max-width: 900px) {
    .section {
        grid-template-columns: 1fr;
    }
    .section-foyer, .section-tasting, .section-letters, .section-spread, .section-colophon {
        min-height: auto;
    }
    .panel {
        min-height: auto;
        padding: 80px 8vw;
    }
    .panel-right { min-height: 80vh; }
    .salon-nav { display: none; }
    .seam-overlay { display: none; }
    .seam-svg { display: none; }
    .section-tasting .panel-left { padding-top: 80px; }
    .section-letters .panel-left { padding-top: 80px; }
    .tincture { grid-template-columns: 1fr; gap: 14px; }
    .tincture-blob { width: 180px; height: 180px; }
    .candle-still, .candle-still-hand { height: 60vh; }
    .candle-still-pool { min-height: 80vh; }
    .spread-prose { padding: 80px 20px; }
}