/* ============================================================
   amamiya.monster — Frutiger Aero × Leather Craft
   Color Palette (from DESIGN.md):
     #D4C5B0 — Parchment Tan
     #8B5E3C — Burnished Chestnut
     #C2A87A — Aged Vellum
     #DCE8F5 — Frost Pane
     #A8C8E8 — Soft Cerulean
     #EAF4FB — Ice Bloom
     #F7F2EC — Warm Ivory
     #2D1F12 — Dark Tannin
     #3A2A1A — Leather Mid
     #5C3A1E — Leather Warm (Deep Chestnut)
     #EFF5FA — Frost White (text on dark)
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────── */
:root {
    --parchment-tan:     #D4C5B0;
    --chestnut:          #8B5E3C;
    --aged-vellum:       #C2A87A;
    --frost-pane:        #DCE8F5;
    --soft-cerulean:     #A8C8E8;
    --ice-bloom:         #EAF4FB;
    --warm-ivory:        #F7F2EC;
    --dark-tannin:       #2D1F12;
    --leather-dark:      #2D1F12;
    --leather-mid:       #3A2A1A;
    --leather-warm:      #5C3A1E;
    --leather-chestnut:  #8B5E3C;
    --temp-tint:         rgba(168, 200, 232, 0.08);
    --frost-white:       #EFF5FA;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-tannin);
    color: var(--dark-tannin);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    line-height: 1.6;
}

/* ── Full-page temperature overlay ─────────────────────── */
#temp-tint-overlay {
    position: fixed;
    inset: 0;
    background: var(--temp-tint);
    pointer-events: none;
    z-index: 1000;
    transition: background 0.1s linear;
}

/* ── SVG Defs (hidden) ──────────────────────────────────── */
#svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ── Parallax Section Structure ─────────────────────────── */
.parallax-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    inset: -20% 0;
    width: 100%;
}

.layer-bg {
    z-index: 1;
}

.layer-mid {
    z-index: 2;
    pointer-events: none;
}

.layer-fg {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Leather Background SVG ─────────────────────────────── */
.leather-bg-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: sepia(0.3) brightness(1.05);
}

/* ── Glass Panel — Core Vista Aero System ───────────────── */
.glass-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(220,232,245,0.58) 0%, rgba(234,244,251,0.48) 100%);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 8px 32px rgba(80, 110, 140, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    border-radius: 3px;
    overflow: hidden;
}

/* Glass specular top highlight (Vista bevel) */
.glass-specular-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4%;
    min-height: 6px;
    background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Glass shimmer layer (cursor-tracked specular) */
.glass-shimmer-layer {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 30% 30%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, background-position 0.4s ease;
    z-index: 10;
}

.glass-panel:hover .glass-shimmer-layer,
.glass-card:hover .glass-shimmer-layer {
    opacity: 1;
}

/* ── Panel Inner Padding ────────────────────────────────── */
.panel-inner {
    position: relative;
    z-index: 5;
    padding: 48px 52px;
}

/* ── Art Nouveau Corner Brackets ─────────────────────────── */
.ornament-bracket {
    position: absolute;
    width: 36px;
    height: 36px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 6;
}

.ornament-bracket.animate-in {
    opacity: 0.6;
    transform: scale(1.0);
}

.ornament-bracket::before,
.ornament-bracket::after {
    content: '';
    position: absolute;
    background: var(--chestnut);
}

.ornament-bracket.top-left {
    top: 8px;
    left: 8px;
}
.ornament-bracket.top-right {
    top: 8px;
    right: 8px;
}
.ornament-bracket.bottom-left {
    bottom: 8px;
    left: 8px;
}
.ornament-bracket.bottom-right {
    bottom: 8px;
    right: 8px;
}

/* Bracket lines via clip-path decoration */
.ornament-bracket.top-left::before {
    top: 0; left: 0;
    width: 100%; height: 2px;
    clip-path: polygon(0 0, 70% 0, 100% 30%, 80% 100%, 0 100%);
}
.ornament-bracket.top-left::after {
    top: 0; left: 0;
    width: 2px; height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 30% 100%, 0 80%);
}

