/* ============================================================
   amamya.xyz  ::  Maison Amamya
   Maximalist art-deco salon -- burgundy & cream, grounded-earthy
   ============================================================ */

:root {
    --vin-sombre:    #5A1A24;
    --cinnabar:      #7A2C36;
    --vellum:        #F2E7CE;
    --gilt:          #D9C49A;
    --oxblood:       #3B1015;
    --tobacco:       #8C6B3A;
    --brass:         #C7A24A;
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--vin-sombre);
    color: var(--vellum);
    font-family: "Cormorant Garamond", Georgia, serif;
    overflow-x: hidden;
}

/* ---------- Persistent AX sigil ---------- */
.sigil {
    position: fixed;
    top: 24px;
    left: 24px;
    width: 88px;
    height: 88px;
    z-index: 100;
    display: block;
    filter: drop-shadow(0 2px 0 var(--oxblood));
}
.sigil svg { width: 100%; height: 100%; display: block; }
.sigil .spoke-ring line {
    stroke: var(--brass);
    stroke-width: 2;
    transform-origin: 60px 60px;
}
.sigil .sigil-hex {
    stroke: var(--brass);
    stroke-width: 2.4;
    stroke-dasharray: 280;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 600ms ease;
    transform-box: fill-box;
    transform-origin: center;
}
.sigil .sigil-mono path {
    stroke: var(--brass);
    stroke-width: 3;
    stroke-linecap: round;
}
.sigil svg { transition: transform 600ms cubic-bezier(.16,.84,.32,1); transform-origin: 50% 50%; }
.sigil:hover svg { transform: rotate(30deg); }
.sigil:hover .sigil-hex { stroke-dashoffset: 280; }
/* JS-driven counter-rotation */
.sigil[data-rot] svg { transform: rotate(var(--rot, 0deg)); }
.sigil[data-rot]:hover svg { transform: rotate(calc(var(--rot, 0deg) + 30deg)); }

/* ---------- Promenade / scroll-snap ---------- */
#promenade {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
}

/* ---------- Chamber base ---------- */
.chamber {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}
.chamber--burgundy { background: var(--vin-sombre); color: var(--vellum); }
.chamber--cream    { background: var(--vellum);     color: var(--oxblood); }

/* ---------- Fluting columns ---------- */
.flute {
    position: relative;
    z-index: 1;
    align-self: stretch;
    background-image: repeating-linear-gradient(to right,
        var(--cinnabar) 0 6px, var(--vin-sombre) 6px 12px);
}
.flute--cream {
    background-image: repeating-linear-gradient(to right,
        var(--gilt) 0 6px, var(--cinnabar) 6px 12px);
}
.flute--col1  { grid-column: 1; }
.flute--col3  { grid-column: 3; }
.flute--col8  { grid-column: 8; }
.flute--col12 { grid-column: 12; }

/* ---------- Sharp-angle frame system ---------- */
.chamber-frame {
    position: absolute;
    inset: 26px;
    z-index: 2;
    pointer-events: none;
    background: var(--cinnabar);
    clip-path: polygon(
        0 28px, 28px 28px, 28px 0,
        calc(100% - 28px) 0, calc(100% - 28px) 28px, 100% 28px,
        100% calc(100% - 28px), calc(100% - 28px) calc(100% - 28px), calc(100% - 28px) 100%,
        28px 100%, 28px calc(100% - 28px), 0 calc(100% - 28px)
    );
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 4px;
}
.chamber-frame--oxblood { background: var(--oxblood); }
.chamber-frame--inner {
    inset: 42px;
    padding: 2px;
    opacity: 0.6;
    clip-path: polygon(
        0 18px, 18px 18px, 18px 0,
        calc(100% - 18px) 0, calc(100% - 18px) 18px, 100% 18px,
        100% calc(100% - 18px), calc(100% - 18px) calc(100% - 18px), calc(100% - 18px) 100%,
        18px 100%, 18px calc(100% - 18px), 0 calc(100% - 18px)
    );
}

/* ---------- Giant chamber numeral ---------- */
.chamber-numeral {
    grid-column: 2 / 4;
    grid-row: 1;
    z-index: 3;
    font-family: "Poiret One", "Limelight", sans-serif;
    font-size: clamp(8rem, 22vw, 18rem);
    line-height: 1;
    color: var(--gilt);
    opacity: 0.55;
    text-align: center;
    align-self: center;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.02em;
}
.chamber-numeral--burgundy { color: var(--cinnabar); opacity: 0.4; }

/* ---------- Inner zoom wrapper ---------- */
.chamber-inner {
    grid-column: 4 / 12;
    grid-row: 1;
    z-index: 4;
    display: grid;
    grid-template-columns: 4fr 3fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(4rem, 8vh, 7rem) clamp(2rem, 4vw, 4rem);
    transform: scale(var(--zoom, 1));
    transition: transform 120ms linear;
    will-change: transform;
}

