/* ===== lunar.bar — creamy pastel blobitecture =====
   Palette:
     Rose Cream     #F8F0F0  (primary background)
     Lavender Mist  #F0E8F8  (alternate section)
     Mint Whisper   #E8F5F0  (alternate section)
     Blush Pink     #E8A0B0  (primary accent)
     Soft Lavender  #B8A0D0  (secondary accent)
     Aurora Green   #80D8B0  (tertiary accent)
     Warm Charcoal  #3A3040  (primary text)
     Pastel Gold    #D8C090  (subtle highlight)
   Fonts:
     Commissioner — headlines/logotype
     Nunito       — body
     Caveat       — accents
*/

:root {
    --rose-cream:    #F8F0F0;
    --lavender-mist: #F0E8F8;
    --mint-whisper:  #E8F5F0;
    --blush-pink:    #E8A0B0;
    --soft-lavender: #B8A0D0;
    --aurora-green:  #80D8B0;
    --warm-charcoal: #3A3040;
    --pastel-gold:   #D8C090;

    --aurora-deep:   #0d0a18;

    --font-display:  "Commissioner", "Inter", system-ui, sans-serif;
    --font-body:     "Nunito", "Helvetica Neue", Arial, sans-serif;
    --font-script:   "Caveat", "Brush Script MT", cursive;

    --reveal-duration: 0.7s;
    --reveal-offset:   24px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--rose-cream);
    color: var(--warm-charcoal);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.75;
    font-size: clamp(14px, 1vw, 17px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    position: relative;
    min-height: 100vh;
}

/* ====== floating page-level blobs ====== */
.blob-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.blob {
    position: absolute;
    display: block;
    filter: blur(40px);
    opacity: 0.32;
    will-change: transform;
}

.blob-1 {
    width: 520px; height: 460px;
    left: -120px; top: 8vh;
    background: var(--blush-pink);
    border-radius: 62% 38% 47% 53% / 41% 56% 44% 59%;
    animation: floatBlob 22s ease-in-out infinite;
}
.blob-2 {
    width: 460px; height: 480px;
    right: -120px; top: 28vh;
    background: var(--soft-lavender);
    border-radius: 51% 49% 67% 33% / 56% 36% 64% 44%;
    animation: floatBlob 26s ease-in-out infinite -6s;
    opacity: 0.28;
}
.blob-3 {
    width: 600px; height: 520px;
    left: 30vw; top: 80vh;
    background: var(--aurora-green);
    border-radius: 38% 62% 58% 42% / 47% 51% 49% 53%;
    animation: floatBlob 30s ease-in-out infinite -12s;
    opacity: 0.22;
}
.blob-4 {
    width: 380px; height: 360px;
    right: 18vw; top: 140vh;
    background: var(--pastel-gold);
    border-radius: 56% 44% 38% 62% / 60% 49% 51% 40%;
    animation: floatBlob 24s ease-in-out infinite -3s;
    opacity: 0.22;
}
.blob-5 {
    width: 540px; height: 420px;
    left: -60px; top: 200vh;
    background: var(--soft-lavender);
    border-radius: 47% 53% 65% 35% / 49% 56% 44% 51%;
    animation: floatBlob 28s ease-in-out infinite -16s;
    opacity: 0.26;
}

@keyframes floatBlob {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -20px) scale(1.05); }
    66%  { transform: translate(-20px, 15px) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ====== sections ====== */
.section {
    position: relative;
    width: 100%;
    padding: clamp(80px, 12vh, 160px) clamp(20px, 6vw, 96px) clamp(120px, 16vh, 200px);
    overflow: hidden;
    z-index: 1;
}

.section-hero      { background: var(--rose-cream); min-height: 100vh; padding-top: clamp(120px, 18vh, 220px); display: flex; flex-direction: column; justify-content: center; }
.section-lavender  { background: var(--lavender-mist); }
.section-mint      { background: var(--mint-whisper); }
.section-rose      { background: var(--rose-cream); }
.section-aurora    { background: var(--aurora-deep); color: #f3eaff; }
.section-final     { padding-bottom: clamp(80px, 10vh, 140px); }

.section-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: clamp(70px, 9vw, 140px);
    display: block;
    pointer-events: none;
}

/* ====== inner / typography ====== */
.section-inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    z-index: 2;
}

