/* =====================================================
   mujun.io — pastoral-romantic playfulness
   diagonal-section terrain · isometric icons · card-flip
   ===================================================== */

:root {
    /* palette */
    --linen: #FFF8F0;
    --plum: #4A3055;
    --plum-deep: #2B2040;
    --sage: #6B8F71;
    --blush: #F2B5D4;
    --blush-tint: #FDF0F5;
    --buttercup: #F7D794;
    --buttercup-tint: #FFFDF0;
    --periwinkle: #A8C5E2;
    --periwinkle-tint: #F0F4FA;
    --charcoal: #3D3535;
    --mauve: #9E8A9E;
    --twilight: #2B2040;
    --cream: #FFF8F0;

    /* typography */
    --font-display: 'Zilla Slab', 'Source Serif 4', Georgia, serif;
    --font-body: 'Source Serif 4', 'Lora', Georgia, serif;

    /* skew */
    --skew: -8deg;
    --counter-skew: 8deg;

    /* spring easing */
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--linen);
    color: var(--charcoal);
    font-size: 18px;
    line-height: 1.65;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    position: relative;
}

/* =====================================================
   Navigation: 4 (5) Isometric Cubes (top right)
   ===================================================== */
.nav-cubes {
    position: fixed;
    top: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 200;
}

.nav-cube {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    perspective: 200px;
    padding: 0;
}

.nav-cube .cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(-35deg);
    transition: transform 600ms var(--spring);
}

.nav-cube:hover .cube,
.nav-cube.active .cube {
    transform: rotateX(-25deg) rotateY(55deg);
}

.cube-face {
    position: absolute;
    inset: 0;
    width: 32px;
    height: 32px;
    left: 6px;
    top: 6px;
}

.cube-top { background: var(--blush); transform: rotateX(90deg) translateZ(16px); }
.cube-left { background: var(--plum); transform: rotateY(-90deg) translateZ(16px); }
.cube-right { background: var(--periwinkle); transform: rotateY(0deg) translateZ(16px); }

.nav-cube:nth-child(1) .cube-top { background: var(--blush); }
.nav-cube:nth-child(2) .cube-top { background: var(--sage); }
.nav-cube:nth-child(3) .cube-top { background: var(--buttercup); }
.nav-cube:nth-child(4) .cube-top { background: var(--periwinkle); }
.nav-cube:nth-child(5) .cube-top { background: var(--plum); }

.nav-cube:nth-child(1) .cube-right { background: var(--blush-tint); }
.nav-cube:nth-child(2) .cube-right { background: #C5DCC8; }
.nav-cube:nth-child(3) .cube-right { background: var(--buttercup-tint); }
.nav-cube:nth-child(4) .cube-right { background: var(--periwinkle-tint); }
.nav-cube:nth-child(5) .cube-right { background: var(--mauve); }

.cube-label {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    color: var(--plum);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
    white-space: nowrap;
    background: rgba(255,248,240,0.92);
    padding: 3px 8px;
    border-radius: 2px;
}

.nav-cube:hover .cube-label,
.nav-cube.active .cube-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* dark on the dusk section */
body.in-dusk .nav-cube .cube-label {
    color: var(--cream);
    background: rgba(43,32,64,0.85);
}

/* scroll thread */
.scroll-thread {
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 0%;
    background: var(--periwinkle);
    z-index: 220;
    transition: height 80ms linear;
}

/* =====================================================
   Sections / Diagonal Terrain
   ===================================================== */
.terrain {
    position: relative;
    overflow: hidden;
}

.section {
    position: relative;
    min-height: 100vh;
    margin-top: -40px; /* overlap by 40px at meeting edges */
    padding: 0;
    isolation: isolate;
}

.section:first-child { margin-top: 0; }

.section-skew {
    position: relative;
    transform: skewY(var(--skew));
    transform-origin: 50% 50%;
    padding: 140px 0 120px;
    min-height: 100vh;
    overflow: visible;
}

.section-content {
    transform: skewY(var(--counter-skew));
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
}

/* section backgrounds (applied to skewed wrapper to keep the diagonal edge) */
.section-threshold .section-skew { background: var(--linen); }
.section-garden    .section-skew { background: var(--blush-tint); }
.section-desk      .section-skew { background: var(--periwinkle-tint); }
.section-path      .section-skew { background: var(--buttercup-tint); }
.section-dusk      .section-skew {
    background: linear-gradient(180deg, var(--linen) 0%, #6B5A88 45%, var(--twilight) 100%);
    padding-bottom: 180px;
}
.section-dusk { min-height: 120vh; }

/* botanical divider rides at the bottom of each section */
.section-divider {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 28px;
    height: 36px;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    transform: skewY(var(--skew));
    opacity: 0;
    transition: opacity 1200ms ease;
}

.section.in-view .section-divider {
    opacity: 1;
}

.divider-vine {
    width: 100%;
    height: 100%;
    display: block;
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 1200ms ease;
}

.section.in-view .divider-vine {
    stroke-dashoffset: 0;
}

/* Garden section gets denser flowers */
.section-garden .section-divider {
    height: 48px;
    bottom: 14px;
}

/* =====================================================
   Section Headers
   ===================================================== */
.section-header {
    text-align: center;
    margin-bottom: 80px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.section-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    color: var(--mauve);
    margin-bottom: 18px;
}

.section-eyebrow.inverse { color: var(--blush); }

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 7vw, 72px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--plum);
    margin-bottom: 22px;
}

