/* ============================================================
   amamya.bar — Wabi-Sabi Forest Sanctum
   ============================================================ */

:root {
    --hemp-paper: #F2EDE2;
    --aged-linen: #E3DCC9;
    --cedar-forest: #1F3D2A;
    --moss-velvet: #3F5A47;
    --pale-sage: #88A48E;
    --matcha-gold: #C3A86D;
    --ink-deep: #1A1A16;

    --column-max: 620px;
    --gutter-pad: 4vw;

    --serif: "Cormorant Garamond", "EB Garamond", "Georgia", serif;
    --sans: "Inter", -apple-system, system-ui, sans-serif;

    --rhythm: 32px;
    --section-gap: 12vh;

    --shimmer-duration: 1.6s;
    --shimmer-cascade: 280ms;
}

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

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(227, 220, 201, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(136, 164, 142, 0.12) 0%, transparent 60%),
        linear-gradient(180deg, var(--hemp-paper) 0%, var(--hemp-paper) 50%, #EEE7D5 100%);
    background-attachment: fixed;
    color: var(--cedar-forest);
    font-family: var(--serif);
    font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
    line-height: 1.85;
    min-height: 100vh;
    position: relative;
}

/* Paper grain overlay — subtle noise via inline-ish gradient texture */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 13% 21%, rgba(63, 90, 71, 0.04) 0 1px, transparent 2px),
        radial-gradient(circle at 67% 49%, rgba(63, 90, 71, 0.04) 0 1px, transparent 2px),
        radial-gradient(circle at 83% 78%, rgba(63, 90, 71, 0.04) 0 1px, transparent 2px),
        radial-gradient(circle at 31% 87%, rgba(63, 90, 71, 0.04) 0 1px, transparent 2px),
        radial-gradient(circle at 45% 12%, rgba(63, 90, 71, 0.04) 0 1px, transparent 2px);
    background-size: 17px 23px, 19px 29px, 23px 31px, 29px 37px, 31px 41px;
}

/* ============================================================
   Marble column ghosts
   ============================================================ */

.column-ghost {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 110px;
    pointer-events: auto;
    z-index: 2;
    opacity: 0;
    transition: opacity 1.2s ease-out;
    filter: blur(0.4px);
}

.column-ghost--left {
    left: calc(50% - var(--column-max) / 2 - 130px);
}

.column-ghost--right {
    right: calc(50% - var(--column-max) / 2 - 130px);
    transform: scaleX(-1);
}

.column-ghost svg {
    width: 100%;
    height: 100%;
    display: block;
}

.column-ghost.is-visible {
    opacity: 0.32;
}

body.is-menu-active .column-ghost.is-visible {
    opacity: 0.48;
}

.column-ghost:hover {
    opacity: 0.72 !important;
    transition: opacity 600ms ease-out;
}

@media (max-width: 1100px) {
    .column-ghost {
        width: 70px;
    }
    .column-ghost--left {
        left: -10px;
    }
    .column-ghost--right {
        right: -10px;
    }
}

@media (max-width: 720px) {
    .column-ghost {
        display: none;
    }
}

/* ============================================================
   Bokeh field — drifting dots
   ============================================================ */

.bokeh-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.bokeh-dot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(136, 164, 142, 0.55) 0%, rgba(136, 164, 142, 0.18) 50%, rgba(136, 164, 142, 0) 75%);
    filter: blur(2px);
    animation: drift 12s ease-in-out infinite;
}

.bokeh-dot--1 { width: 9px;  height: 9px;  left: 8%;  bottom: 12%; animation-delay: -0.5s; }
.bokeh-dot--2 { width: 7px;  height: 7px;  left: 18%; bottom: 22%; animation-delay: -2.1s; }
.bokeh-dot--3 { width: 10px; height: 10px; left: 86%; bottom: 8%;  animation-delay: -4.4s; }
.bokeh-dot--4 { width: 6px;  height: 6px;  left: 78%; bottom: 28%; animation-delay: -6.0s; }
.bokeh-dot--5 { width: 8px;  height: 8px;  left: 50%; bottom: 5%;  animation-delay: -8.2s; }
.bokeh-dot--6 { width: 7px;  height: 7px;  left: 32%; bottom: 6%;  animation-delay: -10.0s; }
.bokeh-dot--7 { width: 9px;  height: 9px;  left: 64%; bottom: 18%; animation-delay: -1.8s; }