.section-eyebrow {
    color: var(--blush-pink);
    font-size: clamp(18px, 1.5vw, 24px);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

.section-headline {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--warm-charcoal);
    font-size: clamp(28px, 3.6vw, 50px);
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 32px;
    max-width: 22ch;
}

.section-lede {
    font-size: clamp(15px, 1.15vw, 19px);
    max-width: 60ch;
    margin: 0 0 56px;
    color: var(--warm-charcoal);
    opacity: 0.86;
}

.accent-script {
    font-family: var(--font-script);
    font-weight: 500;
    line-height: 1.2;
}

.prose p {
    max-width: 64ch;
    margin: 0 0 22px;
    color: var(--warm-charcoal);
    opacity: 0.9;
}

/* ====== hero ====== */
.section-hero {
    position: relative;
    isolation: isolate;
}

.hero-blobs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-blob {
    position: absolute;
    display: block;
    filter: blur(28px);
    opacity: 0.45;
}
.hero-blob-a {
    width: 540px; height: 460px;
    left: 8vw; top: 12vh;
    background: var(--blush-pink);
    border-radius: 62% 38% 47% 53% / 41% 56% 44% 59%;
    animation: floatBlob 18s ease-in-out infinite;
}
.hero-blob-b {
    width: 480px; height: 520px;
    right: 6vw; top: 22vh;
    background: var(--soft-lavender);
    border-radius: 38% 62% 58% 42% / 47% 51% 49% 53%;
    animation: floatBlob 22s ease-in-out infinite -7s;
    opacity: 0.42;
}
.hero-blob-c {
    width: 380px; height: 380px;
    left: 36vw; top: 56vh;
    background: var(--pastel-gold);
    border-radius: 56% 44% 38% 62% / 60% 49% 51% 40%;
    animation: floatBlob 24s ease-in-out infinite -12s;
    opacity: 0.32;
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    padding: 0 16px;
}

.hero-eyebrow {
    color: var(--soft-lavender);
    font-size: clamp(20px, 1.7vw, 26px);
    margin: 0 0 14px;
    opacity: 0;
    transform: translateY(8px);
    animation: heroFade 0.9s ease-out 0.15s forwards;
}

.hero-logotype {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(56px, 11vw, 168px);
    letter-spacing: -0.025em;
    line-height: 0.95;
    color: var(--warm-charcoal);
    margin: 0 0 28px;
    opacity: 0;
    transform: translateY(14px);
    animation: heroFade 1.1s ease-out 0.35s forwards;
    font-variation-settings: "wght" 500;
}

.hero-logotype .logo-word { font-variation-settings: "wght" 540; }
.hero-logotype .logo-dot  { color: var(--blush-pink); padding: 0 0.04em; }
.hero-logotype .logo-tld  { color: var(--soft-lavender); font-variation-settings: "wght" 600; }

.hero-tagline {
    font-size: clamp(15px, 1.25vw, 20px);
    max-width: 56ch;
    margin: 0 auto 36px;
    color: var(--warm-charcoal);
    opacity: 0;
    transform: translateY(10px);
    animation: heroFade 1s ease-out 0.7s forwards;
}

.hero-meta {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--warm-charcoal);
    opacity: 0;
    animation: heroFade 1s ease-out 1s forwards;
}

.meta-item .meta-key {
    color: var(--blush-pink);
    font-weight: 600;
    margin-right: 6px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
}

.meta-divider {
    width: 28px;
    height: 1px;
    background: var(--soft-lavender);
    opacity: 0.5;
    display: inline-block;
}

@keyframes heroFade {
    to { opacity: 1; transform: translateY(0); }
}

/* ====== underline-draw ====== */
.reveal-underline {
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0% 2px;
    transition: background-size 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding-bottom: 2px;
}

.section-headline.reveal-underline {
    color: var(--warm-charcoal);
    background-image: linear-gradient(var(--blush-pink), var(--blush-pink));
}

.aurora-headline.reveal-underline {
    background-image: linear-gradient(var(--aurora-green), var(--aurora-green));
}

.cocktail-name.reveal-underline {
    background-image: linear-gradient(var(--soft-lavender), var(--soft-lavender));
}

.reveal-underline.is-drawn {
    background-size: 100% 2px;
}

