:root {
    /* Design compliance terms: IntersectionObserver trigger animations only once (no replay scroll-back (Google */
    --midnight: #1E0A14;
    --claret: #3A1128;
    --cream: #F5EDE0;
    --rose-gold: #C9A87C;
    --mauve: #8E5572;
    --rose-gray: #A8929A;
    --burgundy: #6B1D3A;
    --coral: #E8735A;
    --teal: #2A9D8F;
    --saffron: #E9C46A;
    --rule: rgba(201, 168, 124, 0.3);
    --display: "Playfair Display", serif;
    --body: "Lora", serif;
    --accent: "Josefin Sans", sans-serif;
}

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

html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--midnight);
    color: var(--cream);
    font-family: var(--body);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 12% 12%, rgba(142, 85, 114, 0.26), transparent 30%),
        radial-gradient(circle at 84% 76%, rgba(58, 17, 40, 0.85), transparent 42%),
        linear-gradient(135deg, var(--midnight), var(--claret));
}

.opening-veil {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--midnight);
    pointer-events: none;
    animation: veil-lift 1.1s ease 0.8s forwards;
}

@keyframes veil-lift { to { opacity: 0; visibility: hidden; } }

.wallpaper {
    position: fixed;
    inset: -15vh -15vw;
    z-index: -2;
    opacity: 0.7;
    animation: drift-wallpaper 60s linear infinite;
    pointer-events: none;
}

.wallpaper-botanical {
    position: absolute;
    width: clamp(300px, 38vw, 520px);
    fill: none;
    stroke: var(--cream);
    stroke-width: 1.2;
    opacity: 0.06;
}

.wallpaper-rose { left: 3%; top: 7%; transform: rotate(-14deg); }
.wallpaper-fern { right: 0; top: 24%; transform: rotate(18deg); }
.wallpaper-lavender { left: 38%; bottom: 0; transform: rotate(-8deg); }

@keyframes drift-wallpaper { to { transform: translate(-50px, -50px); } }

.hud-frame {
    position: fixed;
    inset: 24px;
    border: 1px solid var(--rule);
    z-index: 100;
    pointer-events: none;
    transform-origin: center;
    animation: hud-draw 1.2s cubic-bezier(.22,1,.36,1) 0.8s both;
}

@keyframes hud-draw {
    0% { clip-path: inset(50% 50%); opacity: 0; }
    100% { clip-path: inset(0 0); opacity: 1; }
}

.hud-ornament {
    position: absolute;
    width: 32px;
    height: 32px;
    opacity: 0;
    stroke: var(--rose-gold);
    stroke-width: 1.6;
    fill: none;
    animation: ornament-in 0.3s ease 2s forwards, ornament-pulse 3s ease-in-out 2.3s infinite;
}

.corner-tl { left: -16px; top: -16px; }
.corner-tr { right: -16px; top: -16px; transform: rotate(90deg); }
.corner-br { right: -16px; bottom: -16px; transform: rotate(180deg); }
.corner-bl { left: -16px; bottom: -16px; transform: rotate(270deg); }

@keyframes ornament-in { to { opacity: 1; } }
@keyframes ornament-pulse { 50% { filter: drop-shadow(0 0 10px rgba(201,168,124,.65)); } }

.nav-hud {
    position: fixed;
    left: 0;
    top: 50%;
    width: 48px;
    transform: translateY(-50%);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 0;
}

.nav-item {
    position: relative;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0 24px 24px 0;
    background: rgba(58, 17, 40, 0.8);
    cursor: pointer;
    transition: width .28s ease, background .28s ease, transform .28s ease;
}

.nav-item svg {
    position: absolute;
    left: 9px;
    top: 8px;
    width: 31px;
    height: 31px;
    fill: none;
    stroke: var(--rose-gold);
    stroke-width: 1.7;
}

.nav-item::after {
    content: attr(data-label);
    position: absolute;
    left: 52px;
    top: 50%;
    transform: translateY(-45%);
    color: var(--rose-gold);
    font-family: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .22s ease .06s;
}

.nav-item:hover { width: 132px; background: rgba(30, 10, 20, .94); transform: translateX(4px); }
.nav-item:hover::after { opacity: 1; }
.nav-item:hover svg { stroke: var(--saffron); }

.section { position: relative; min-height: 100vh; }
.snap-section { scroll-snap-align: start; scroll-snap-stop: always; }

.entrance, .scent-map, .closing {
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 7rem clamp(1.5rem, 6vw, 6rem);
}

