/* ========================================================================
   ppuzzle.works -- isometric puzzle-box atelier
   Palette: Birch Parchment, Deep Walnut, Blueprint Ink, Patina Teal,
            Aged Copper, Dovetail Gray, Draft Straw, Ebony Chamber
   ======================================================================== */

:root {
    --c-birch:        #F5EDE0;
    --c-walnut:       #3D2E1F;
    --c-blueprint:    #2B3A4A;
    --c-teal:         #5B8A72;
    --c-copper:       #B87A4B;
    --c-dovetail:     #8A7E72;
    --c-draftstraw:   #C4B8A8;
    --c-ebony:        #1E1A16;

    --grid-line: rgba(196, 184, 168, 0.18);
    --easing-puzzle: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --iso-x: 30deg;
    --iso-y: 30deg;
}

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

html {
    scroll-behavior: smooth;
    background: var(--c-birch);
}

body {
    font-family: 'Nunito Sans', system-ui, sans-serif;
    color: var(--c-walnut);
    background: var(--c-birch);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* ============================ CONSTRUCTION GRID ========================= */

.construction-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(30deg, transparent 49.6%, var(--grid-line) 49.6%, var(--grid-line) 50.4%, transparent 50.4%),
        linear-gradient(150deg, transparent 49.6%, var(--grid-line) 49.6%, var(--grid-line) 50.4%, transparent 50.4%),
        linear-gradient(0deg, transparent 49.6%, rgba(196,184,168,0.08) 49.6%, rgba(196,184,168,0.08) 50.4%, transparent 50.4%);
    background-size: 64px 37px, 64px 37px, 64px 64px;
    opacity: 0.55;
}

/* =========================== NAV CUBE STACK ============================= */

.cube-stack {
    position: fixed;
    left: 28px;
    bottom: 28px;
    z-index: 50;
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
    animation: stack-breathe 3.2s ease-in-out infinite;
}

@keyframes stack-breathe {
    0%, 100% { transform: scale(1.0); }
    50%      { transform: scale(1.02); }
}

.nav-cube {
    position: relative;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transform-style: preserve-3d;
    transition: transform 320ms var(--easing-puzzle);
}

.nav-cube .cube-top,
.nav-cube .cube-left,
.nav-cube .cube-right {
    position: absolute;
    inset: 4px;
    transition: background-color 320ms var(--easing-puzzle);
}

.nav-cube .cube-top {
    background: var(--c-draftstraw);
    transform: rotate(45deg) scale(0.72, 0.42) translateY(-12px);
    border: 1px solid var(--c-blueprint);
}

.nav-cube .cube-left {
    background: var(--c-dovetail);
    opacity: 0.85;
    clip-path: polygon(0 30%, 50% 60%, 50% 100%, 0 70%);
    border: 1px solid var(--c-blueprint);
}

.nav-cube .cube-right {
    background: var(--c-dovetail);
    opacity: 0.6;
    clip-path: polygon(50% 60%, 100% 30%, 100% 70%, 50% 100%);
    border: 1px solid var(--c-blueprint);
}

.nav-cube .cube-num {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Azeret Mono', monospace;
    font-size: 10px;
    color: var(--c-dovetail);
    letter-spacing: 0.15em;
    transition: color 240ms var(--easing-puzzle), opacity 240ms;
    opacity: 0;
}

.nav-cube:hover .cube-num,
.nav-cube.active .cube-num {
    opacity: 1;
}

.nav-cube.active .cube-top {
    background: var(--c-teal);
}
.nav-cube.active .cube-left {
    background: var(--c-teal);
    opacity: 0.8;
}
.nav-cube.active .cube-right {
    background: var(--c-teal);
    opacity: 0.55;
}
.nav-cube.active .cube-num {
    color: var(--c-teal);
}

.nav-cube:hover {
    transform: translateY(-2px);
}

/* ============================ BRAND STAMP =============================== */

.brand-stamp {
    position: fixed;
    top: 24px;
    right: 32px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
}

.stamp-mono {
    font-family: 'Azeret Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--c-teal);
    text-transform: uppercase;
}

.stamp-mono.dim {
    color: var(--c-dovetail);
    font-size: 10px;
    letter-spacing: 0.22em;
}