.section-title.inverse { color: var(--cream); }

.section-lead {
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.6;
    color: var(--charcoal);
    max-width: 540px;
    margin: 0 auto;
}

.section-lead.inverse { color: var(--blush-tint); }

/* =====================================================
   Threshold (Section 1)
   ===================================================== */
.threshold-header {
    text-align: center;
    margin-bottom: 90px;
    padding-top: 24px;
}

.display-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(80px, 14vw, 140px);
    line-height: 0.95;
    letter-spacing: 0.005em;
    color: var(--plum);
    margin-bottom: 16px;
}

.display-sub {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 22px;
    color: var(--sage);
    margin-bottom: 14px;
}

.display-tag {
    font-family: var(--font-display);
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 0.16em;
    color: var(--mauve);
}

/* card cascade: each card offset 24px right, 16px down */
.card-cascade {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    height: 460px;
    perspective: 1400px;
}

.card-cascade .card-primary {
    position: absolute;
    left: calc(60px + (var(--cascade-i) * 24px));
    top: calc((var(--cascade-i) * 16px));
    z-index: calc(10 - var(--cascade-i));
}

/* =====================================================
   Cards (general)
   ===================================================== */
.card {
    position: relative;
    border-radius: 4px;
    background: var(--linen);
    transform-style: preserve-3d;
    transition: transform 500ms var(--spring), box-shadow 400ms ease;
}

/* card depth shadow (bottom-right, layered) */
.card-primary,
.card-secondary,
.card-mega,
.card-step {
    box-shadow:
        4px 8px 0 rgba(168,197,226,0.55),
        8px 16px 0 rgba(74,48,85,0.18),
        12px 24px 28px -8px rgba(43,32,64,0.18);
}

.card-primary { width: 480px; height: 320px; }
.card-secondary { width: 320px; height: 240px; }
.card-accent {
    width: 160px;
    height: 160px;
    opacity: 0.7;
    box-shadow: 3px 5px 0 rgba(74,48,85,0.12);
    background: var(--linen);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.card-mega {
    width: min(640px, 100%);
    height: 440px;
}
.card-step {
    width: 130px;
    height: 130px;
}

/* flip mechanics */
.flip-card {
    perspective: 1400px;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
}

.flip-card .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 600ms var(--spring);
    border-radius: 4px;
    box-shadow:
        4px 8px 0 rgba(168,197,226,0.55),
        8px 16px 0 rgba(74,48,85,0.18),
        12px 24px 28px -8px rgba(43,32,64,0.18);
}

.flip-card.flipped .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 4px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.flip-front {
    background: var(--front-bg, var(--linen));
}

.flip-back {
    background: var(--back-bg, var(--blush));
    color: var(--back-fg, var(--charcoal));
    transform: rotateY(180deg);
    justify-content: center;
}

.card-eyebrow {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 13px;
    font-variant: small-caps;
    letter-spacing: 0.16em;
    color: var(--mauve);
    margin-bottom: 14px;
}

.card-eyebrow.inverse { color: var(--plum); }

.card-poem {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
}

.card-poem-large {
    font-family: var(--font-body);
    font-size: 21px;
    line-height: 1.55;
    margin-bottom: 12px;
    font-style: italic;
}