@keyframes drift {
    0%   { transform: translate(0, 0) scale(1);   opacity: 0.65; }
    25%  { transform: translate(8px, -12px) scale(1.06); opacity: 0.85; }
    50%  { transform: translate(14px, -22px) scale(1);  opacity: 0.5; }
    75%  { transform: translate(6px, -10px) scale(0.96); opacity: 0.75; }
    100% { transform: translate(0, 0) scale(1);   opacity: 0.65; }
}

body.is-transitioning .bokeh-dot {
    animation-duration: 18s;
}

/* ============================================================
   Chapbook — single column main
   ============================================================ */

.chapbook {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: var(--column-max);
    margin: 0 auto;
    padding: 0 var(--gutter-pad);
}

.section {
    position: relative;
    padding: var(--section-gap) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section + .section {
    margin-top: 0;
}

.section--threshold {
    min-height: 100vh;
    justify-content: center;
}

.section--approach {
    min-height: 100vh;
}

.section--menu {
    min-height: 140vh;
}

.section--tea {
    min-height: 120vh;
    justify-content: center;
}

.section--colophon {
    min-height: 100vh;
}

/* ============================================================
   Section markers — old-style figures in matcha gold
   ============================================================ */

.section-marker {
    position: absolute;
    top: calc(var(--section-gap) - 12px);
    left: -2.4em;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--matcha-gold);
    opacity: 0.6;
    font-feature-settings: "onum" 1;
    letter-spacing: 0.02em;
    user-select: none;
}

.section-marker--roman {
    font-style: italic;
    font-variant-numeric: oldstyle-nums;
}

@media (max-width: 760px) {
    .section-marker {
        left: 0;
        top: calc(var(--section-gap) - 36px);
    }
}

/* ============================================================
   Section labels — small-caps
   ============================================================ */

.section-label {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--moss-velvet);
    margin-bottom: 2.4em;
    font-feature-settings: "smcp" 1;
}

/* ============================================================
   Threshold — hero line
   ============================================================ */

.threshold-line {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 64px);
    line-height: 1.18;
    letter-spacing: 0.005em;
    color: var(--cedar-forest);
    text-align: left;
    cursor: default;
}

.threshold-piece {
    display: block;
    margin: 0.08em 0;
}

.threshold-piece--italic {
    font-style: italic;
    color: var(--moss-velvet);
    font-size: 0.85em;
    padding-left: 1.2em;
    letter-spacing: 0.01em;
}

.bokeh-halo {
    position: absolute;
    right: -40px;
    bottom: 8vh;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 168, 109, 0.18) 0%, rgba(136, 164, 142, 0.10) 35%, rgba(136, 164, 142, 0) 70%);
    filter: blur(8px);
    opacity: 0;
    animation: haloDrift 14s ease-in-out infinite;
    animation-delay: 1.4s;
}

@keyframes haloDrift {
    0%   { opacity: 0;    transform: translate(0, 0); }
    20%  { opacity: 0.7;  transform: translate(-10px, -8px); }
    50%  { opacity: 0.55; transform: translate(-16px, -22px); }
    80%  { opacity: 0.75; transform: translate(-6px, -12px); }
    100% { opacity: 0;    transform: translate(0, 0); }
}

@media (max-width: 720px) {
    .bokeh-halo {
        right: -30px;
        width: 130px;
        height: 130px;
    }
}

/* ============================================================
   Approach paragraph
   ============================================================ */

.approach-paragraph {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(17px, 1.2vw, 20px);
    line-height: 1.85;
    color: var(--cedar-forest);
}

.approach-paragraph .line {
    display: block;
    margin: 0.18em 0;
}