/* =============================== STAGE ================================== */

.puzzle-stack {
    position: relative;
    z-index: 5;
}

.chamber {
    position: relative;
    min-height: 120vh;
    width: 100%;
}

.chamber-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    overflow: hidden;
    perspective: 1800px;
    transform-style: preserve-3d;
}

.chamber:nth-child(odd) .chamber-stage {
    background:
        linear-gradient(180deg, rgba(245,237,224,0) 0%, rgba(245,237,224,0.7) 100%),
        var(--c-birch);
}

.chamber:nth-child(even) .chamber-stage {
    background:
        linear-gradient(180deg, rgba(245,237,224,0.95) 0%, rgba(196,184,168,0.18) 100%),
        var(--c-birch);
}

#chamber-4 .chamber-stage {
    background: var(--c-ebony);
}

#chamber-7 .chamber-stage {
    background:
        linear-gradient(180deg, var(--c-birch) 0%, rgba(91, 138, 114, 0.06) 100%);
}

/* ============================ IMPOSSIBLE BG ============================= */

.impossible-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1200ms ease;
}

.chamber.in-view .impossible-bg {
    opacity: 0.12;
}

.impossible-bg svg {
    width: min(70vw, 720px);
    height: min(70vw, 720px);
    animation: impossible-rotate 120s linear infinite;
}

@keyframes impossible-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#chamber-4 .impossible-bg svg g {
    stroke: var(--c-draftstraw);
}

/* ============================== KUMIKI RIG ============================== */

.kumiki-rig {
    position: relative;
    width: min(720px, 80vw);
    height: min(560px, 70vh);
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-45deg);
    z-index: 2;
}

.puzzle-piece {
    position: absolute;
    transform-style: preserve-3d;
    transition:
        transform 900ms var(--easing-puzzle) var(--slide-delay, 0ms),
        opacity 900ms ease var(--slide-delay, 0ms);
    will-change: transform;
}

/* Default assembled position grid for puzzle pieces */
.kumiki-rig .p1 { left: 28%; top: 22%; }
.kumiki-rig .p2 { left: 50%; top: 14%; }
.kumiki-rig .p3 { left: 64%; top: 32%; }
.kumiki-rig .p4 { left: 18%; top: 46%; }
.kumiki-rig .p5 { left: 44%; top: 52%; }
.kumiki-rig .p6 { left: 60%; top: 60%; }

/* Disassembly direction transforms (applied when chamber is in disassembled state) */
.chamber.in-view .puzzle-piece {
    --slide-x: 0;
    --slide-y: 0;
    --slide-z: 0;
}

.chamber.in-view .puzzle-piece[style*="x-pos"]   { transform: translate3d(var(--slide-distance), 0, 0); }
.chamber.in-view .puzzle-piece[style*="x-neg"]   { transform: translate3d(calc(var(--slide-distance) * -1), 0, 0); }
.chamber.in-view .puzzle-piece[style*="y-pos"]   { transform: translate3d(0, var(--slide-distance), 0); }
.chamber.in-view .puzzle-piece[style*="y-neg"]   { transform: translate3d(0, calc(var(--slide-distance) * -1), 0); }
.chamber.in-view .puzzle-piece[style*="z-pos"]   { transform: translate3d(calc(var(--slide-distance) * 0.4), calc(var(--slide-distance) * -0.4), 0); }
.chamber.in-view .puzzle-piece[style*="z-neg"]   { transform: translate3d(calc(var(--slide-distance) * -0.4), calc(var(--slide-distance) * 0.4), 0); }

/* ============================ ISOMETRIC VOLUMES ========================= */

.iso-volume {
    position: relative;
    transform-style: preserve-3d;
}

.iso-volume .face {
    position: absolute;
    inset: 0;
    transform-origin: center;
    border: 1px solid rgba(43, 58, 74, 0.6);
}

.iso-volume .face.top {
    background: var(--c-birch);
    transform: translateZ(0);
}

.iso-volume .face.left {
    background: var(--c-dovetail);
    opacity: 0.85;
    clip-path: polygon(0 50%, 50% 100%, 50% 130%, 0 80%);
    transform: translate(-25%, 25%);
    height: 100%;
    width: 50%;
    left: 0;
}