.hero-mark {
    width: min(88vw, 1120px);
    max-height: 48vh;
    overflow: visible;
    filter: drop-shadow(0 28px 60px rgba(0,0,0,.45));
}

.hero-letter .fragment {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: fragment-assemble .65s cubic-bezier(.2,1.4,.32,1) forwards, fragment-unify .65s ease 3.45s forwards;
}

.letter-m .fragment { fill: var(--coral); stroke: var(--coral); }
.letter-i .fragment, .letter-i2 .fragment { fill: var(--teal); stroke: var(--teal); }
.letter-r .fragment { fill: var(--saffron); stroke: var(--saffron); }
.letter-s .fragment { fill: none; stroke: var(--coral); }
.stroke-fragment { fill: none !important; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.stroke-wide { fill: none !important; stroke-width: 52; stroke-linecap: round; stroke-linejoin: round; }

.letter-m .fragment:nth-child(1) { animation-delay: 2.24s, 3.45s; transform: translate(-44px, 34px) rotate(-18deg) scale(.55); }
.letter-m .fragment:nth-child(2) { animation-delay: 2.34s, 3.45s; transform: translate(0, -42px) scale(.35); }
.letter-m .fragment:nth-child(3) { animation-delay: 2.44s, 3.45s; transform: translate(42px, 28px) rotate(18deg) scale(.5); }
.letter-i .fragment:nth-child(1) { animation-delay: 2.54s, 3.45s; transform: translateY(60px) scale(.55); }
.letter-i .fragment:nth-child(2) { animation-delay: 2.64s, 3.45s; transform: translateY(-56px) scale(.3); }
.letter-i .fragment:nth-child(3) { animation-delay: 2.74s, 3.45s; transform: translateX(-40px) scale(.45); }
.letter-r .fragment:nth-child(1) { animation-delay: 2.84s, 3.45s; transform: translateX(-48px) scale(.55); }
.letter-r .fragment:nth-child(2) { animation-delay: 2.94s, 3.45s; transform: translate(42px, -36px) scale(.45); }
.letter-r .fragment:nth-child(3) { animation-delay: 3.04s, 3.45s; transform: translate(52px, 42px) rotate(28deg) scale(.45); }
.letter-r .fragment:nth-child(4) { animation-delay: 3.14s, 3.45s; transform: translateY(-50px) scale(.35); }
.letter-i2 .fragment:nth-child(1) { animation-delay: 3.04s, 3.45s; transform: translateY(60px) scale(.55); }
.letter-i2 .fragment:nth-child(2) { animation-delay: 3.14s, 3.45s; transform: translateY(-56px) scale(.3); }
.letter-i2 .fragment:nth-child(3) { animation-delay: 3.24s, 3.45s; transform: translateX(40px) scale(.45); }
.letter-s .fragment:nth-child(1) { animation-delay: 3.24s, 3.45s; transform: translateX(65px) rotate(-20deg) scale(.45); }
.letter-s .fragment:nth-child(2) { animation-delay: 3.34s, 3.45s; transform: translateY(-45px) scale(.45); }
.letter-s .fragment:nth-child(3) { animation-delay: 3.44s, 3.45s; transform: translateY(45px) scale(.45); }

@keyframes fragment-assemble { to { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } }
@keyframes fragment-unify { to { fill: var(--cream); stroke: var(--cream); } }

.hero-sequence {
    position: absolute;
    top: 20%;
    left: 16%;
    display: flex;
    gap: .5rem;
    font-family: var(--accent);
    color: var(--rose-gold);
    letter-spacing: .12em;
    font-size: .75rem;
}

.hero-sequence span { opacity: 0; animation: sequence-flash .32s ease forwards; }
.hero-sequence span:nth-child(1) { animation-delay: 2.2s; }
.hero-sequence span:nth-child(2) { animation-delay: 2.45s; }
.hero-sequence span:nth-child(3) { animation-delay: 2.7s; }
.hero-sequence span:nth-child(4) { animation-delay: 2.95s; }
.hero-sequence span:nth-child(5) { animation-delay: 3.2s; }
@keyframes sequence-flash { 50% { opacity: 1; } 100% { opacity: 0; } }

.hero-caption {
    max-width: 46ch;
    margin: -2rem auto 0;
    color: var(--rose-gray);
    text-align: center;
    opacity: 0;
    animation: caption-in .8s ease 3.8s forwards;
}

@keyframes caption-in { to { opacity: 1; transform: translateY(-10px); } }

.confetti-field i, .divider-band b {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    background: var(--coral);
    opacity: .78;
}
.confetti-field i:nth-child(1) { left: 11%; top: 19%; clip-path: polygon(50% 0,100% 100%,0 100%); background: var(--saffron); }
.confetti-field i:nth-child(2) { left: 81%; top: 18%; border-radius: 50%; background: var(--teal); }
.confetti-field i:nth-child(3) { left: 22%; top: 76%; width: 60px; height: 12px; background: repeating-linear-gradient(135deg,var(--coral) 0 8px,transparent 8px 16px); }
.confetti-field i:nth-child(4) { left: 74%; top: 72%; clip-path: polygon(0 0,100% 40%,20% 100%); background: var(--saffron); }
.confetti-field i:nth-child(5) { left: 13%; top: 53%; border-radius: 50% 50% 0 0; background: var(--mauve); }
.confetti-field i:nth-child(6) { left: 88%; top: 48%; width: 70px; height: 8px; background: var(--teal); transform: rotate(-22deg); }
.confetti-field i:nth-child(7) { left: 43%; top: 15%; clip-path: polygon(50% 0,100% 100%,0 100%); background: var(--coral); }
.confetti-field i:nth-child(8) { left: 55%; top: 86%; border-radius: 50%; background: var(--saffron); }

.section-kicker {
    font-family: var(--accent);
    color: var(--rose-gold);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.scent-map { background: linear-gradient(180deg, var(--midnight), var(--claret)); align-content: center; gap: 2rem; }

.scent-grid {
    width: min(1050px, 88vw);
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    grid-auto-rows: minmax(178px, 23vh);
    gap: clamp(.8rem, 1.5vw, 1.25rem);
}

.scent-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 2vw, 2rem);
    min-height: 170px;
    color: var(--burgundy);
    background: var(--cream);
    opacity: 0;
    transform: translateY(44px) rotate(-2deg);
    transition: transform .7s cubic-bezier(.2,1,.32,1), opacity .7s ease;
}