.ornament-bracket.top-right::before {
    top: 0; right: 0;
    width: 100%; height: 2px;
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 20% 100%, 0 30%);
}
.ornament-bracket.top-right::after {
    top: 0; right: 0;
    width: 2px; height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 70% 100%, 0 70%);
}

.ornament-bracket.bottom-left::before {
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    clip-path: polygon(0 0, 80% 0, 100% 70%, 70% 100%, 0 100%);
}
.ornament-bracket.bottom-left::after {
    bottom: 0; left: 0;
    width: 2px; height: 100%;
    clip-path: polygon(0 20%, 30% 0, 100% 0, 100% 100%, 0 100%);
}

.ornament-bracket.bottom-right::before {
    bottom: 0; right: 0;
    width: 100%; height: 2px;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 70% 100%, 0 70%);
}
.ornament-bracket.bottom-right::after {
    bottom: 0; right: 0;
    width: 2px; height: 100%;
    clip-path: polygon(0 0, 70% 0, 100% 20%, 100% 100%, 0 100%);
}

/* ── Art Nouveau Borders (Lacquer Room frame) ───────────── */
.art-nouveau-border-top,
.art-nouveau-border-bottom {
    position: absolute;
    left: 20px;
    right: 20px;
    height: 18px;
    pointer-events: none;
    z-index: 7;
    opacity: 0.55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='18'%3E%3Cpath d='M0,9 Q10,2 20,9 Q30,16 40,9 Q50,2 60,9 Q70,16 80,9' fill='none' stroke='%238B5E3C' stroke-width='1'/%3E%3Cpath d='M10,4 Q15,9 10,14' fill='none' stroke='%238B5E3C' stroke-width='0.6'/%3E%3Cpath d='M30,14 Q35,9 30,4' fill='none' stroke='%238B5E3C' stroke-width='0.6'/%3E%3Cpath d='M50,4 Q55,9 50,14' fill='none' stroke='%238B5E3C' stroke-width='0.6'/%3E%3Cpath d='M70,14 Q75,9 70,4' fill='none' stroke='%238B5E3C' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
}

.art-nouveau-border-top {
    top: 0;
}

.art-nouveau-border-bottom {
    bottom: 0;
    transform: scaleY(-1);
}

/* ── Typography — Aero Serif System ──────────────────────── */

/* Micro labels (Cormorant SC small caps) */
.micro-label {
    font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--chestnut);
    margin-bottom: 16px;
    opacity: 0.85;
}

/* Main logotype (Cormorant Garamond 300) */
.logotype {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(42px, 6vw, 80px);
    letter-spacing: 0.04em;
    color: var(--dark-tannin);
    line-height: 1.05;
    margin-bottom: 16px;
}

.logotype .dot-monster {
    color: var(--chestnut);
    font-style: italic;
}

/* Section titles (Cormorant Garamond) */
.section-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(32px, 4.5vw, 56px);
    letter-spacing: 0.04em;
    color: var(--dark-tannin);
    line-height: 1.1;
    margin-bottom: 28px;
}

/* Card titles (Playfair Display italic) */
.card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(18px, 2.2vw, 26px);
    color: var(--dark-tannin);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}

/* Body text (Lora as EB Garamond fallback) */
.section-body,
.card-body,
.departure-text {
    font-family: 'EB Garamond', 'Lora', serif;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.85;
    color: var(--leather-warm);
    margin-bottom: 18px;
}

.lora-body {
    font-family: 'EB Garamond', 'Lora', serif;
}

/* Accent italic (Playfair Display italic) */
.accent-italic {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(13px, 1.1vw, 15px);
    color: var(--chestnut);
    letter-spacing: 0.02em;
    opacity: 0.88;
}

/* ── Glass Divider ──────────────────────────────────────── */
.glass-divider {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--soft-cerulean), transparent);
    margin: 24px 0;
    opacity: 0.7;
}

/* ── Section I: Threshold ────────────────────────────────── */
#section-threshold {
    min-height: 100vh;
}

.threshold-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.threshold-panel {
    width: min(520px, 88vw);
    text-align: center;
    transform: translateX(5%);
}

.threshold-panel .panel-inner {
    padding: 64px 56px;
}