/* ============================================================
   Wabi-sabi rules
   ============================================================ */

.wabi-rule {
    width: 100%;
    height: 4px;
    margin: var(--rhythm) auto;
    opacity: 0.7;
}

.wabi-rule svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.wabi-rule--menu {
    width: 80%;
    height: 4px;
    margin: 0.6em 0 0 0;
    opacity: 0.55;
    transition: opacity 600ms ease-out, filter 600ms ease-out;
}

/* ============================================================
   Tasting Menu
   ============================================================ */

.menu-list {
    list-style: none;
    counter-reset: menu;
}

.menu-item {
    position: relative;
    padding: 0.8em 0 1.6em 2.6em;
    margin-bottom: 1.6em;
    cursor: default;
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-origin: left center;
}

.menu-numeral {
    position: absolute;
    left: 0;
    top: 1em;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--matcha-gold);
    opacity: 0.6;
    font-feature-settings: "onum" 1;
    letter-spacing: 0.02em;
    transition: opacity 480ms ease-out, color 480ms ease-out;
}

.menu-name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.3;
    letter-spacing: 0.005em;
    color: var(--cedar-forest);
    margin-bottom: 0.3em;
}

.menu-desc {
    font-family: var(--serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.7;
    color: var(--moss-velvet);
    transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-origin: left center;
}

.menu-item:hover .menu-desc {
    transform: rotate(0.5deg);
}

.menu-item:hover .menu-numeral {
    opacity: 0.8;
    color: var(--matcha-gold);
}

.menu-item:hover .wabi-rule--menu {
    opacity: 0.75;
    filter: blur(0.2px);
}

/* ============================================================
   Tea ceremony interlude
   ============================================================ */

.section--tea {
    text-align: center;
    align-items: center;
}

.tea-bokeh {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2.4s ease-out;
    filter: blur(4px);
}

.tea-bokeh.is-visible {
    opacity: 0.18;
}

.tea-bokeh svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 100%;
    max-width: 900px;
}

.pull-quote {
    position: relative;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(28px, 3.5vw, 56px);
    line-height: 1.35;
    color: var(--ink-deep);
    text-align: center;
    z-index: 2;
    padding: 0 0.2em;
    cursor: default;
}

.pull-quote p {
    display: inline;
}

.pull-quote-underline {
    display: block;
    height: 1.6px;
    width: 0;
    margin: 0.6em auto 0;
    background: var(--matcha-gold);
    transition: width 1.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.pull-quote:hover .pull-quote-underline {
    width: 64%;
}

/* ============================================================
   Closing colophon
   ============================================================ */

.section--colophon {
    text-align: center;
    align-items: center;
}

.colophon-block {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.colophon-name {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(28px, 3vw, 42px);
    color: var(--cedar-forest);
    letter-spacing: 0.01em;
    margin-bottom: 0.6em;
}

.colophon-address {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.85;
    color: var(--moss-velvet);
    margin-bottom: 2em;
    font-feature-settings: "onum" 1;
}

.colophon-flourish {
    width: 220px;
    height: 60px;
    margin: 1.6em auto;
    overflow: visible;
}

.colophon-flourish svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.colophon-flourish path {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.25, 0.7, 0.2, 1);
}

.colophon-flourish.is-drawn path {
    stroke-dashoffset: 0;
}

.colophon-flourish circle {
    opacity: 0;
    transition: opacity 480ms ease-out 1.2s;
}

.colophon-flourish.is-drawn circle {
    opacity: 1;
}

.colophon-note {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(18px, 1.4vw, 22px);
    color: var(--ink-deep);
    line-height: 1.5;
    margin: 1.4em 0 2.2em;
    letter-spacing: 0.005em;
}

.colophon-hours {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moss-velvet);
    line-height: 1.9;
    font-feature-settings: "smcp" 1, "onum" 1;
}

.figs {
    font-feature-settings: "onum" 1;
    font-style: italic;
}

.footer-mark {
    margin-top: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--moss-velvet);
    opacity: 0.6;
}