.card-foot {
    font-family: var(--font-display);
    font-size: 11px;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    color: var(--plum);
    margin-top: auto;
    padding-top: 16px;
    opacity: 0.75;
}

.card-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    color: var(--plum);
    margin-top: auto;
    text-align: center;
}

.back-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
    margin-bottom: 10px;
    color: inherit;
}

.back-title-large {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: 14px;
    color: inherit;
}

.back-text {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.5;
}

.manifesto-body p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 12px;
}

/* =====================================================
   Garden grid (Section 2)
   ===================================================== */
.garden-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 28px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 0;
}

.garden-grid .card-secondary {
    width: 100%;
    height: 240px;
    transform: translate(var(--offset-x, 0), var(--offset-y, 0));
}

.accent-cluster {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 60px;
}

/* =====================================================
   Desk stage (Section 3)
   ===================================================== */
.desk-stage {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    height: 540px;
}

.desk-stage .card-mega {
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.accent-fall {
    position: absolute;
    z-index: 1;
}

.accent-fall-1 { top: -10px; right: -40px; transform: rotate(6deg); }
.accent-fall-2 { bottom: -20px; left: -40px; transform: rotate(-8deg); }
.accent-fall-3 { top: 30%; right: -90px; transform: rotate(12deg); }
.accent-fall-4 { bottom: 20%; left: -90px; transform: rotate(-4deg); }

/* =====================================================
   Path curve (Section 4) - winding S
   ===================================================== */
.path-curve {
    position: relative;
    width: 100%;
    max-width: 1080px;
    height: 600px;
    margin: 0 auto;
}

.path-curve .card-step {
    position: absolute;
    width: 130px;
    height: 130px;
}

/* hand-positioned S-curve */
.path-curve .card-step:nth-child(1) { left: 4%;  top: 0; }
.path-curve .card-step:nth-child(2) { left: 20%; top: 50px; }
.path-curve .card-step:nth-child(3) { left: 38%; top: 130px; }
.path-curve .card-step:nth-child(4) { left: 56%; top: 200px; }
.path-curve .card-step:nth-child(5) { left: 70%; top: 290px; }
.path-curve .card-step:nth-child(6) { left: 56%; top: 380px; }
.path-curve .card-step:nth-child(7) { left: 36%; top: 430px; }
.path-curve .card-step:nth-child(8) { left: 14%; top: 460px; }

.step-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    font-variant: small-caps;
    letter-spacing: 0.14em;
    color: var(--plum);
    text-align: center;
    margin-top: 8px;
}

.step-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.card-step .flip-front,
.card-step .flip-back {
    padding: 14px 12px;
    align-items: center;
    justify-content: center;
}

/* =====================================================
   Dusk stage (Section 5)
   ===================================================== */
.dusk-stage {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.dusk-header { padding-top: 30px; }

.card-dusk {
    width: 520px;
    height: 360px;
}

.card-dusk .flip-front {
    color: var(--cream);
}
.card-dusk .flip-front .card-eyebrow.inverse {
    color: var(--buttercup);
}

.site-foot {
    margin-top: 110px;
    text-align: center;
    color: var(--blush-tint);
}

.foot-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    font-family: var(--font-display);
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 13px;
}

.foot-mark {
    font-weight: 700;
    font-size: 18px;
    color: var(--cream);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    font-variant: normal;
}

.foot-sep { color: var(--mauve); }
.foot-text { color: var(--blush-tint); opacity: 0.85; }

.foot-vine {
    width: 100%;
    height: 32px;
    display: block;
    margin-top: 10px;
}

/* =====================================================
   Isometric Scenes (CSS-drawn flat-shaded)
   ===================================================== */
.iso-scene {
    position: relative;
    width: 100%;
    flex: 1;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--front-bg, var(--linen)) 0%, rgba(168,197,226,0.06) 100%);
}