/* ====== philosophy / quote ====== */
.quote-card {
    margin-top: 60px;
    max-width: 56ch;
    padding: 36px 40px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 36% 64% 47% 53% / 60% 40% 60% 40%;
    border: 1px solid rgba(184, 160, 208, 0.25);
}

.quote-card blockquote {
    margin: 0 0 12px;
    font-size: clamp(18px, 1.6vw, 26px);
    color: var(--soft-lavender);
}

.quote-attrib {
    margin: 0;
    font-size: 13px;
    color: var(--warm-charcoal);
    opacity: 0.7;
    letter-spacing: 0.03em;
}

/* ====== cocktail list ====== */
.cocktail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

.cocktail {
    border-bottom: 1px solid rgba(58, 48, 64, 0.14);
    padding-bottom: 32px;
}
.cocktail:last-child { border-bottom: none; }

.cocktail-head {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cocktail-number {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2vw, 28px);
    color: var(--blush-pink);
    letter-spacing: 0.04em;
}

.cocktail-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 32px);
    color: var(--warm-charcoal);
    margin: 0;
    line-height: 1.1;
}

.cocktail-meta {
    color: var(--soft-lavender);
    font-size: clamp(15px, 1.3vw, 19px);
    margin: 0 0 10px;
}

.cocktail-body {
    margin: 0;
    max-width: 60ch;
    color: var(--warm-charcoal);
    opacity: 0.9;
}

/* ====== aurora ====== */
.section-aurora {
    background: var(--aurora-deep);
    color: #f3eaff;
    isolation: isolate;
    overflow: hidden;
}

.aurora-veil {
    position: absolute;
    inset: -10% -5%;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.aurora-veil-a {
    background: linear-gradient(135deg,
        rgba(128, 216, 176, 0.85) 0%,
        rgba(184, 160, 208, 0.7) 35%,
        rgba(232, 160, 176, 0.7) 65%,
        rgba(128, 216, 176, 0.8) 100%);
    background-size: 400% 400%;
    animation: auroraShift 14s ease infinite;
}

.aurora-veil-b {
    background: radial-gradient(ellipse at 20% 30%, rgba(128, 216, 176, 0.6), transparent 60%),
                radial-gradient(ellipse at 80% 60%, rgba(232, 160, 176, 0.55), transparent 60%),
                radial-gradient(ellipse at 50% 90%, rgba(184, 160, 208, 0.6), transparent 60%);
    background-size: 200% 200%, 200% 200%, 200% 200%;
    animation: auroraDrift 22s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes auroraShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes auroraDrift {
    0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50%  { background-position: 50% 80%, 30% 20%, 80% 40%; }
    100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}

.aurora-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 15% 22%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 38% 64%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 18%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 85% 78%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 28% 84%, rgba(255, 255, 255, 0.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 62% 36%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
        radial-gradient(1px 1px at 92% 14%, rgba(255, 255, 255, 0.55) 50%, transparent 51%);
    pointer-events: none;
    opacity: 0.7;
    animation: starsTwinkle 8s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
    0%   { opacity: 0.45; }
    100% { opacity: 0.85; }
}

.aurora-inner {
    position: relative;
    z-index: 2;
    max-width: 980px;
    color: #f3eaff;
    text-align: left;
}

.aurora-eyebrow {
    color: var(--aurora-green);
    font-size: clamp(20px, 1.7vw, 28px);
}

.aurora-headline {
    color: #fff8ff;
    text-shadow: 0 0 30px rgba(128, 216, 176, 0.3);
}

.aurora-prose {
    font-size: clamp(16px, 1.3vw, 20px);
    max-width: 60ch;
    color: #f3eaff;
    opacity: 0.92;
    margin: 0 0 36px;
}

.aurora-tags {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.aurora-tag {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #f3eaff;
}

/* ====== conservatory / herbarium grid ====== */
.herbarium-grid {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 28px;
}

.herb-card {
    text-align: center;
    padding: 22px 18px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
    border: 1px solid rgba(184, 160, 208, 0.25);
    transition: transform 0.5s ease, background 0.5s ease;
}

.herb-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.7);
}

.herb-illu {
    color: var(--soft-lavender);
    margin-bottom: 12px;
    opacity: 0.7;
}

.herb-illu svg {
    width: 60px;
    height: 80px;
    display: inline-block;
}

.herb-name {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--warm-charcoal);
    font-size: 15px;
    letter-spacing: 0.01em;
}