.scent-map.in-view .scent-card { opacity: 1; transform: translateY(0) rotate(0); }
.scent-card:nth-child(1) { transition-delay: .05s; }
.scent-card:nth-child(2) { transition-delay: .15s; }
.scent-card:nth-child(3) { transition-delay: .25s; }
.scent-card:nth-child(4) { transition-delay: .35s; }
.scent-card:nth-child(5) { transition-delay: .45s; }
.scent-card:nth-child(6) { transition-delay: .55s; }
.scent-card.large { grid-row: span 2; }
.scent-card.arch { border-radius: 50% 50% 10px 10px / 28% 28% 10px 10px; }
.scent-card.dome { border-radius: 140px 140px 12px 12px; }
.scent-card.circle { border-radius: 46%; }
.scent-card.zig { clip-path: polygon(0 8%,12% 0,24% 8%,36% 0,48% 8%,60% 0,72% 8%,84% 0,100% 8%,100% 100%,0 100%); }
.scent-card.coral::before { background: var(--coral); }
.scent-card.teal::before { background: var(--teal); }
.scent-card.saffron::before { background: var(--saffron); }
.scent-card.mauve::before { background: var(--mauve); }
.scent-card.cream::before { background: var(--teal); }

.scent-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -42px;
    top: -48px;
    border-radius: 50%;
    opacity: .86;
}

.scent-card::after {
    content: "";
    position: absolute;
    left: 18px;
    bottom: 18px;
    width: 74px;
    height: 14px;
    background: repeating-linear-gradient(135deg, rgba(107,29,58,.35) 0 8px, transparent 8px 16px);
}

.card-number {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 1rem;
    font-family: var(--accent);
    font-size: clamp(1.4rem, 3.2vw, 3rem);
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--burgundy);
}

.card-icon {
    position: relative;
    z-index: 1;
    width: clamp(60px, 8vw, 92px);
    height: clamp(60px, 8vw, 92px);
    fill: none;
    stroke: var(--rose-gold);
    stroke-width: 2;
    margin-bottom: 1rem;
}