/* mirrored layout for "right" chambers: portrait on the right */
.chamber--right .chamber-inner { grid-template-columns: 3fr 4fr; }
.chamber--right .chamber-inner .portrait { order: 2; }
.chamber--right .chamber-inner .chamber-text { order: 1; }
.chamber--right .chamber-numeral { grid-column: 10 / 12; }
.chamber--right .chamber-inner { grid-column: 2 / 9; }

/* ---------- Portrait ---------- */
.portrait {
    position: relative;
    transform: rotate(var(--rot, 0deg));
    transition: transform 120ms linear;
}
.portrait-svg {
    width: 100%;
    height: auto;
    max-height: 78vh;
    display: block;
}
.figure-line path,
.figure-line circle,
.figure-line ellipse {
    stroke: var(--oxblood);
    stroke-width: 1.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.figure-line path[fill="#7A2C36"] { fill: var(--cinnabar); }
.figure-line path[fill="#3B1015"],
.figure-line ellipse[fill="#3B1015"],
.figure-line polygon[fill="#3B1015"] { fill: var(--oxblood); stroke: none; }
.halo polygon { opacity: 0.85; }

/* ---------- Chamber text ---------- */
.chamber-text { max-width: 38rem; }
.kicker {
    display: block;
    font-family: "Cinzel Decorative", serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    color: var(--brass);
}
.chamber--cream .kicker { color: var(--cinnabar); }
.chamber-title {
    font-family: "Limelight", serif;
    font-weight: 400;
    font-size: clamp(3rem, 9vw, 8rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--vellum);
}
.chamber--cream .chamber-title { color: var(--oxblood); }
.title-rule {
    display: block;
    width: 70%;
    height: 5px;
    margin: 0.8rem 0 1.6rem;
    background: var(--brass);
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 12px 100%);
}
.chamber--cream .title-rule { background: var(--cinnabar); }

.prose {
    font-size: 1.125rem;
    line-height: 1.7;
    font-style: italic;
    font-weight: 400;
    max-width: 38rem;
    text-align: left;
}

/* ---------- Stepped-pyramid drop cap ---------- */
.dropcap {
    float: left;
    font-family: "Limelight", serif;
    font-style: normal;
    font-size: 5em;
    line-height: 0.78;
    padding: 0.12em 0.18em 0 0.1em;
    margin: 0.04em 0.24em 0 0;
    color: var(--vellum);
    background: var(--vin-sombre);
    clip-path: polygon(
        0 33%, 33% 33%, 33% 0,
        100% 0, 100% 67%, 67% 67%, 67% 100%, 0 100%
    );
    shape-outside: polygon(
        0 33%, 33% 33%, 33% 0,
        100% 0, 100% 67%, 67% 67%, 67% 100%, 0 100%
    );
}
.chamber--cream .dropcap {
    color: var(--vin-sombre);
    background: var(--gilt);
}
.chamber--burgundy .dropcap {
    color: var(--vin-sombre);
    background: var(--gilt);
}

/* ---------- Chevron seam ---------- */
.chevron-seam {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 32px;
    z-index: 5;
    background-image:
        repeating-linear-gradient(90deg,
            var(--cinnabar) 0 64px,
            var(--gilt)     64px 96px);
    -webkit-mask: repeating-linear-gradient(90deg,
        #000 0 32px, transparent 32px 32px);
}
.chevron-seam::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(90deg,
            var(--cinnabar) 0 64px,
            var(--gilt)     64px 96px);
    clip-path: polygon(0 0, 16px 100%, 32px 0, 48px 100%, 64px 0, 80px 100%, 96px 0);
}
.chevron-seam {
    background:
        repeating-linear-gradient(135deg, var(--gilt) 0 22px, var(--cinnabar) 22px 44px),
        var(--cinnabar);
    clip-path: polygon(
        0 100%, 0 0, 4% 100%, 8% 0, 12% 100%, 16% 0, 20% 100%, 24% 0, 28% 100%,
        32% 0, 36% 100%, 40% 0, 44% 100%, 48% 0, 52% 100%, 56% 0, 60% 100%, 64% 0,
        68% 100%, 72% 0, 76% 100%, 80% 0, 84% 100%, 88% 0, 92% 100%, 96% 0, 100% 100%
    );
}
.chevron-seam::before { display: none; }
.chevron-seam--last { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .chamber { grid-template-columns: repeat(8, 1fr); }
    .flute--col8, .flute--col12 { display: none; }
    .chamber-inner,
    .chamber--right .chamber-inner {
        grid-column: 2 / 8;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 6rem 1.5rem 4rem;
    }
    .chamber--right .chamber-inner .portrait,
    .chamber--right .chamber-inner .chamber-text { order: initial; }
    .chamber-numeral,
    .chamber--right .chamber-numeral {
        grid-column: 1 / 9;
        grid-row: 1;
        align-self: start;
        opacity: 0.18;
        font-size: clamp(7rem, 30vw, 14rem);
    }
    .chamber-inner { align-self: start; }
    .portrait-svg { max-height: 50vh; }
    .sigil { width: 64px; height: 64px; top: 14px; left: 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .chamber-inner, .portrait { transform: none !important; transition: none; }
    .sigil svg { transition: none; }
}