.iso-volume .face.right {
    background: var(--c-dovetail);
    opacity: 0.62;
    clip-path: polygon(50% 100%, 100% 50%, 100% 80%, 50% 130%);
    transform: translate(25%, 25%);
    height: 100%;
    width: 50%;
    right: 0;
}

/* simplified isometric block sizes */
.iso-volume.large-cube  { width: 160px; height: 96px; }
.iso-volume.mid-cube    { width: 130px; height: 78px; }
.iso-volume.small-cube  { width: 90px;  height: 54px; }
.iso-volume.tiny-cube   { width: 60px;  height: 36px; }
.iso-volume.tall-prism  { width: 100px; height: 70px; }
.iso-volume.wide-slab   { width: 200px; height: 60px; }
.iso-volume.flat-slab   { width: 180px; height: 50px; }

.iso-volume.copper .face.top    { background: var(--c-copper); }
.iso-volume.copper .face.left   { background: #6b3f1f; opacity: 0.85; }
.iso-volume.copper .face.right  { background: #6b3f1f; opacity: 0.62; }

/* Wood grain pattern on top faces */
.face.top.wood-grain {
    background-image:
        repeating-linear-gradient(
            8deg,
            transparent 0px,
            transparent 5px,
            rgba(61, 46, 31, 0.06) 5px,
            rgba(61, 46, 31, 0.06) 6px,
            transparent 6px,
            transparent 11px,
            rgba(61, 46, 31, 0.04) 11px,
            rgba(61, 46, 31, 0.04) 12px
        );
    background-color: var(--c-birch);
}

.face.top.wood-grain.rot90 {
    background-image:
        repeating-linear-gradient(
            98deg,
            transparent 0px,
            transparent 5px,
            rgba(61, 46, 31, 0.06) 5px,
            rgba(61, 46, 31, 0.06) 6px,
            transparent 6px,
            transparent 11px,
            rgba(61, 46, 31, 0.04) 11px,
            rgba(61, 46, 31, 0.04) 12px
        );
}

/* =========================== DIMENSION ANNOTATIONS ====================== */

.dimension-annotations {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.dim-svg {
    width: 100%;
    height: 100%;
}

.dim-svg .anim-stroke {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 800ms ease 200ms;
}

.chamber.in-view .dim-svg .anim-stroke {
    stroke-dashoffset: 0;
}

.dim-svg text {
    opacity: 0;
    transition: opacity 600ms ease 800ms;
}

.chamber.in-view .dim-svg text {
    opacity: 0.65;
}

/* =============================== CONTENT ================================ */

.chamber-content {
    position: absolute;
    z-index: 10;
    width: min(560px, 92vw);
    pointer-events: auto;
}

.content-entry { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.content-left   { left: 7vw; top: 50%; transform: translateY(-50%); }
.content-right  { right: 7vw; top: 50%; transform: translateY(-50%); }
.content-center { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

.content-plate {
    background: rgba(245, 237, 224, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--c-draftstraw);
    padding: 32px 36px;
    position: relative;
    box-shadow:
        4px 4px 0 0 rgba(138, 126, 114, 0.18),
        8px 8px 0 0 rgba(138, 126, 114, 0.08);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 480ms ease 350ms, transform 480ms var(--easing-puzzle) 350ms;
}

.chamber.in-view .content-plate {
    opacity: 1;
    transform: translateY(0);
}

.content-plate.top-plate {
    padding: 48px 56px;
}

.content-plate.dark-plate {
    background: rgba(30, 26, 22, 0.86);
    border: 1px solid rgba(196, 184, 168, 0.28);
    box-shadow:
        4px 4px 0 0 rgba(0, 0, 0, 0.4),
        8px 8px 0 0 rgba(0, 0, 0, 0.2);
}

/* ============================== TYPOGRAPHY ============================== */

.chamber-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 4.5rem);
    color: var(--c-blueprint);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 0.95;
    margin: 14px 0 22px;
    text-shadow: 1px 1px 0 var(--c-draftstraw);
}

.chamber-title.light {
    color: var(--c-birch);
    text-shadow: 1px 1px 0 rgba(196, 184, 168, 0.25);
}

.chamber-body {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: var(--c-walnut);
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 52ch;
}

.content-entry .chamber-body { margin-left: auto; margin-right: auto; }
.content-center .chamber-body { margin-left: auto; margin-right: auto; }

.chamber-body.light {
    color: var(--c-birch);
}

.annotation {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Azeret Mono', monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: var(--c-teal);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.annotation.light {
    color: var(--c-teal);
}

.iso-glyph {
    display: inline-block;
    width: 10px;
    height: 10px;
    background:
        linear-gradient(45deg, var(--c-teal) 50%, transparent 50%),
        linear-gradient(-45deg, var(--c-teal) 50%, transparent 50%);
    background-size: 10px 5px;
    background-position: 0 0, 0 5px;
    background-repeat: no-repeat;
    transform: translateY(1px) rotate(0deg);
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
    justify-content: center;
    margin-top: 18px;
}

/* ============================== SPECS ROW =============================== */

.spec-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    border-top: 1px dashed var(--c-draftstraw);
    padding-top: 18px;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 4px 0;
    border-bottom: 1px dotted rgba(138, 126, 114, 0.35);
}

.spec-key {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-teal);
}

.spec-val {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    color: var(--c-walnut);
    font-size: 0.95rem;
}

/* ============================ ARCHIVE ROWS ============================== */

.archive-entries {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 18px;
    border-top: 1px solid var(--c-draftstraw);
}

.archive-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(196, 184, 168, 0.5);
    transition: background-color 280ms var(--easing-puzzle), padding-left 280ms var(--easing-puzzle);
}