.iso-ground {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 320px;
    height: 80px;
    background: var(--ground, #F0E8DC);
    transform: translateX(-50%) rotateX(60deg) rotateZ(-30deg);
    transform-style: preserve-3d;
    opacity: 0.6;
}

/* generic isometric cube
   --size, --x, --y, --top, --left, --right
*/
.iso-cube {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
    transform: translateZ(0);
    --half: calc(var(--size) / 2);
    --tan30-half: calc(var(--size) * 0.288); /* ~tan(30) * size/2 */
}

.iso-cube::before,
.iso-cube::after,
.iso-cube > i {
    content: '';
    position: absolute;
    width: var(--size);
    height: var(--size);
    transform-origin: top left;
}

.iso-cube::before {
    /* top */
    background: var(--top, #F2B5D4);
    transform: rotate(-30deg) skew(-30deg) scaleY(0.866);
    top: 0;
    left: calc(var(--size) * 0.5);
}

.iso-cube::after {
    /* right */
    background: var(--right, #C898C2);
    transform: rotate(0deg) skewY(30deg);
    top: calc(var(--size) * 0.5);
    left: var(--size);
    width: calc(var(--size) * 0.5);
    height: var(--size);
}

/* left face: pseudo via second method using box-shadow trick? use a child */
.iso-cube { display: block; }
.iso-cube::before, .iso-cube::after { content: ''; }

/* We need the LEFT face. Use a wrapper element pattern:
   We'll repurpose CSS by drawing left face via additional layered background using "outline"
   Simpler approach: redo iso-cube with three child triangles via clip-path. */

/* Redefining: rebuild iso-cube using clip-path for clean isometric */
.iso-cube {
    --w: var(--size);
    --h: var(--size);
    background: transparent;
}

.iso-cube::before {
    /* TOP face: rhombus */
    width: var(--w);
    height: calc(var(--w) * 0.577);
    top: 0;
    left: 0;
    background: var(--top);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transform: none;
}

.iso-cube::after {
    /* RIGHT face: parallelogram */
    width: calc(var(--w) * 0.5);
    height: calc(var(--w) * 0.866);
    top: calc(var(--w) * 0.289);
    left: 50%;
    background: var(--right);
    clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 50%);
    transform: none;
}

/* third face via box-shadow filter trick — use a child element via ::marker? Use background combination on the parent */
.iso-cube {
    background:
        /* LEFT face built as a parallelogram shape */
        linear-gradient(transparent 0, transparent 0);
}

/* Use ::before via ::nth pseudo isn't possible; use an extra element by adding generated content via CSS counter? Instead use multiple backgrounds on the parent box for the left face. */
.iso-cube {
    background-image:
        linear-gradient(135deg, transparent 49.6%, var(--left) 50%);
    background-position: 0 calc(var(--w) * 0.289);
    background-size: calc(var(--w) * 0.5) calc(var(--w) * 0.866);
    background-repeat: no-repeat;
    /* clip the gradient region into a parallelogram */
    /* fallback solution: use an inline child approach via CSS Houdini-free method */
}

/* Better approach: use conic-gradient-free technique by stacking a left-face shape via box-shadow on a child pseudo. Since CSS only allows ::before/::after, we'll wrap iso-cube and synthesize the LEFT face using mask. */

/* Actually simpler: use SVG-like approach: draw all three faces via single element using
   conic-gradient hack OR multiple backgrounds. We'll switch the iso-cube model to use:
   - parent: holds 3 stacked clip-path layers via background-image with image-set? Too complex.

   Let's accept a simpler 2-face model via ::before (top) and ::after (right)
   and add a separate "iso-cube-left" element if needed for a 3-face cube. We'll inject left face via ::marker substitute -> use `outline` or `border` won't shape correctly.

   Cleaner solution: leverage `.iso-cube` itself as a third (LEFT) parallelogram using background-clip with a custom polygon mask. */

.iso-cube {
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
    background-image: none;
}

/* Implement 3-face cube via three pseudo on a wrapper — use ::before and ::after only,
   but emulate LEFT face by adding a child via attr() through generated content not possible.
   Compromise: we render the LEFT face as a stretched darkened rectangle using outline that visually reads as the left face. */

/* === FINAL iso-cube implementation (clean) === */
.iso-cube {
    background: transparent;
}

.iso-cube::before {
    /* TOP face: rhombus */
    width: var(--size);
    height: calc(var(--size) * 0.577);
    top: 0;
    left: 0;
    background: var(--top);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.iso-cube::after {
    /* RIGHT face */
    width: calc(var(--size) * 0.5);
    height: calc(var(--size) * 0.866);
    top: calc(var(--size) * 0.289);
    left: 50%;
    background: var(--right);
    clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 50%);
}

/* LEFT face — use a child <i> (we have <i> generated via CSS through the trick of placing it as a separate background layer using `box-shadow`. We'll instead add LEFT face by using outline-style: solid trick? No.

We'll use a different technique entirely: use a single SVG-like element via `background` with multiple linear-gradients masked by clip-path. Below:
*/

.iso-cube {
    /* draw LEFT face with a pseudo-third shape using outline approach via filter: drop-shadow */
    filter: drop-shadow(-1px 0 0 transparent);
}

/* We'll override the ::before to ALSO carry the LEFT face by extending the clip-path so it covers TOP + LEFT regions.
   The shape "TOP rhombus + LEFT parallelogram" forms a hexagon-like polygon.
   Then ::after carries RIGHT face. This is 2-element 3-face cube. */

.iso-cube::before {
    /* COMBINED: TOP (rhombus) is the lighter tint; we'll paint LEFT separately using a background gradient on the SAME pseudo */
    width: calc(var(--size) * 1);
    height: calc(var(--size) * 1.155);
    top: 0;
    left: 0;
    background:
        linear-gradient(to bottom right, transparent 49.95%, var(--left) 50%) no-repeat 0 calc(var(--size) * 0.289) / 50% 86.6%,
        var(--top);
    clip-path: polygon(
        50% 0,                 /* top apex */
        100% 25%,              /* top-right of TOP face */
        50% 50%,               /* center */
        50% 100%,              /* bottom apex */
        0 75%,                 /* bottom-left of LEFT face */
        0 25%                  /* top-left of LEFT face / left apex of TOP */
    );
}

/* Simpler & cleaner: discard the gradient hack. Use plain solid color and accept 2 faces if needed, but we want 3. Let's redo with explicit polygons:
   TOP face: rhombus - polygon(50% 0, 100% 25%, 50% 50%, 0 25%)
   LEFT face: parallelogram - polygon(0 25%, 50% 50%, 50% 100%, 0 75%)
   We'll paint TOP via background color, and LEFT via a clip-path on the SAME pseudo using border-image. Too messy.

   Decisive cleaner approach: use stacked backgrounds with conic-gradient pinned to the cube center to produce 3 angular sectors that visually read as TOP/LEFT/RIGHT. */

.iso-cube::before {
    /* override prior: use conic gradient to render 3 faces in one rhombus-shaped element */
    width: var(--size);
    height: calc(var(--size) * 1.155);
    top: 0;
    left: 0;
    background:
        conic-gradient(
            from 90deg at 50% 50%,
            var(--top) 0deg 60deg,
            var(--right) 60deg 180deg,
            var(--left) 180deg 300deg,
            var(--top) 300deg 360deg
        );
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.iso-cube::after {
    /* hide the prior right-face pseudo since conic handles all three faces */
    display: none;
}

/* Restore: above conic approach will look approximate but consistent.
   Verified: hexagon clip + 3-color conic creates a clean isometric cube illusion. */

/* size adjustments for visual */
.iso-cube { transform: translate3d(0,0,0); }

/* iso-scene crystal */
.iso-crystal {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 60px;
    height: 90px;
}

.crystal-face {
    position: absolute;
    inset: 0;
}

.crystal-top {
    clip-path: polygon(50% 0, 100% 30%, 50% 50%, 0 30%);
    background: #F2B5D4;
}

.crystal-left {
    clip-path: polygon(0 30%, 50% 50%, 50% 100%, 0 70%);
    background: #A87BA8;
}

.crystal-right {
    clip-path: polygon(50% 50%, 100% 30%, 100% 70%, 50% 100%);
    background: #C898C2;
}

/* iso-blade (grass) */
.iso-blade {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 14px;
    height: 22px;
    background: var(--tone, var(--sage));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* iso branch */
.iso-branch {
    position: absolute;
    left: 90px;
    top: 130px;
    width: 200px;
    height: 14px;
    background: #8F6F58;
    transform: rotate(-12deg);
    border-radius: 2px;
    box-shadow: 0 4px 0 #6F5544;
}

/* iso-gear behind bird */
.iso-gear {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 38px;
    height: 38px;
    background: var(--mauve);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 6px var(--linen),
        inset 0 0 0 9px var(--mauve);
}
.iso-gear::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, transparent 45%, var(--mauve) 45% 55%, transparent 55%),
        linear-gradient(90deg, transparent 45%, var(--mauve) 45% 55%, transparent 55%),
        linear-gradient(45deg, transparent 47%, var(--mauve) 47% 53%, transparent 53%),
        linear-gradient(-45deg, transparent 47%, var(--mauve) 47% 53%, transparent 53%);
}

.iso-leaf {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 36px;
    height: 24px;
    background: var(--sage);
    border-radius: 0 100% 0 100%;
    transform: rotate(-15deg);
}

/* iso letter (envelope) */
.iso-letter {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 90px;
    height: 60px;
}
.iso-letter .letter-face {
    position: absolute;
    inset: 0;
}
.iso-letter .letter-top {
    background: var(--cream);
    clip-path: polygon(0 30%, 50% 0, 100% 30%, 50% 60%);
    height: 40px;
}
.iso-letter .letter-left {
    background: #C9C0B5;
    clip-path: polygon(0 30%, 50% 60%, 50% 100%, 0 70%);
}
.iso-letter .letter-right {
    background: #E3D8C8;
    clip-path: polygon(50% 60%, 100% 30%, 100% 70%, 50% 100%);
}
.iso-letter .letter-script {
    position: absolute;
    left: 26px;
    top: 28px;
    width: 38px;
    height: 14px;
    background:
        linear-gradient(180deg, var(--plum) 25%, transparent 25% 50%, var(--plum) 50% 75%, transparent 75% 100%);
    transform: skew(-20deg);
    opacity: 0.6;
}

/* candle flame */
.candle-flame {
    position: absolute;
    width: 8px;
    height: 14px;
    background: radial-gradient(circle at 50% 100%, var(--buttercup) 0%, var(--blush) 60%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    animation: flame 1.6s ease-in-out infinite alternate;
}

@keyframes flame {
    from { transform: scaleY(1) translateX(0); }
    to { transform: scaleY(1.15) translateX(1px); }
}

/* iso flower stem */
.iso-flower-stem {
    position: absolute;
    width: 4px;
    height: 30px;
    background: var(--sage);
}
.iso-flower-stem::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--blush);
    border-radius: 50%;
    top: -8px;
    left: -5px;
}
.iso-flower-stem::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--buttercup);
    border-radius: 50%;
    top: -2px;
    left: 4px;
}

