/* ==========================================================================
   bada.cafe — Bauhaus Roastery
   Color Palette:
     Parchment Cream:  #f5f0e6  (background)
     Toasted Oat:      #e8dbc4  (surfaces)
     Honeycomb Gold:   #c8973e  (accent/interactive)
     Espresso Brown:   #3b2314  (text)
     Roasted Umber:    #6b4226  (secondary)
     Steamed Milk:     #faf7f2  (highlights)
     Dark Roast:       #1e110a  (deep shadows/footer)
     Burnt Sienna:     #c0571e  (energetic spark)
   Fonts:
     Zilla Slab 700 — display
     Archivo 400/600 — body
     IBM Plex Mono 400 — accent monospace
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    color: #3b2314;
    background-color: #f5f0e6;
    overflow-x: hidden;
    position: relative;
}

/* --- Noise Texture SVG (global) --- */
#noise-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply;
    opacity: 0.04;
}

/* --- Entry Overlay --- */
#entry-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e110a;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: background-color 1500ms ease;
}

#entry-overlay.lightening {
    background-color: #f5f0e6;
}

#entry-overlay.hidden {
    pointer-events: none;
    opacity: 0;
    transition: opacity 800ms ease;
}

#entry-blob {
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #c8973e 0%, transparent 70%);
    opacity: 0;
    transition: none;
    z-index: 1;
}

#entry-blob.expanding {
    opacity: 1;
    animation: blobExpand 1200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes blobExpand {
    0% {
        width: 0;
        height: 0;
        border-radius: 50%;
    }
    30% {
        width: 100px;
        height: 100px;
        border-radius: 40% 60% 55% 45% / 50% 55% 45% 50%;
    }
    60% {
        width: 160px;
        height: 160px;
        border-radius: 35% 65% 50% 50% / 45% 55% 55% 45%;
    }
    100% {
        width: 240px;
        height: 240px;
        border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    }
}

#entry-title {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.03em;
    text-transform: lowercase;
    color: #f5f0e6;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
}

#entry-overlay.lightening #entry-title {
    color: #3b2314;
    transition: color 1500ms ease;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
}

.letter.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dot-separator {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #c0571e;
    border-radius: 50%;
    margin: 0 2px;
    opacity: 0;
    transform: scale(0);
    align-self: center;
    position: relative;
    top: -0.1em;
}

.dot-separator.visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms ease, transform 200ms ease;
}

.dot-separator.pulse {
    animation: dotPulse 400ms ease;
}

@keyframes dotPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* --- Main Content --- */
#main-content {
    opacity: 0;
    transition: opacity 600ms ease;
}

#main-content.visible {
    opacity: 1;
}

/* --- Z-Pattern Grid --- */
.z-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100vh auto auto 100vh;
    gap: 24px;
    width: 100%;
    position: relative;
}

/* --- Row 1: Hero --- */
.z-top-left {
    grid-column: 1 / 6;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
    position: relative;
    z-index: 2;
}

.hero-mark {
    position: relative;
}

.hero-title {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 7vw, 6rem);
    letter-spacing: 0.03em;
    text-transform: lowercase;
    color: #3b2314;
    line-height: 1.1;
}

.hero-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #c0571e;
    border-radius: 50%;
    margin: 0 4px;
    vertical-align: middle;
    position: relative;
    top: -0.08em;
}