.footer-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--matcha-gold);
    opacity: 0.7;
}

.footer-text {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--moss-velvet);
    font-feature-settings: "smcp" 1;
}

/* ============================================================
   Shimmer (skeleton-loading reveal)
   ============================================================ */

.shimmer-target {
    position: relative;
    color: rgba(31, 61, 42, 0.06);
    background-image: linear-gradient(
        110deg,
        rgba(31, 61, 42, 0.06) 0%,
        rgba(31, 61, 42, 0.06) 35%,
        rgba(31, 61, 42, 1) 50%,
        rgba(31, 61, 42, 1) 100%
    );
    background-repeat: no-repeat;
    background-size: 220% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position var(--shimmer-duration) cubic-bezier(0.25, 0.6, 0.2, 1);
}

.shimmer-target.is-revealed {
    background-position: 0% 0;
}

.shimmer-target--slow {
    transition-duration: 2s;
}

.shimmer-target--slower {
    transition-duration: 2.2s;
}

/* On hover of threshold, re-run shimmer (handled via JS by toggling class) */
.threshold-line.shimmer-rerun {
    transition-duration: 1.2s;
}

/* For non-text shimmer targets like blockquote, we apply a softer overlay-style reveal */
.pull-quote.shimmer-target {
    color: rgba(26, 26, 22, 0.08);
    background-image: linear-gradient(
        110deg,
        rgba(26, 26, 22, 0.08) 0%,
        rgba(26, 26, 22, 0.08) 35%,
        rgba(26, 26, 22, 1) 50%,
        rgba(26, 26, 22, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pull-quote.shimmer-target.is-revealed {
    background-position: 0% 0;
}

/* Menu name/desc revealed shimmer */
.menu-name.shimmer-target,
.menu-desc.shimmer-target,
.colophon-address.shimmer-target,
.colophon-name.shimmer-target,
.colophon-hours.shimmer-target,
.colophon-note.shimmer-target,
.section-label.shimmer-target,
.approach-paragraph .line.shimmer-target {
    color: rgba(31, 61, 42, 0.06);
    background-image: linear-gradient(
        110deg,
        rgba(31, 61, 42, 0.08) 0%,
        rgba(31, 61, 42, 0.08) 35%,
        currentColor 50%,
        currentColor 100%
    );
}

/* The trick: use specific text colors per element by overriding currentColor */
.section-label.shimmer-target.is-revealed,
.colophon-hours.shimmer-target.is-revealed {
    -webkit-text-fill-color: var(--moss-velvet);
    background-image: none;
    color: var(--moss-velvet);
    transition: color 1.6s ease-out;
}

.menu-desc.shimmer-target.is-revealed,
.colophon-address.shimmer-target.is-revealed {
    -webkit-text-fill-color: var(--moss-velvet);
    background-image: none;
    color: var(--moss-velvet);
    transition: color 1.6s ease-out;
}

.menu-name.shimmer-target.is-revealed,
.colophon-name.shimmer-target.is-revealed,
.approach-paragraph .line.shimmer-target.is-revealed {
    -webkit-text-fill-color: var(--cedar-forest);
    background-image: none;
    color: var(--cedar-forest);
    transition: color 1.6s ease-out;
}

.colophon-note.shimmer-target.is-revealed,
.pull-quote.shimmer-target.is-revealed {
    -webkit-text-fill-color: var(--ink-deep);
    background-image: none;
    color: var(--ink-deep);
    transition: color 2.0s ease-out;
}

.threshold-line.shimmer-target.is-revealed {
    -webkit-text-fill-color: currentColor;
    background-image: none;
    color: var(--cedar-forest);
    transition: color 1.8s ease-out;
}

.threshold-line.shimmer-target.is-revealed .threshold-piece--italic {
    color: var(--moss-velvet);
}

/* ============================================================
   Smooth scroll
   ============================================================ */

html {
    scroll-behavior: smooth;
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
    background: rgba(195, 168, 109, 0.35);
    color: var(--ink-deep);
}