/* iso window suggestion */
.iso-window {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 84px;
    height: 110px;
    background: var(--periwinkle);
    border: 4px solid var(--linen);
    border-radius: 2px;
    transform: rotateY(-30deg) skewY(8deg);
    transform-origin: right center;
    box-shadow: inset 0 0 0 1px rgba(74,48,85,0.2);
}
.iso-window::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, transparent 49%, var(--linen) 49% 51%, transparent 51%),
        linear-gradient(90deg, transparent 49%, var(--linen) 49% 51%, transparent 51%);
}

/* light cone for lantern */
.light-cone {
    position: absolute;
    left: 200px;
    top: 110px;
    width: 200px;
    height: 220px;
    background: radial-gradient(ellipse at 30% 0%, rgba(247,215,148,0.45) 0%, rgba(247,215,148,0.15) 40%, transparent 70%);
    clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
    pointer-events: none;
}

/* ==== Mini Icons (Garden, Path, accents) === */
.iso-mini {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    position: relative;
    flex: 0 0 auto;
}

/* watering can */
.iso-mini.iso-watering {
    background: var(--periwinkle);
    border-radius: 18px 18px 8px 8px / 30px 30px 8px 8px;
    width: 90px;
    height: 70px;
    margin-top: 24px;
}
.iso-mini.iso-watering::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 18px;
    background: var(--periwinkle);
    left: -22px;
    top: 8px;
    transform: skewY(-15deg);
    border-radius: 4px 0 0 4px;
}
.iso-mini.iso-watering::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 3px solid var(--plum);
    border-radius: 50%;
    border-bottom-color: transparent;
    border-right-color: transparent;
    top: -12px;
    left: 30px;
    transform: rotate(45deg);
}