.scent-card h2 {
    position: relative;
    z-index: 1;
    font-family: var(--display);
    font-size: clamp(1.45rem, 2.3vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: .04em;
    color: var(--burgundy);
}

.scent-card p { position: relative; z-index: 1; max-width: 24ch; color: var(--claret); margin-top: .65rem; }

.story {
    min-height: 110vh;
    padding: 8rem clamp(1.5rem, 7vw, 7rem);
    background: linear-gradient(135deg, var(--claret), var(--midnight) 72%);
    scroll-snap-align: none;
}

.divider-band {
    position: absolute;
    top: 0;
    left: 10vw;
    right: 8vw;
    height: 72px;
    opacity: .22;
}
.divider-band b:nth-child(1) { left: 3%; top: 23px; border-radius: 50%; background: var(--teal); }
.divider-band b:nth-child(2) { left: 20%; top: 36px; clip-path: polygon(50% 0,100% 100%,0 100%); background: var(--coral); }
.divider-band b:nth-child(3) { left: 36%; top: 17px; width: 58px; height: 9px; background: var(--saffron); transform: rotate(14deg); }
.divider-band b:nth-child(4) { left: 57%; top: 42px; border-radius: 50%; background: var(--rose-gold); }
.divider-band b:nth-child(5) { left: 76%; top: 18px; clip-path: polygon(0 0,100% 40%,20% 100%); background: var(--teal); }
.divider-band b:nth-child(6) { left: 91%; top: 35px; width: 70px; height: 10px; background: var(--coral); }

.story-container {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.story-main h1 {
    margin: .8rem 0 1.6rem;
    max-width: 11ch;
    font-family: var(--display);
    font-size: clamp(2.4rem, 5.8vw, 5.7rem);
    line-height: 1;
    letter-spacing: .04em;
    color: var(--cream);
}

.story-main p { max-width: 58ch; margin-bottom: 1.2rem; color: var(--rose-gray); }

.running-count {
    display: inline-block;
    margin-top: 1.2rem;
    padding: .75rem 1rem;
    border: 1px solid var(--rule);
    color: var(--rose-gold);
    font-family: var(--accent);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.running-count span { color: var(--saffron); font-size: 1.25rem; }

.ingredient-margin {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 1.4rem;
    border-left: 1px solid var(--rule);
}

.ingredient {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: .85rem;
    min-height: 62px;
    opacity: .62;
    transition: opacity .25s ease, transform .25s ease;
}
.ingredient:hover { opacity: 1; transform: translateX(8px); }
.ingredient svg { width: 54px; height: 54px; fill: none; stroke: var(--rose-gold); stroke-width: 1.6; }
.ingredient span { opacity: 0; color: var(--rose-gold); font-family: var(--accent); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: opacity .25s ease; }
.ingredient:hover span, .story.in-view .ingredient span { opacity: 1; }

.closing { background: radial-gradient(circle at center, var(--claret), var(--midnight) 68%); text-align: center; }
.closing-shell { position: relative; width: min(900px, 86vw); min-height: 360px; display: grid; place-items: center; padding: 4rem 2rem; }
.floral-border { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--rose-gold); stroke-width: 2; opacity: .9; }
.floral-border path { stroke-dasharray: 2200; stroke-dashoffset: 2200; }
.closing.in-view .floral-border path { animation: draw-border 2.2s ease forwards; }
@keyframes draw-border { to { stroke-dashoffset: 0; } }
.closing h1 { font-family: var(--display); font-size: clamp(3rem, 10vw, 7.5rem); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); }
.closing p { max-width: 44ch; margin: -3rem auto 0; color: var(--rose-gray); }

@media (max-width: 768px) {
    html { scroll-snap-type: y proximity; }
    .wallpaper { display: none; }
    .hud-frame { inset: 8px; }
    .nav-hud { left: 50%; top: auto; bottom: 0; width: auto; height: 48px; transform: translateX(-50%); flex-direction: row; gap: 0; padding: 0; background: rgba(30,10,20,.9); }
    .nav-item { border-radius: 0; width: 48px; }
    .nav-item:hover { width: 48px; transform: translateY(-5px); }
    .nav-item::after { display: none; }
    .entrance, .scent-map, .closing { padding: 5rem 1.2rem 5.5rem; }
    .hero-caption { margin-top: 0; }
    .scent-grid { width: min(420px, 88vw); grid-template-columns: 1fr; grid-auto-rows: auto; }
    .scent-card, .scent-card.large { grid-row: auto; min-height: 210px; }
    .scent-map::after { content: "swipe scent stack ↓"; color: var(--rose-gold); font-family: var(--accent); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
    .story { padding: 5rem 1.25rem; }
    .story-container { grid-template-columns: 1fr; }
    .ingredient-margin { position: relative; top: 0; border-left: 0; border-top: 1px solid var(--rule); padding: 1.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); }
    .closing p { margin-top: 1rem; }
}