.archive-row:hover {
    background-color: rgba(91, 138, 114, 0.06);
    padding-left: 8px;
}

.arc-num {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.72rem;
    color: var(--c-teal);
    letter-spacing: 0.14em;
}

.arc-name {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    color: var(--c-blueprint);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.arc-meta {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.72rem;
    color: var(--c-dovetail);
}

/* ============================ DIM GRID (CHAMBER 4) ====================== */

.dim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed rgba(196, 184, 168, 0.4);
}

.dim-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid rgba(196, 184, 168, 0.3);
    background: rgba(245, 237, 224, 0.04);
}

.dim-label {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--c-teal);
    text-transform: uppercase;
}

.dim-value {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-birch);
    letter-spacing: 0.08em;
}

/* ============================ PROCESS LIST ============================== */

.process-list {
    list-style: none;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.process-step {
    display: grid;
    grid-template-columns: 40px 140px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(196, 184, 168, 0.4);
    transition: transform 360ms var(--easing-puzzle);
}

.process-step:hover {
    transform: translateX(4px);
}

.step-no {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.78rem;
    color: var(--c-copper);
    letter-spacing: 0.12em;
    font-weight: 500;
}

.step-name {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 600;
    color: var(--c-blueprint);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.92rem;
}

.step-desc {
    font-family: 'Nunito Sans', sans-serif;
    color: var(--c-walnut);
    font-size: 0.92rem;
}

/* ============================ COMMISSION FORM =========================== */

.commission-form {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Azeret Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--c-teal);
    text-transform: uppercase;
}

.form-line {
    display: block;
    height: 32px;
    border-bottom: 1px solid var(--c-walnut);
    background: repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 6px,
        rgba(196, 184, 168, 0.5) 6px,
        rgba(196, 184, 168, 0.5) 7px
    );
    background-size: 14px 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: border-color 320ms var(--easing-puzzle);
}

.form-row:hover .form-line {
    border-color: var(--c-teal);
}

.form-action {
    position: relative;
    margin-top: 12px;
    padding: 14px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: 'Azeret Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-birch);
    align-self: flex-start;
    transform-style: preserve-3d;
    transition: transform 280ms var(--easing-puzzle);
}