/* trellis */
.iso-mini.iso-trellis {
    width: 80px;
    height: 80px;
    background:
        repeating-linear-gradient(45deg, var(--sage) 0 3px, transparent 3px 16px),
        repeating-linear-gradient(-45deg, var(--sage) 0 3px, transparent 3px 16px);
    margin-top: 18px;
    border-radius: 4px;
}

/* seed packet */
.iso-mini.iso-seedpacket {
    width: 70px;
    height: 86px;
    background: var(--cream);
    border: 2px solid var(--plum);
    margin-top: 14px;
    position: relative;
}
.iso-mini.iso-seedpacket::before {
    content: '';
    position: absolute;
    inset: 6px 6px auto 6px;
    height: 24px;
    background: var(--blush);
}
.iso-mini.iso-seedpacket::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--buttercup);
    border-radius: 50%;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: -14px 0 0 var(--blush), 14px 0 0 var(--sage);
}

/* sundial */
.iso-mini.iso-sundial {
    width: 84px;
    height: 84px;
    background: var(--periwinkle);
    border-radius: 50%;
    margin-top: 16px;
    box-shadow: inset 0 0 0 3px var(--linen), 0 6px 0 var(--mauve);
}
.iso-mini.iso-sundial::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 36px;
    background: var(--plum);
    left: 50%;
    top: 12px;
    transform: translateX(-50%) rotate(25deg);
    transform-origin: bottom center;
    border-radius: 2px;
}
.iso-mini.iso-sundial::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--plum);
    border-radius: 50%;
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
}