.threshold-tagline {
    font-family: 'EB Garamond', 'Lora', serif;
    font-style: italic;
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--chestnut);
    letter-spacing: 0.04em;
    opacity: 0.8;
    margin-top: 8px;
}

/* Frost White used on dark leather sections for text contrast */
.section-frost-text {
    color: var(--frost-white);
}

/* Botanical medallion centered */
.botanical-medallion-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(260px, 35vw, 380px);
    height: clamp(260px, 35vw, 380px);
}

.botanical-medallion {
    width: 100%;
    height: 100%;
}

/* Petal stroke-dashoffset animation */
.petal {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: draw-petal 0.8s ease-out forwards;
}

.petal:nth-child(1) { animation-delay: 0.1s; }
.petal:nth-child(2) { animation-delay: 0.25s; }
.petal:nth-child(3) { animation-delay: 0.4s; }
.petal:nth-child(4) { animation-delay: 0.55s; }
.petal:nth-child(5) { animation-delay: 0.7s; }
.petal:nth-child(6) { animation-delay: 0.85s; }
.petal:nth-child(7) { animation-delay: 1.0s; }
.petal:nth-child(8) { animation-delay: 1.15s; }

.inner-petal {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw-petal 0.8s ease-out forwards;
}
.inner-petal:nth-child(1) { animation-delay: 0.3s; }
.inner-petal:nth-child(2) { animation-delay: 0.45s; }
.inner-petal:nth-child(3) { animation-delay: 0.6s; }
.inner-petal:nth-child(4) { animation-delay: 0.75s; }
.inner-petal:nth-child(5) { animation-delay: 0.9s; }
.inner-petal:nth-child(6) { animation-delay: 1.05s; }
.inner-petal:nth-child(7) { animation-delay: 1.2s; }
.inner-petal:nth-child(8) { animation-delay: 1.35s; }

@keyframes draw-petal {
    to { stroke-dashoffset: 0; }
}

#stamens-group {
    transition: opacity 0.4s ease;
}

#stamens-group.visible {
    opacity: 0.7;
}

/* ── Section II: Spring Bloom ────────────────────────────── */
#section-spring-bloom {
    min-height: 100vh;
}

.spring-bloom-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 80px 8vw;
}

.spring-panel {
    width: min(520px, 52vw);
    transform: translateX(-5%);
}

/* Cherry branch positioning */
.cherry-branch-wrap {
    position: absolute;
    right: 6vw;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(200px, 28vw, 400px);
    height: clamp(300px, 45vw, 500px);
    opacity: 0.88;
    transition: transform 0.1s linear;
}

.cherry-branch-svg {
    width: 100%;
    height: 100%;
}

/* Petal field scattered silhouettes */
.petal-field {
    inset: 0;
}

.petals-field-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* ── Section III: Lacquer Room ───────────────────────────── */
#section-lacquer-room {
    min-height: 100vh;
}

.lacquer-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 6vw;
}

.lacquer-panel {
    width: min(900px, 88vw);
    transform: translateX(3%);
    background: linear-gradient(135deg, rgba(220,232,245,0.70) 0%, rgba(234,244,251,0.62) 100%);
}

.lacquer-inner {
    padding: 56px 64px;
}

.lacquer-title {
    color: var(--dark-tannin);
    margin-bottom: 36px;
}

.lacquer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

/* Fern botanical */
.fern-svg {
    position: absolute;
    right: -2vw;
    bottom: -5%;
    width: clamp(180px, 25vw, 380px);
    height: auto;
    opacity: 0.6;
}

/* ── Section IV: Memory Archive ──────────────────────────── */
#section-memory-archive {
    min-height: 100vh;
}

.archive-content {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 80px 6vw;
}