.form-action .action-face {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.form-action .action-face.top {
    background: var(--c-blueprint);
    border: 1px solid var(--c-walnut);
}

.form-action .action-face.left {
    background: var(--c-walnut);
    width: 6px;
    height: 100%;
    left: -6px;
    transform: skewY(45deg);
    transform-origin: right;
    border: 1px solid var(--c-walnut);
}

.form-action .action-face.right {
    background: var(--c-ebony);
    height: 6px;
    width: 100%;
    bottom: -6px;
    left: 0;
    transform: skewX(45deg);
    transform-origin: top;
    border: 1px solid var(--c-walnut);
}

.action-label {
    position: relative;
    z-index: 5;
}

.form-action:hover {
    transform: translate(-2px, -2px);
}

.form-action.active .action-face.top {
    background: var(--c-teal);
}

/* ============================== CLOSING MARKS =========================== */

.closing-marks {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid var(--c-draftstraw);
    padding-top: 20px;
}

.mark-line {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: baseline;
}

.mark-key {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.72rem;
    color: var(--c-teal);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mark-val {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    color: var(--c-blueprint);
    letter-spacing: 0.04em;
    font-size: 0.95rem;
}

.seal-cluster {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    border: 1px dashed var(--c-copper);
}

.seal-cube {
    position: relative;
    width: 28px;
    height: 28px;
}

.seal-cube .seal-face {
    position: absolute;
    inset: 0;
    border: 1px solid var(--c-walnut);
}

.seal-cube .seal-face.top {
    background: var(--c-copper);
    transform: rotate(45deg) scale(0.7, 0.42) translateY(-10px);
}

.seal-cube .seal-face.left {
    background: var(--c-dovetail);
    clip-path: polygon(0 30%, 50% 60%, 50% 100%, 0 70%);
}

.seal-cube .seal-face.right {
    background: var(--c-dovetail);
    opacity: 0.72;
    clip-path: polygon(50% 60%, 100% 30%, 100% 70%, 50% 100%);
}

.seal-text {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    color: var(--c-copper);
    text-transform: uppercase;
}

/* ============================== SCROLL CUE ============================== */

.scroll-cue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
}

.chamber.in-view .scroll-cue {
    opacity: 1;
}

.cue-text {
    font-family: 'Azeret Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.32em;
    color: var(--c-teal);
}

.cue-arrow {
    width: 14px;
    height: 14px;
    border-right: 1.5px solid var(--c-teal);
    border-bottom: 1.5px solid var(--c-teal);
    transform: rotate(45deg);
    animation: cue-bob 1.6s ease-in-out infinite;
}

@keyframes cue-bob {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
    50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* ============================== FLOOR MARKER ============================ */

.floor-marker {
    position: fixed;
    right: 32px;
    bottom: 30px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--c-draftstraw);
    background: rgba(245, 237, 224, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-family: 'Azeret Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--c-blueprint);
    pointer-events: none;
}

.floor-num {
    color: var(--c-teal);
    font-weight: 500;
    font-size: 1rem;
    transition: color 320ms;
}

.floor-divider {
    width: 16px;
    height: 1px;
    background: var(--c-draftstraw);
}

.floor-total {
    color: var(--c-dovetail);
}

/* ============================== RESPONSIVE ============================== */

@media (max-width: 768px) {
    .kumiki-rig {
        transform: rotateX(45deg) rotateZ(-45deg) scale(0.7);
    }

    .iso-volume.large-cube  { width: 110px; height: 70px; }
    .iso-volume.mid-cube    { width: 90px;  height: 60px; }
    .iso-volume.small-cube  { width: 65px;  height: 40px; }
    .iso-volume.tiny-cube   { width: 45px;  height: 28px; }
    .iso-volume.tall-prism  { width: 70px;  height: 52px; }
    .iso-volume.wide-slab   { width: 130px; height: 44px; }
    .iso-volume.flat-slab   { width: 110px; height: 38px; }

    .content-plate {
        padding: 22px 24px;
    }

    .content-plate.top-plate {
        padding: 28px 28px;
    }

    .content-left, .content-right {
        left: 4vw;
        right: 4vw;
        width: auto;
    }

    .cube-stack {
        left: 14px;
        bottom: 14px;
    }

    .nav-cube {
        width: 28px;
        height: 28px;
    }

    .brand-stamp {
        right: 14px;
        top: 14px;
    }

    .floor-marker {
        right: 14px;
        bottom: 14px;
    }

    .process-step {
        grid-template-columns: 32px 100px 1fr;
        gap: 8px;
    }

    .archive-row {
        grid-template-columns: 28px 1fr auto;
    }

    .dim-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .kumiki-rig {
        transform: rotateX(40deg) rotateZ(-45deg) scale(0.55);
    }

    .chamber-title {
        letter-spacing: 0.1em;
    }
}