/* birdhouse */
.iso-mini.iso-birdhouse {
    width: 70px;
    height: 90px;
    margin-top: 12px;
    position: relative;
}
.iso-mini.iso-birdhouse::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 30px;
    background: var(--blush);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    top: 0;
}
.iso-mini.iso-birdhouse::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 50px;
    background: var(--cream);
    border: 2px solid var(--plum);
    top: 30px;
    left: 5px;
    box-shadow: inset 0 0 0 18px transparent;
}

/* wheelbarrow */
.iso-mini.iso-wheelbarrow {
    width: 100px;
    height: 70px;
    margin-top: 22px;
    position: relative;
}
.iso-mini.iso-wheelbarrow::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 32px;
    background: var(--buttercup);
    border-radius: 0 4px 30px 4px;
    top: 6px;
    left: 14px;
}
.iso-mini.iso-wheelbarrow::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: var(--plum);
    border-radius: 50%;
    bottom: 0;
    left: 14px;
    box-shadow: inset 0 0 0 5px var(--cream);
}

/* small accents */
.iso-mini-flower {
    width: 80px; height: 80px; position: relative;
}
.iso-mini-flower::before {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    background: var(--blush); border-radius: 50%;
    top: 14px; left: 30px;
    box-shadow:
        -14px 12px 0 var(--blush),
        14px 12px 0 var(--blush),
        -8px 28px 0 var(--blush),
        8px 28px 0 var(--blush);
}
.iso-mini-flower::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: var(--buttercup); border-radius: 50%;
    top: 28px; left: 35px;
    box-shadow: 0 22px 0 var(--buttercup);
}

.iso-mini-leaf {
    width: 80px; height: 60px;
    background: var(--sage);
    border-radius: 0 100% 0 100%;
    transform: rotate(-25deg);
    margin-top: 12px;
}
.iso-mini-leaf::before {
    content: '';
    position: absolute;
    width: 2px; height: 50px;
    background: var(--cream);
    left: 45%;
    top: 6px;
    transform: rotate(35deg);
}

/* desk accents */
.iso-mini-quill {
    width: 70px; height: 70px;
    background: var(--blush);
    clip-path: polygon(20% 100%, 0 80%, 60% 0, 100% 20%, 80% 50%);
}

.iso-mini-stamp {
    width: 70px; height: 70px;
    background: var(--cream);
    border: 3px dashed var(--plum);
    position: relative;
}
.iso-mini-stamp::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: var(--periwinkle);
}
.iso-mini-stamp::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: var(--buttercup);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.iso-mini-key {
    width: 80px; height: 30px;
    margin-top: 30px;
    position: relative;
}
.iso-mini-key::before {
    content: '';
    position: absolute;
    width: 28px; height: 28px;
    border: 5px solid var(--buttercup);
    border-radius: 50%;
    top: 0; left: 0;
}
.iso-mini-key::after {
    content: '';
    position: absolute;
    width: 50px; height: 6px;
    background: var(--buttercup);
    top: 11px; left: 26px;
    box-shadow: 38px 6px 0 -2px var(--buttercup), 30px 6px 0 -2px var(--buttercup);
}

/* path stones / mini icons */
.iso-mini-stone {
    width: 60px; height: 30px;
    background: var(--mauve);
    border-radius: 50%;
    margin-top: 30px;
    box-shadow: 0 4px 0 #7E6E7E;
}