/* Three floating glass cards — triangular offset */
.glass-card {
    position: absolute;
    background: linear-gradient(135deg, rgba(220,232,245,0.58) 0%, rgba(234,244,251,0.48) 100%);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 8px 32px rgba(80, 120, 160, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    border-radius: 3px;
    overflow: hidden;
    width: min(300px, 28vw);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 16px 48px rgba(80, 120, 160, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.card-1 {
    left: 8vw;
    top: 12%;
}

.card-2 {
    left: 36vw;
    top: 32%;
}

.card-3 {
    left: 62vw;
    top: 18%;
}

.card-botanical {
    padding: 20px 20px 0;
    display: flex;
    justify-content: center;
}

.card-botanical-svg {
    width: 80px;
    height: 80px;
}

.glass-card .panel-inner {
    padding: 16px 24px 28px;
}

.card-body {
    font-size: clamp(12px, 1vw, 14px);
    line-height: 1.7;
    color: var(--leather-warm);
}

/* Lily botanical in archive section */
.lily-svg {
    position: absolute;
    right: 3vw;
    bottom: 5%;
    width: clamp(120px, 16vw, 220px);
    height: auto;
    opacity: 0.5;
}

/* ── Section V: Departure ────────────────────────────────── */
#section-departure {
    min-height: 100vh;
    background-color: var(--chestnut);
}

.departure-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 6vw 12vh;
}

.departure-panel {
    width: min(720px, 80vw);
    transform: translateX(-4%);
    background: linear-gradient(135deg, rgba(247,242,236,0.55) 0%, rgba(220,232,245,0.45) 100%);
}

.departure-panel .panel-inner {
    padding: 44px 52px;
}

.departure-title {
    font-size: clamp(26px, 3.5vw, 48px);
    margin-bottom: 22px;
}

.departure-text {
    font-size: clamp(14px, 1.15vw, 16px);
    color: var(--leather-warm);
    margin-bottom: 0;
}

.departure-line {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, var(--soft-cerulean), var(--aged-vellum), transparent);
    margin: 24px 0;
    opacity: 0.6;
}

.departure-tagline {
    font-size: clamp(11px, 0.95vw, 13px);
    color: var(--chestnut);
}

/* Rose botanical wrap */
.rose-wrap {
    position: absolute;
    right: 10vw;
    top: 8%;
    width: clamp(160px, 22vw, 280px);
    height: clamp(260px, 35vw, 400px);
}

.rose-botanical-svg {
    width: 100%;
    height: 100%;
}

/* ── Section Entry Animations ───────────────────────────── */
.glass-panel,
.glass-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.3s ease;
}

.glass-panel.in-view,
.glass-card.in-view {
    opacity: 1;
    transform: translateY(0);
}

.glass-card.in-view:nth-child(1) { transition-delay: 0.1s; }
.glass-card.in-view:nth-child(2) { transition-delay: 0.3s; }
.glass-card.in-view:nth-child(3) { transition-delay: 0.5s; }

/* Override for threshold panel — start visible after small delay */
#threshold-glass {
    opacity: 0;
    transform: translateY(20px);
}

#threshold-glass.in-view {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.0s ease 0.2s, transform 1.0s ease 0.2s;
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dark-tannin);
}

::-webkit-scrollbar-thumb {
    background: var(--chestnut);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--aged-vellum);
}

/* ── Section bleeding transitions (100px overlap zone) ──── */
.parallax-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, rgba(45,31,18,0.4) 100%);
    pointer-events: none;
    z-index: 4;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .spring-panel {
        width: min(440px, 84vw);
        transform: none;
    }

    .cherry-branch-wrap {
        opacity: 0.4;
        width: clamp(140px, 30vw, 240px);
    }

    .lacquer-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lacquer-panel {
        width: min(600px, 90vw);
        transform: none;
    }

    .glass-card {
        position: relative;
        width: min(280px, 80vw);
        left: auto;
        top: auto;
    }

    .archive-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        justify-content: center;
    }

    .card-1, .card-2, .card-3 {
        position: relative;
        left: auto;
        top: auto;
    }

    .threshold-panel {
        transform: none;
        width: min(420px, 88vw);
    }

    .departure-panel {
        transform: none;
        width: min(600px, 88vw);
    }
}

@media (max-width: 600px) {
    .panel-inner {
        padding: 32px 28px;
    }

    .lacquer-inner {
        padding: 36px 28px;
    }

    .threshold-panel .panel-inner {
        padding: 44px 32px;
    }

    .fern-svg,
    .lily-svg {
        display: none;
    }

    .rose-wrap {
        opacity: 0.35;
        width: 120px;
    }
}