.hero-tagline {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #6b4226;
    margin-top: 16px;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

/* Steam Blobs */
.steam-blobs {
    position: absolute;
    top: 10%;
    left: 20%;
    width: 60%;
    height: 40%;
    pointer-events: none;
    z-index: 1;
}

.steam-blob {
    position: absolute;
    border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    animation: morphBlob1 12s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
    opacity: 0;
    transition: opacity 600ms ease;
}

.steam-blob.visible {
    opacity: 1;
}

.blob-1 {
    width: 180px;
    height: 180px;
    background: rgba(200, 151, 62, 0.15);
    top: 0;
    left: 10%;
    animation-duration: 16s;
    animation-name: morphBlob1;
}

.blob-2 {
    width: 120px;
    height: 120px;
    background: rgba(232, 219, 196, 0.25);
    top: 20%;
    left: 50%;
    animation-duration: 12s;
    animation-name: morphBlob2;
}

.blob-3 {
    width: 240px;
    height: 240px;
    background: rgba(200, 151, 62, 0.1);
    top: -10%;
    left: 30%;
    animation-duration: 18s;
    animation-name: morphBlob3;
}

.blob-4 {
    width: 90px;
    height: 90px;
    background: rgba(232, 219, 196, 0.2);
    top: 30%;
    left: 70%;
    animation-duration: 8s;
    animation-name: morphBlob1;
}

.blob-5 {
    width: 140px;
    height: 140px;
    background: rgba(200, 151, 62, 0.12);
    top: 5%;
    left: 65%;
    animation-duration: 14s;
    animation-name: morphBlob2;
}

@keyframes morphBlob1 {
    0%   { border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%; }
    25%  { border-radius: 50% 50% 40% 60% / 40% 50% 60% 50%; }
    50%  { border-radius: 40% 60% 70% 30% / 60% 40% 50% 50%; }
    75%  { border-radius: 60% 40% 50% 50% / 50% 60% 30% 70%; }
    100% { border-radius: 35% 65% 55% 45% / 45% 55% 50% 50%; }
}

@keyframes morphBlob2 {
    0%   { border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%; }
    25%  { border-radius: 35% 65% 55% 45% / 50% 50% 60% 40%; }
    50%  { border-radius: 60% 40% 50% 50% / 40% 60% 45% 55%; }
    75%  { border-radius: 45% 55% 65% 35% / 55% 45% 50% 50%; }
    100% { border-radius: 40% 60% 45% 55% / 50% 55% 40% 60%; }
}

@keyframes morphBlob3 {
    0%   { border-radius: 40% 60% 55% 45% / 45% 55% 50% 50%; }
    20%  { border-radius: 55% 45% 40% 60% / 50% 50% 55% 45%; }
    40%  { border-radius: 45% 55% 60% 40% / 55% 45% 40% 60%; }
    60%  { border-radius: 60% 40% 45% 55% / 40% 60% 55% 45%; }
    80%  { border-radius: 35% 65% 50% 50% / 55% 45% 50% 50%; }
    100% { border-radius: 50% 50% 55% 45% / 45% 55% 45% 55%; }
}

/* --- Top-Right Gradient Panel --- */
.z-top-right {
    grid-column: 7 / 13;
    grid-row: 1;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 800ms ease, transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.z-top-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.gradient-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c8973e 0%, #e8dbc4 30%, #6b4226 60%, #c8973e 100%);
    background-size: 400% 400%;
    animation: gradientShift 20s ease infinite;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 100% 50%; }
    50%  { background-position: 100% 0%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    opacity: 0.06;
    pointer-events: none;
}

/* --- Z-Pattern Intersection Pins --- */
.z-pin {
    position: absolute;
    z-index: 5;
    opacity: 0;
    transform: scale(0);
    transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.z-pin.visible {
    opacity: 1;
    transform: scale(1);
}

.pin-circle {
    width: 12px;
    height: 12px;
    background-color: #c0571e;
    border-radius: 50%;
}

.z-pin-top {
    top: 50vh;
    right: calc(50% - 6px);
}

.z-pin-mid-1 {
    position: absolute;
    top: 25%;
    left: 35%;
}

.z-pin-mid-2 {
    position: absolute;
    top: 60%;
    left: 65%;
}

/* --- Z-Pattern Directional Triangles --- */
.z-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 17px solid #3b2314;
    z-index: 5;
    opacity: 0;
    transform: scale(0);
    transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.z-triangle.visible {
    opacity: 1;
    transform: scale(1);
}

.triangle-1 {
    top: 12%;
    left: 25%;
}

.triangle-2 {
    top: 42%;
    left: 50%;
}

.triangle-3 {
    top: 75%;
    left: 72%;
}

/* --- Z-Pattern Diamonds --- */
.z-diamond {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1px solid #6b4226;
    transform: rotate(45deg) scale(0);
    z-index: 5;
    opacity: 0;
    transition: opacity 400ms ease, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.z-diamond.visible {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.diamond-1 { top: 5%; right: 10%; }
.diamond-2 { top: 30%; right: 25%; }
.diamond-3 { top: 55%; left: 8%; }
.diamond-4 { top: 85%; left: 20%; }

/* --- Diagonal Section --- */
.z-diagonal {
    grid-column: 3 / 11;
    grid-row: 2 / 4;
    position: relative;
    padding: 80px 0;
}

/* Connector Lines */
.connector-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connector-line {
    stroke: #3b2314;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1200ms ease;
}

.connector-line.drawn {
    stroke-dashoffset: 0;
}

/* --- Content Cards --- */
.content-card {
    position: relative;
    background-color: #f5f0e6;
    border: 1px solid #6b4226;
    border-radius: 0 0 32px 0;
    padding: 32px;
    margin-bottom: 32px;
    z-index: 3;
    opacity: 0;
    transition: opacity 600ms ease,
                transform 600ms ease,
                background-color 200ms ease,
                border-radius 300ms cubic-bezier(0.37, 0, 0.63, 1);
    overflow: hidden;
}

.content-card.visible {
    opacity: 1;
    transform: translateX(0) !important;
}

.card-1 {
    margin-left: 0;
    transform: translateX(-30px);
}

.card-2 {
    margin-left: 15%;
    transform: translateX(30px);
}

.card-3 {
    margin-left: 30%;
    transform: translateX(-30px);
}

.card-4 {
    margin-left: 45%;
    transform: translateX(30px);
}

.content-card:hover {
    background-color: #faf7f2;
    border-radius: 0 0 48px 0;
}

.card-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    opacity: 0.07;
    pointer-events: none;
    z-index: -1;
}

.card-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: #c8973e;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 12px;
}

.card-heading {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    color: #3b2314;
    margin-bottom: 16px;
    line-height: 1.2;
}

.card-body {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    color: #3b2314;
    max-width: 520px;
}

/* --- Blob Dividers --- */
.blob-divider {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 24px 0;
    z-index: 3;
    position: relative;
}

.mini-blob {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: rgba(107, 66, 38, 0.2);
    border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    animation: morphMini 10s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

.mini-blob:nth-child(odd) {
    width: 24px;
    height: 24px;
    animation-duration: 8s;
    animation-name: morphMini2;
}

.mini-blob:nth-child(3n) {
    width: 40px;
    height: 40px;
    animation-duration: 12s;
}

@keyframes morphMini {
    0%   { border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%; }
    50%  { border-radius: 60% 40% 50% 50% / 40% 60% 55% 45%; }
    100% { border-radius: 45% 55% 35% 65% / 55% 45% 50% 50%; }
}

@keyframes morphMini2 {
    0%   { border-radius: 50% 50% 40% 60% / 60% 40% 55% 45%; }
    50%  { border-radius: 35% 65% 55% 45% / 45% 55% 40% 60%; }
    100% { border-radius: 55% 45% 60% 40% / 50% 50% 45% 55%; }
}

/* --- Footer / Crema Field --- */
.z-bottom {
    grid-column: 1 / 13;
    grid-row: 4;
    background-color: #1e110a;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.crema-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.crema-blob {
    position: absolute;
    border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    animation: morphBlob1 12s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

.cb-1  { width: 100px; height: 100px; top: 10%; left: 5%;  background: rgba(232, 219, 196, 0.12); animation-duration: 14s; }
.cb-2  { width: 80px;  height: 80px;  top: 25%; left: 15%; background: rgba(200, 151, 62, 0.1);  animation-duration: 10s; animation-name: morphBlob2; }
.cb-3  { width: 120px; height: 120px; top: 5%;  left: 25%; background: rgba(232, 219, 196, 0.08); animation-duration: 16s; animation-name: morphBlob3; }
.cb-4  { width: 60px;  height: 60px;  top: 40%; left: 10%; background: rgba(200, 151, 62, 0.15);  animation-duration: 9s; }
.cb-5  { width: 150px; height: 150px; top: 15%; left: 35%; background: rgba(232, 219, 196, 0.06); animation-duration: 18s; animation-name: morphBlob2; }
.cb-6  { width: 70px;  height: 70px;  top: 55%; left: 20%; background: rgba(200, 151, 62, 0.12);  animation-duration: 11s; animation-name: morphBlob3; }
.cb-7  { width: 90px;  height: 90px;  top: 30%; left: 50%; background: rgba(232, 219, 196, 0.1);  animation-duration: 13s; }
.cb-8  { width: 110px; height: 110px; top: 60%; left: 40%; background: rgba(200, 151, 62, 0.08);  animation-duration: 15s; animation-name: morphBlob2; }
.cb-9  { width: 50px;  height: 50px;  top: 20%; left: 60%; background: rgba(232, 219, 196, 0.14); animation-duration: 8s;  animation-name: morphBlob3; }
.cb-10 { width: 130px; height: 130px; top: 45%; left: 55%; background: rgba(200, 151, 62, 0.07);  animation-duration: 17s; }
.cb-11 { width: 85px;  height: 85px;  top: 10%; left: 70%; background: rgba(232, 219, 196, 0.11); animation-duration: 12s; animation-name: morphBlob2; }
.cb-12 { width: 65px;  height: 65px;  top: 35%; left: 75%; background: rgba(200, 151, 62, 0.13);  animation-duration: 10s; animation-name: morphBlob3; }
.cb-13 { width: 140px; height: 140px; top: 55%; left: 65%; background: rgba(232, 219, 196, 0.05); animation-duration: 19s; }
.cb-14 { width: 75px;  height: 75px;  top: 15%; left: 85%; background: rgba(200, 151, 62, 0.1);   animation-duration: 11s; animation-name: morphBlob2; }
.cb-15 { width: 95px;  height: 95px;  top: 50%; left: 80%; background: rgba(232, 219, 196, 0.09); animation-duration: 14s; animation-name: morphBlob3; }
.cb-16 { width: 55px;  height: 55px;  top: 70%; left: 30%; background: rgba(200, 151, 62, 0.11);  animation-duration: 9s;  }
.cb-17 { width: 105px; height: 105px; top: 65%; left: 85%; background: rgba(232, 219, 196, 0.07); animation-duration: 16s; animation-name: morphBlob2; }
.cb-18 { width: 45px;  height: 45px;  top: 75%; left: 50%; background: rgba(200, 151, 62, 0.14);  animation-duration: 8s;  animation-name: morphBlob3; }
.cb-19 { width: 115px; height: 115px; top: 80%; left: 15%; background: rgba(232, 219, 196, 0.06); animation-duration: 20s; }
.cb-20 { width: 70px;  height: 70px;  top: 72%; left: 70%; background: rgba(200, 151, 62, 0.09);  animation-duration: 13s; animation-name: morphBlob2; }

.footer-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.footer-title {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.03em;
    text-transform: lowercase;
    color: #f5f0e6;
    line-height: 1.1;
}

.footer-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #c0571e;
    border-radius: 50%;
    margin: 0 3px;
    vertical-align: middle;
    position: relative;
    top: -0.08em;
}

.footer-text {
    font-family: 'Archivo', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    color: #e8dbc4;
    margin-top: 12px;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

.footer-timestamp {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    color: #6b4226;
    display: block;
    margin-top: 20px;
    letter-spacing: 0.1em;
}

.footer-noise {
    z-index: 2;
}

/* --- Rosetta Watermark --- */
.rosetta-watermark {
    position: fixed;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.05;
    background:
        radial-gradient(ellipse 60px 120px at 50% 40%, rgba(232, 219, 196, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 55px 110px at 45% 50%, rgba(232, 219, 196, 0.7) 0%, transparent 70%),
        radial-gradient(ellipse 50px 100px at 55% 50%, rgba(232, 219, 196, 0.7) 0%, transparent 70%),
        radial-gradient(ellipse 45px 90px at 40% 55%, rgba(232, 219, 196, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 45px 90px at 60% 55%, rgba(232, 219, 196, 0.6) 0%, transparent 70%),
        radial-gradient(ellipse 40px 80px at 35% 60%, rgba(232, 219, 196, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 40px 80px at 65% 60%, rgba(232, 219, 196, 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 35px 70px at 50% 65%, rgba(232, 219, 196, 0.4) 0%, transparent 70%);
}

/* --- Navigation Orb --- */
.nav-orb {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 48px;
    height: 48px;
    background-color: #c8973e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    box-shadow: 0 4px 16px rgba(30, 17, 10, 0.08);
    transition: border-radius 300ms cubic-bezier(0.37, 0, 0.63, 1),
                width 300ms cubic-bezier(0.37, 0, 0.63, 1),
                height 300ms cubic-bezier(0.37, 0, 0.63, 1);
    animation: orbPulse 2s ease infinite;
}

@keyframes orbPulse {
    0%   { box-shadow: 0 0 0 0 rgba(200, 151, 62, 0.3); }
    70%  { box-shadow: 0 0 0 12px rgba(200, 151, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 151, 62, 0); }
}

.nav-orb.active {
    border-radius: 16px;
    width: 56px;
    height: 56px;
    animation: none;
}

.orb-label {
    font-family: 'Zilla Slab', serif;
    font-weight: 700;
    font-size: 0.7rem;
    color: #f5f0e6;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.nav-orb.active .orb-label {
    opacity: 0;
    transition: opacity 200ms ease;
}

/* Nav Shapes */
.nav-shapes {
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

.nav-orb.active .nav-shapes {
    pointer-events: all;
    opacity: 1;
}

.nav-shape {
    position: absolute;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5f0e6;
    text-decoration: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-orb.active .nav-shape {
    transform: translate(-50%, -50%) scale(1);
}

.nav-shape svg {
    width: 20px;
    height: 20px;
}

.shape-circle {
    top: -80px;
    left: 0;
}

.shape-triangle {
    top: 40px;
    left: -69px;
}

.shape-square {
    top: 40px;
    left: 69px;
}

.nav-shape:hover svg {
    color: #c0571e;
    transition: color 200ms ease;
}

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .z-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .z-top-left {
        min-height: 80vh;
        padding: 32px 24px;
    }

    .z-top-right {
        min-height: 40vh;
        transform: translateX(0);
        opacity: 1;
    }

    .z-diagonal {
        padding: 40px 24px;
    }

    .content-card {
        margin-left: 0 !important;
        transform: translateX(0) !important;
    }

    .card-1, .card-2, .card-3, .card-4 {
        margin-left: 0;
    }

    .z-bottom {
        min-height: 80vh;
    }

    .connector-lines {
        display: none;
    }

    .z-triangle,
    .z-diamond,
    .z-pin-mid-1,
    .z-pin-mid-2 {
        display: none;
    }

    .steam-blobs {
        width: 100%;
        left: 0;
    }

    .blob-1, .blob-3 {
        width: 120px;
        height: 120px;
    }

    .blob-5 {
        width: 80px;
        height: 80px;
    }

    .hero-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .nav-orb {
        bottom: 20px;
        right: 20px;
    }
}

/* --- Selection Style --- */
::selection {
    background-color: rgba(200, 151, 62, 0.3);
    color: #3b2314;
}