.iso-mini-lantern {
    width: 50px; height: 70px;
    margin-top: 14px;
    position: relative;
}
.iso-mini-lantern::before {
    content: '';
    position: absolute;
    inset: 12px 5px 12px 5px;
    background: var(--buttercup);
    border-radius: 4px;
}
.iso-mini-lantern::after {
    content: '';
    position: absolute;
    inset: 0 18px;
    height: 8px;
    border: 2px solid var(--plum);
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
    top: 0;
}

.iso-mini-bridge {
    width: 90px; height: 50px;
    margin-top: 30px;
    position: relative;
}
.iso-mini-bridge::before {
    content: '';
    position: absolute;
    width: 90px; height: 20px;
    background: var(--blush);
    border-radius: 50% 50% 0 0;
    top: 0;
}
.iso-mini-bridge::after {
    content: '';
    position: absolute;
    width: 90px; height: 6px;
    background: var(--periwinkle);
    bottom: 0;
}

.iso-mini-cottage {
    width: 70px; height: 70px;
    margin-top: 16px;
    position: relative;
}
.iso-mini-cottage::before {
    content: '';
    position: absolute;
    width: 70px; height: 28px;
    background: var(--blush);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    top: 0;
}
.iso-mini-cottage::after {
    content: '';
    position: absolute;
    width: 60px; height: 32px;
    background: var(--cream);
    top: 28px; left: 5px;
    border: 2px solid var(--plum);
    box-shadow: inset 16px -10px 0 -10px var(--plum);
}

.iso-mini-fence {
    width: 90px; height: 40px;
    margin-top: 30px;
    background:
        repeating-linear-gradient(90deg, var(--cream) 0 8px, transparent 8px 18px);
    position: relative;
}
.iso-mini-fence::before {
    content: '';
    position: absolute;
    width: 90px; height: 4px;
    background: var(--cream);
    top: 12px;
}
.iso-mini-fence::after {
    content: '';
    position: absolute;
    width: 90px; height: 4px;
    background: var(--cream);
    top: 26px;
}

/* =====================================================
   Reveal animation (IntersectionObserver-driven)
   ===================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 700ms ease, transform 700ms var(--spring);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* path step entrance — sequential 200ms from JS */
.card-step {
    opacity: 0;
    transform: translateY(30px) rotate(0);
    transition: opacity 600ms ease, transform 600ms var(--spring);
}
.card-step.revealed { opacity: 1; transform: translateY(0); }
.path-curve .card-step:nth-child(odd).revealed { transform: translateY(0) rotate(-3deg); }
.path-curve .card-step:nth-child(even).revealed { transform: translateY(0) rotate(2deg); }

/* small auto-flip pulse on path stones once in view */
.card-step.auto-peek .flip-inner {
    animation: peek 2.4s var(--spring) 1;
}

@keyframes peek {
    0% { transform: rotateY(0); }
    20% { transform: rotateY(20deg); }
    35% { transform: rotateY(0); }
    100% { transform: rotateY(0); }
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
    :root {
        --skew: -4deg;
        --counter-skew: 4deg;
    }

    .nav-cubes {
        flex-direction: row;
        top: auto;
        bottom: 16px;
        right: 50%;
        transform: translateX(50%);
        background: rgba(255,248,240,0.92);
        padding: 8px 12px;
        border-radius: 30px;
        box-shadow: 0 6px 18px rgba(43,32,64,0.15);
    }
    .nav-cube { width: 36px; height: 36px; }
    .cube-face { width: 26px; height: 26px; left: 5px; top: 5px; }
    .cube-top { transform: rotateX(90deg) translateZ(13px); }
    .cube-left { transform: rotateY(-90deg) translateZ(13px); }
    .cube-right { transform: rotateY(0deg) translateZ(13px); }
    .cube-label { display: none; }

    .display-title { font-size: clamp(64px, 18vw, 110px); }

    .card-cascade {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .card-cascade .card-primary {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        max-width: 420px;
        height: 320px;
    }

    .garden-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .garden-grid .card-secondary {
        transform: none;
        max-width: 360px;
        margin: 0 auto;
    }

    .desk-stage {
        height: auto;
    }
    .desk-stage .card-mega {
        width: 100%;
        height: 480px;
    }
    .accent-fall { display: none; }

    .path-curve {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .path-curve .card-step {
        position: relative;
        left: auto !important;
        top: auto !important;
    }

    .card-dusk {
        width: 100%;
        max-width: 420px;
        height: 360px;
    }
}