.herb-note {
    margin: 0;
    color: var(--blush-pink);
    font-size: 17px;
}

/* ====== final / visit ====== */
.final-inner {
    text-align: left;
}

.final-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    margin: 36px 0 56px;
}

.final-card {
    padding: 22px 24px;
    background: rgba(240, 232, 248, 0.45);
    border: 1px solid rgba(184, 160, 208, 0.3);
    border-radius: 32% 68% 47% 53% / 60% 40% 60% 40%;
}

.final-key {
    margin: 0 0 6px;
    color: var(--blush-pink);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
}

.final-val {
    margin: 0;
    color: var(--warm-charcoal);
    font-size: clamp(15px, 1.15vw, 18px);
}

.final-foot {
    margin-top: 60px;
    padding-top: 28px;
    border-top: 1px solid rgba(184, 160, 208, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.final-foot-logo {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 48px);
    color: var(--warm-charcoal);
    letter-spacing: -0.02em;
}

.final-foot-line {
    margin: 0;
    color: var(--soft-lavender);
    font-size: clamp(16px, 1.2vw, 20px);
}

/* ====== botanical accents ====== */
.botanical {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

.botanical-hero-left {
    left: clamp(12px, 4vw, 60px);
    bottom: 8vh;
    width: clamp(60px, 7vw, 110px);
    color: var(--soft-lavender);
}

.botanical-fern-right {
    right: clamp(12px, 4vw, 60px);
    top: 8%;
    width: clamp(70px, 8vw, 130px);
    color: var(--blush-pink);
    opacity: 0.45;
}

.botanical-petals-left {
    left: clamp(12px, 4vw, 60px);
    top: 12%;
    width: clamp(70px, 8vw, 120px);
    color: var(--soft-lavender);
    opacity: 0.5;
}

.botanical-cherry-right {
    right: clamp(12px, 4vw, 60px);
    top: 10%;
    width: clamp(70px, 8vw, 130px);
    color: var(--blush-pink);
    opacity: 0.5;
}

.botanical-fern-left-final {
    left: clamp(12px, 4vw, 60px);
    bottom: 14%;
    width: clamp(60px, 7vw, 110px);
    color: var(--soft-lavender);
    opacity: 0.5;
}

/* ====== reveal-on-scroll for prose & headings ====== */
.section-headline,
.section-lede,
.prose,
.cocktail,
.quote-card,
.aurora-prose,
.aurora-tags,
.herbarium-grid,
.final-grid,
.final-foot {
    opacity: 0;
    transform: translateY(var(--reveal-offset));
    transition: opacity var(--reveal-duration) ease-out, transform var(--reveal-duration) ease-out;
}

.is-revealed.section-headline,
.is-revealed.section-lede,
.is-revealed.prose,
.is-revealed.cocktail,
.is-revealed.quote-card,
.is-revealed.aurora-prose,
.is-revealed.aurora-tags,
.is-revealed.herbarium-grid,
.is-revealed.final-grid,
.is-revealed.final-foot {
    opacity: 1;
    transform: translateY(0);
}

/* ====== responsive ====== */
@media (max-width: 720px) {
    .section { padding: 70px 18px 110px; }
    .section-hero { padding-top: 100px; }

    .botanical { display: none; }

    .quote-card { border-radius: 28px; padding: 26px; }
    .final-card { border-radius: 24px; }
    .herb-card { border-radius: 22px; }

    .hero-meta { flex-direction: column; gap: 8px; }
    .meta-divider { display: none; }
}

@media (max-width: 520px) {
    .hero-logotype { font-size: clamp(48px, 18vw, 96px); }
}

/* ====== motion preference ====== */
@media (prefers-reduced-motion: reduce) {
    .blob, .hero-blob, .aurora-veil, .aurora-veil-b, .aurora-stars {
        animation: none !important;
    }
    .reveal-underline { transition: none; }
    .section-headline,
    .section-lede,
    .prose,
    .cocktail,
    .quote-card,
    .aurora-prose,
    .aurora-tags,
    .herbarium-grid,
    .final-grid,
    .final-foot {
        opacity: 1;
        transform: none;
    }
}