/* ==========================================================================
   THREEUI & RENAISSANCE EDITION INTERACTIVE MOTION SYSTEM
   Tuned for Lọ Mơ — Flower Shop (Editorial × Gallery × Cinematic)
   Preserves the warm Vườn Mơ palette (#FAF5EC, #285640, #D47B61) while
   upgrading animations, 3D depth parallax, wireframe portal, Roman numeral
   sibling-dimming TOC, Bento grid micro-interactions & Curator prompt pills.
   ========================================================================== */

:root {
    --px: 0;
    --py: 0;
    --spec-angle: 2.4rad;
    --spec-bright: 0;
    --renaissance-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --bento-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1. INITIAL PAGE LOAD CHOREOGRAPHY & MULTI-LAYER HERO PARALLAX
   ========================================================================== */
.editorial-hero {
    --hero-mx: 0;
    --hero-my: 0;
    --hero-scroll-p: 0;
    --portal-glow-color: rgba(212, 123, 97, 0.10);
    position: relative;
}

/* Subtle contextual lighting wash behind Hero when hovering TOC rows */
.editorial-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        52% 58% at 32% 62%,
        var(--portal-glow-color, rgba(212, 123, 97, 0.08)) 0%,
        rgba(250, 245, 236, 0) 72%
    );
    transition: background 0.6s var(--renaissance-ease);
}

.editorial-hero > .container-lomo {
    position: relative;
    z-index: 2;
}

/* Choreographed Background Canvas Scale-Down (1.08 -> 1.0 over 1.8s) */
@keyframes lomoHeroCanvasReveal {
    0% {
        transform: scale(1.08);
        filter: saturate(0.88) brightness(0.97);
    }
    100% {
        transform: scale(1.035);
        filter: saturate(1) brightness(1);
    }
}

.floral-depth-stage .editorial-hero-img {
    animation: lomoHeroCanvasReveal 1.8s var(--renaissance-ease) forwards;
    transition: transform 0.14s linear;
}

/* Continuous Zero-Gravity Sine-Wave Float for Botanical Ornaments */
@keyframes lomoZeroGravityFloatA {
    0%   { transform: translate(-50%, -50%) translate3d(0, -7px, 0) rotate(var(--br, 0deg)); }
    100% { transform: translate(-50%, -50%) translate3d(0, 7px, 0) rotate(calc(var(--br, 0deg) + 3.5deg)); }
}

@keyframes lomoZeroGravityFloatB {
    0%   { transform: translate(-50%, -50%) translate3d(0, 6px, 0) rotate(var(--br, 0deg)); }
    100% { transform: translate(-50%, -50%) translate3d(0, -8px, 0) rotate(calc(var(--br, 0deg) - 3deg)); }
}

.floral-piece.floral-petal-a,
.floral-piece.floral-ribbon,
.floral-piece.floral-petal-d {
    animation: lomoZeroGravityFloatA 4.2s ease-in-out infinite alternate;
}

.floral-piece.floral-petal-b,
.floral-piece.floral-leaf {
    animation: lomoZeroGravityFloatB 4.8s ease-in-out infinite alternate;
}

/* Multi-layer cursor & scroll parallax on Hero frame */
@media (min-width: 992px) {
    .editorial-archival-frame {
        transform:
            perspective(1400px)
            translate3d(
                calc(var(--hero-mx, 0) * -8px),
                calc(var(--hero-my, 0) * -6px + var(--hero-scroll-p, 0) * -28px),
                0
            )
            rotateY(calc(var(--hero-mx, 0) * 2.2deg))
            rotateX(calc(var(--hero-my, 0) * -1.8deg));
        transition: box-shadow 0.45s var(--bento-ease), border-color 0.45s ease;
        will-change: transform;
    }
}

/* ==========================================================================
   2. ARCHITECTURAL STAGE BACKDROP FOR #bo-suu-tap (01 / 02 TULIP COLLECTION)
   ========================================================================== */
.depth-stage-shell {
    position: relative;
    perspective: 1400px;
    background:
        radial-gradient(64% 62% at 50% 42%, #FFFDF9 0%, #FAF3E8 52%, #EFE4D2 100%) !important;
    border: 1px solid rgba(196, 179, 155, 0.85);
    box-shadow:
        0 32px 72px rgba(38, 58, 48, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.depth-stage-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
}

.depth-stage-sunbeam {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(46% 52% at 50% 42%, rgba(255, 252, 245, 0.95) 0%, rgba(250, 239, 225, 0.45) 58%, rgba(244, 232, 214, 0) 100%),
        linear-gradient(128deg, rgba(255, 250, 240, 0.65) 0%, rgba(212, 123, 97, 0.06) 46%, rgba(40, 86, 64, 0.04) 100%);
    transform: translate3d(calc(var(--stage-px, 0) * -10px), calc(var(--stage-py, 0) * -6px), 0);
    transition: transform 0.35s var(--bento-ease);
}

.depth-stage-arch {
    position: absolute;
    top: 66px;
    bottom: 126px;
    left: 50%;
    width: min(420px, 76vw);
    transform: translate3d(calc(-50% + var(--stage-px, 0) * -8px), calc(var(--stage-py, 0) * -5px), 0);
    border-radius: 220px 220px 22px 22px;
    background: linear-gradient(180deg, rgba(255, 254, 251, 0.92) 0%, rgba(246, 238, 225, 0.78) 68%, rgba(235, 223, 205, 0.55) 100%);
    border: 1px solid rgba(212, 123, 97, 0.24);
    box-shadow:
        inset 0 18px 42px rgba(255, 255, 255, 0.92),
        0 20px 50px rgba(40, 86, 64, 0.05);
    transition: transform 0.35s var(--bento-ease);
}

.depth-stage-arch-inner {
    position: absolute;
    inset: 12px;
    border-radius: 208px 208px 14px 14px;
    border: 1px dashed rgba(40, 86, 64, 0.16);
}

.depth-stage-topbar,
.depth-stage-watermark,
.depth-stage-viewport,
.depth-stage-footer {
    position: relative;
    z-index: 2;
}

.depth-stage-watermark {
    color: rgba(40, 86, 64, 0.055);
}

.depth-slide.is-active .depth-slide-figure-wrap {
    transform-style: preserve-3d;
    transform:
        perspective(1200px)
        rotateY(calc(var(--stage-px, 0) * 5.5deg))
        rotateX(calc(var(--stage-py, 0) * -4deg))
        translateZ(14px);
    transition: transform 0.22s ease-out;
}

/* ==========================================================================
   4. ROMAN NUMERAL CHAPTER WATERMARKS & BENTO GRID HOVER SYSTEM
   ========================================================================== */
.renaissance-chapter-badge-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.renaissance-roman-watermark {
    font-family: var(--font-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-cream);
    background: var(--color-green);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.chapter-roman-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 9px;
    margin-right: 8px;
    border-radius: 999px;
    background: rgba(40, 86, 64, 0.10);
    border: 1px solid rgba(40, 86, 64, 0.24);
    color: var(--color-green);
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Giant Subtle Architectural Roman Numeral Watermark on Chapter Headers */
.brand-section-header[data-roman-chapter]::before {
    content: attr(data-roman-chapter);
    position: absolute;
    left: -18px;
    top: -22px;
    font-family: var(--font-serif);
    font-size: clamp(4.2rem, 8vw, 6.8rem);
    font-weight: 700;
    line-height: 1;
    color: rgba(40, 86, 64, 0.048);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.brand-section-header[data-roman-chapter] > * {
    position: relative;
    z-index: 1;
}

.scroll-nav-roman {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 11px;
    opacity: 0.72;
    margin-left: 4px;
}

/* Bento Card Lift (-4px), Crisp Hairline Border Brightening & Media Scale (1.03) */
@media (hover: hover) and (pointer: fine) {
    .etymology-card,
    .story-pillar-card,
    .sketch-card,
    .logo-variant-card,
    .color-swatch-card,
    .subpalette-card,
    .typography-card,
    .pattern-card,
    .pub-showcase-card,
    .pending-pub-card,
    .lomo-product-card {
        transition:
            transform 0.42s var(--bento-ease),
            border-color 0.38s var(--bento-ease),
            box-shadow 0.42s var(--bento-ease) !important;
    }

    .etymology-card:hover,
    .story-pillar-card:hover,
    .sketch-card:hover,
    .logo-variant-card:hover,
    .color-swatch-card:hover,
    .subpalette-card:hover,
    .typography-card:hover,
    .pattern-card:hover,
    .pub-showcase-card:hover,
    .pending-pub-card:hover,
    .lomo-product-card:hover {
        border-color: rgba(212, 123, 97, 0.55) !important;
        box-shadow:
            0 20px 44px -14px rgba(40, 86, 64, 0.15),
            0 0 0 1px rgba(212, 123, 97, 0.20) !important;
    }

    .sketch-card:hover .sketch-frame img,
    .logo-variant-card:hover .logo-variant-stage img,
    .pattern-card:hover .pattern-preview-box img,
    .pub-artwork-frame:hover img {
        transform: scale(1.03);
        transition: transform 0.42s var(--bento-ease);
    }
}

/* ==========================================================================
   5. INTERACTIVE PROMPT PILLS & BOTANICAL CURATOR DRAWER (SIDEKICK STYLE)
   ========================================================================== */
.renaissance-prompt-marquee-bar {
    background: linear-gradient(90deg, #F6EFE2 0%, #FAF5EC 50%, #F6EFE2 100%);
    border-bottom: 1px solid var(--color-line-dark);
    padding: 10px 0;
}

.renaissance-prompt-bar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.renaissance-prompt-bar-inner::-webkit-scrollbar {
    display: none;
}

.prompt-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-green);
    white-space: nowrap;
    flex-shrink: 0;
}

.prompt-bar-sparkle {
    color: var(--color-orange);
    font-style: normal;
    font-size: 13px;
}

.renaissance-prompt-pills-track {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.renaissance-prompt-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(40, 86, 64, 0.22);
    background: rgba(255, 253, 249, 0.92);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 0.28s var(--renaissance-ease),
        border-color 0.28s ease,
        background-color 0.28s ease,
        box-shadow 0.28s ease;
}

.renaissance-prompt-pill code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-orange-dark);
    background: rgba(212, 123, 97, 0.12);
    padding: 1px 6px;
    border-radius: 999px;
}

.renaissance-prompt-pill:hover,
.renaissance-prompt-pill:focus-visible,
.renaissance-prompt-pill.is-active {
    transform: translateY(-2px);
    border-color: var(--color-orange);
    background: #FFFDF9;
    box-shadow: 0 8px 22px rgba(212, 123, 97, 0.20);
}

.renaissance-prompt-pill:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

/* Floating Botanical Curator Drawer */
.renaissance-curator-drawer {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: min(430px, calc(100vw - 32px));
    z-index: 120;
    background: rgba(255, 253, 249, 0.97);
    border: 1px solid rgba(40, 86, 64, 0.28);
    border-radius: 20px;
    box-shadow:
        0 28px 64px rgba(24, 48, 35, 0.22),
        0 0 0 1px rgba(212, 123, 97, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: lomoCuratorSlideUp 0.42s var(--renaissance-ease);
}

.renaissance-curator-drawer[hidden] {
    display: none !important;
}

@keyframes lomoCuratorSlideUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.curator-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--color-green);
    color: var(--color-cream);
}

.curator-drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.curator-sparkle-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(212, 123, 97, 0.26);
    border: 1px solid rgba(250, 245, 236, 0.35);
    color: var(--color-orange-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.curator-drawer-kicker {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--color-orange-light);
}

.curator-drawer-header h3 {
    margin: 0;
    font-size: 15px;
    color: var(--color-cream);
    font-family: var(--font-serif);
}

.curator-drawer-close {
    appearance: none;
    border: 1px solid rgba(250, 245, 236, 0.25);
    background: rgba(250, 245, 236, 0.1);
    color: var(--color-cream);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.curator-drawer-close:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
}

.curator-drawer-body {
    padding: 16px 18px 18px;
}

.curator-prompt-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.curator-mini-pill {
    appearance: none;
    border: 1px solid var(--color-line-dark);
    background: var(--color-cream);
    color: var(--color-ink);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.curator-mini-pill:hover,
.curator-mini-pill.is-active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #fff;
}

.curator-response-card {
    background: #FAF5EC;
    border: 1px solid var(--color-line-dark);
    border-radius: 14px;
    padding: 14px 16px;
}

.curator-command-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11.5px;
}

.curator-cmd-prefix {
    color: var(--color-orange-dark);
    font-weight: 700;
}

.curator-command-line code {
    font-weight: 700;
    color: var(--color-green);
    background: rgba(40, 86, 64, 0.08);
    padding: 2px 7px;
    border-radius: 6px;
}

.curator-cmd-roman {
    margin-left: auto;
    font-family: var(--font-serif);
    font-size: 11px;
    font-weight: 700;
    color: var(--color-orange-dark);
}

.curator-response-card h4 {
    margin: 0 0 6px;
    font-size: 15.5px;
    color: var(--color-green);
}

.curator-response-card p {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink);
}

.curator-response-meta {
    font-size: 11.5px;
    color: var(--color-ink-muted);
    margin-bottom: 12px;
}

.curator-response-actions {
    display: flex;
    justify-content: flex-end;
}

/* ==========================================================================
   6. MOBILE RESPONSIVE SAFEGUARDS
   ========================================================================== */
@media (max-width: 768px) {
    .depth-stage-arch {
        top: 64px;
        bottom: 165px;
        width: min(320px, 84%);
    }

    .brand-section-header[data-roman-chapter]::before {
        font-size: 3.4rem;
        left: 0;
        top: -16px;
    }
}