/* ============================================================
   namu.works -- anti-design x luxurious
   palette: jewel-tones | grid: hexagonal-honeycomb (disrupted)
   typography: garamond classic (subverted) + space mono accent
   ============================================================ */

:root {
    /* Jewel-tone palette (per DESIGN.md) */
    --c-bg-twilight: #1A0B2E;       /* Deep Twilight (primary background) */
    --c-bg-amethyst: #2D1B4E;       /* Obsidian Amethyst (secondary background) */
    --c-sapphire:    #1B3A8C;       /* Crushed Sapphire (primary accent) */
    --c-ruby:        #9B1B30;       /* Molten Ruby (secondary accent) */
    --c-emerald:     #0D6B4F;       /* Polished Emerald (tertiary accent) */
    --c-topaz:       #D4A017;       /* Liquid Topaz (highlight) */
    --c-quartz:      #E8E4DD;       /* Pale Quartz (text primary) */
    --c-mint:        #3DFFA0;       /* Electric Mint (circuit trace) */
    --c-glitch:      #FF2D6B;       /* Hot Pink (glitched cells / disruption) */
    --c-white:       #FFFFFF;       /* Lens flare core */

    /* Hex clip-path (flat-top hexagon) */
    --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    --hex-clip-glitch: polygon(22% 3%, 78% 0%, 100% 47%, 73% 100%, 27% 97%, 0% 53%);
    --hex-clip-glitch-2: polygon(28% 0%, 72% 4%, 96% 50%, 78% 100%, 22% 96%, 4% 50%, 0% 50%);

    /* Type scale */
    --f-display: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
    --f-body:    'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --f-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--c-bg-twilight);
    color: var(--c-quartz);
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 1.6;
    cursor: crosshair;
}

body {
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.5s ease;
}

body.is-inverted {
    background: var(--c-quartz);
    color: var(--c-bg-twilight);
}

/* ----- Custom hex cursor (replaces default on hex hover) ----- */
.hex-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
    transition: opacity 0.18s ease;
    will-change: transform;
    mix-blend-mode: screen;
}
.hex-cursor.is-active {
    opacity: 1;
    animation: cursor-spin 4s linear infinite;
}
@keyframes cursor-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ----- Background hexagonal bokeh ----- */
.bokeh-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.bokeh {
    position: absolute;
    width: 60px;
    height: 60px;
    clip-path: var(--hex-clip);
    opacity: 0.18;
    filter: blur(2px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.bokeh.b-sapphire { background: var(--c-sapphire); }
.bokeh.b-emerald  { background: var(--c-emerald); }
.bokeh.b-ruby     { background: var(--c-ruby); }
.bokeh.b-topaz    { background: var(--c-topaz); }

/* ----- Lens flare layer ----- */
.flare-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
}
.flare {
    position: absolute;
    will-change: transform, opacity;
    opacity: 0.55;
    filter: blur(40px);
}
.flare-anamorphic {
    height: 6px;
    width: 80vw;
    border-radius: 50%;
    transform: translateY(-50%);
}
.flare-1 {
    top: 22%;
    left: -10vw;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(27, 58, 140, 0.0) 5%,
        rgba(27, 58, 140, 0.7) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(13, 107, 79, 0.7) 70%,
        rgba(13, 107, 79, 0.0) 95%,
        transparent 100%);
    height: 10px;
    animation: drift-anam 22s ease-in-out infinite alternate;
}
.flare-3 {
    top: 78%;
    left: -5vw;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(155, 27, 48, 0.0) 5%,
        rgba(155, 27, 48, 0.7) 30%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(212, 160, 23, 0.75) 70%,
        rgba(212, 160, 23, 0.0) 95%,
        transparent 100%);
    height: 8px;
    animation: drift-anam-rev 28s ease-in-out infinite alternate;
}
.flare-bloom {
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
}
.flare-2 {
    top: -20vw;
    right: -15vw;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(212,160,23,0.35) 25%, rgba(155,27,48,0.18) 55%, transparent 75%);
    animation: drift-bloom 34s ease-in-out infinite alternate;
}
.flare-4 {
    bottom: -25vw;
    left: -20vw;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(27,58,140,0.35) 28%, rgba(13,107,79,0.18) 58%, transparent 78%);
    animation: drift-bloom-rev 40s ease-in-out infinite alternate;
}

@keyframes drift-anam {
    0%   { transform: translate(0, 0) rotate(-2deg); opacity: 0.5; }
    50%  { transform: translate(8vw, -3vh) rotate(1deg); opacity: 0.75; }
    100% { transform: translate(15vw, 2vh) rotate(-1deg); opacity: 0.55; }
}
@keyframes drift-anam-rev {
    0%   { transform: translate(0, 0) rotate(2deg); opacity: 0.45; }
    50%  { transform: translate(-6vw, 4vh) rotate(-1deg); opacity: 0.7; }
    100% { transform: translate(-12vw, -2vh) rotate(1deg); opacity: 0.5; }
}
@keyframes drift-bloom {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    100% { transform: translate(-10vw, 8vh) scale(1.15); opacity: 0.7; }
}
@keyframes drift-bloom-rev {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.45; }
    100% { transform: translate(8vw, -10vh) scale(1.18); opacity: 0.65; }
}

/* ----- Bloom event overlay (zone transitions) ----- */
.bloom-event {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255,255,255,0.6) 0%, rgba(212,160,23,0.4) 25%, rgba(27,58,140,0.25) 55%, transparent 80%);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 1.2s ease;
}
.bloom-event.is-firing {
    animation: bloom-fire 1.6s ease-out;
}
@keyframes bloom-fire {
    0%   { opacity: 0; transform: scale(0.5); }
    20%  { opacity: 1; transform: scale(1.0); }
    60%  { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* ----- Inversion overlay (Zone 3 anti-design moment) ----- */
.inversion-overlay {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: var(--c-quartz);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.inversion-overlay.is-firing {
    opacity: 1;
}

/* ----- Circuit traces SVG ----- */
.circuit-traces {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 4;
    pointer-events: none;
    opacity: 0.5;
}
.trace-path {
    fill: none;
    stroke: var(--c-mint);
    stroke-width: 1;
    opacity: 0.4;
    stroke-dasharray: 14 6;
    stroke-dashoffset: 0;
    animation: trace-flow 6s linear infinite;
    filter: url(#traceGlow);
}
.trace-path.trace-broken {
    stroke-dasharray: 4 4;
    opacity: 0.22;
    animation-duration: 9s;
}
.junction {
    fill: var(--c-mint);
    opacity: 0.8;
    animation: junction-breathe 2.4s ease-in-out infinite;
    filter: url(#traceGlow);
}
.junction:nth-child(2n) { animation-delay: 0.6s; }
.junction:nth-child(3n) { animation-delay: 1.1s; }
.junction:nth-child(5n) { animation-delay: 1.7s; }

@keyframes trace-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -200; }
}
@keyframes junction-breathe {
    0%, 100% { opacity: 0.4; r: 2; }
    50%      { opacity: 1.0; r: 4; }
}

/* ============================================================
   STAGE & ZONES
   ============================================================ */
.stage {
    position: fixed;
    inset: 0;
    z-index: 5;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.zone {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
    pointer-events: none;
}
.zone.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.8s ease, visibility 0s linear 0s;
}

/* ============================================================
   HEX CELLS (shared)
   ============================================================ */
.hex {
    position: absolute;
    clip-path: var(--hex-clip);
    background: var(--c-bg-amethyst);
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
    will-change: transform;
}
.hex::before {
    /* Inner border glow that becomes visible on grid-flash event */
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--hex-clip);
    background: var(--c-bg-twilight);
    opacity: 1;
    transition: opacity 0.2s ease;
}
.hex.borders-visible::before {
    background: var(--c-mint);
    opacity: 0.18;
}
.hex .hex-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8% 14%;
    z-index: 1;
}

/* glitched cells: irregular polygon + pink hue */
.hex.hex-glitch { clip-path: var(--hex-clip-glitch); }
.hex.hex-glitch::before { clip-path: var(--hex-clip-glitch); }
.hex.hex-glitch { background: linear-gradient(135deg, var(--c-bg-amethyst) 0%, rgba(255, 45, 107, 0.18) 100%); }
.hex.hex-glitch:nth-of-type(2n) { clip-path: var(--hex-clip-glitch-2); }
.hex.hex-glitch:nth-of-type(2n)::before { clip-path: var(--hex-clip-glitch-2); }
.hex.hex-rotated { transform: rotate(8deg); }
.hex.hex-mirror .hex-inner { transform: scaleX(-1); }

/* hover state: jewel glow + cursor swap */
.hex:hover {
    cursor: none;
    filter: brightness(1.15) saturate(1.2);
}
.hex.hex-glitch:hover {
    filter: brightness(1.2) hue-rotate(-8deg) saturate(1.3);
}
.hex:hover::before {
    background: linear-gradient(135deg, var(--c-bg-amethyst) 0%, var(--c-emerald) 100%);
    opacity: 0.4;
}

/* meta tags inside hexes */
.hex-meta {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-mint);
    margin-bottom: 0.7em;
    opacity: 0.75;
}

/* ornament glyph (large Garamond ampersand etc) */
.ornament {
    font-family: var(--f-display);
    font-size: clamp(36px, 5vw, 80px);
    font-weight: 500;
    color: var(--c-topaz);
    line-height: 1;
    font-style: italic;
}
.ornament-lg {
    font-size: clamp(56px, 7vw, 110px);
}

/* live colour cycler cell -- sweeps the jewel palette */
.hex-cycler {
    animation: cycle-jewel 30s linear infinite;
}
@keyframes cycle-jewel {
    0%   { background: var(--c-sapphire); }
    16%  { background: var(--c-emerald); }
    33%  { background: var(--c-ruby); }
    50%  { background: var(--c-topaz); }
    66%  { background: var(--c-bg-amethyst); }
    83%  { background: var(--c-mint); }
    100% { background: var(--c-sapphire); }
}
.hex-cycler::before { opacity: 0; }

/* ============================================================
   ZONE 1 -- HERO
   ============================================================ */
.hex-hero {
    width: 60vw;
    height: 65vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at 30% 30%, var(--c-sapphire) 0%, var(--c-bg-amethyst) 55%, var(--c-bg-twilight) 100%);
}
.hex-hero::before { opacity: 0; }
.hex-hero .hex-inner {
    padding: 6% 10%;
}
.hero-title {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(64px, 12vw, 200px);
    letter-spacing: 0.5em;
    line-height: 0.9;
    color: var(--c-quartz);
    margin: 0;
    text-indent: 0.5em; /* compensate for tracking offset */
    text-transform: lowercase;
    text-shadow: 0 0 60px rgba(212, 160, 23, 0.25);
}
.hero-title::first-letter {
    color: var(--c-topaz);
    font-style: italic;
}
.hero-sub {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: var(--c-mint);
    margin-top: 2.4em;
    opacity: 0.85;
}

/* small orbital hexes */
.hex-sm {
    width: 130px;
    height: 130px;
}
.hex-sm .hex-inner {
    padding: 12% 18%;
}
.rotator {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 22px;
    color: var(--c-quartz);
    letter-spacing: 0.04em;
    transition: opacity 0.5s ease;
    line-height: 1.2;
}
.hex-glitch .rotator { color: var(--c-glitch); }

.hex-orbit-1  { top: 8%;   left: 12%;  transform: rotate(-6deg); }
.hex-orbit-2  { top: 12%;  right: 18%; transform: rotate(4deg) scale(1.1); }
.hex-orbit-3  { bottom: 14%; left: 8%; transform: rotate(8deg) scale(0.85); }
.hex-orbit-4  { bottom: 10%; right: 12%; transform: rotate(-5deg); }
.hex-orbit-5  { top: 38%;  left: 4%; transform: scale(0.75); }
.hex-orbit-6  { top: 4%;   left: 45%; transform: rotate(2deg) scale(0.7); }
.hex-orbit-7  { bottom: 4%; left: 48%; transform: rotate(-3deg); }
.hex-orbit-8  { top: 36%;  right: 4%; transform: rotate(7deg) scale(0.85); }
.hex-orbit-9  { top: 22%;  left: 28%; transform: rotate(-12deg) scale(0.65); }
.hex-orbit-10 { top: 24%;  right: 30%; transform: rotate(11deg) scale(0.7); }

/* nav embedded as hexes on the left edge */
.hex-nav {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 6;
}
.hex-nav-cell {
    position: relative;
    width: 84px;
    height: 84px;
    text-decoration: none;
    border: 0;
    background: transparent;
}
.hex-nav-cell::before {
    background: var(--c-bg-amethyst);
    opacity: 1;
}
.hex-nav-cell:hover::before {
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-bg-amethyst) 100%);
}
.hex-nav-cell .hex-inner {
    padding: 18% 22%;
}
.nav-label {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-mint);
    display: block;
    margin-bottom: 2px;
}
.nav-name {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 14px;
    color: var(--c-quartz);
    letter-spacing: 0.05em;
    display: block;
}
.hex-nav-cell.is-current::before {
    background: linear-gradient(135deg, var(--c-sapphire) 0%, var(--c-emerald) 100%);
}
.hex-nav-cell.is-current .nav-name { color: var(--c-topaz); }

/* ============================================================
   ZONE 2 -- DENSIFIED HONEYCOMB
   ============================================================ */
.zone-2-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.hex-md {
    width: 280px;
    height: 320px;
}
.hex-md .hex-inner {
    padding: 12% 16%;
}
.cell-text {
    font-family: var(--f-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-quartz);
    font-style: italic;
    letter-spacing: 0.01em;
}
.cell-text .tw-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--c-mint);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.9s steps(2) infinite;
}
.cell-text .ch {
    opacity: 0;
    transition: opacity 0.18s ease;
}
.cell-text .ch.is-revealed { opacity: 1; }
@keyframes cursor-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Position the 16 zone-2 cells in a disrupted honeycomb */
.zone-2 .cell:nth-child(1)  { top: 4%;  left: 6%;   transform: rotate(-2deg) scale(0.95); }
.zone-2 .cell:nth-child(2)  { top: 10%; left: 26%;  transform: rotate(3deg) scale(1.05); }
.zone-2 .cell:nth-child(3)  { top: 4%;  left: 48%;  }
.zone-2 .cell:nth-child(4)  { top: 8%;  left: 70%;  transform: scale(0.85); }
.zone-2 .cell:nth-child(5)  { top: 38%; left: 2%;   transform: rotate(-4deg); }
.zone-2 .cell:nth-child(6)  { top: 40%; left: 22%;  transform: scale(1.05); }
.zone-2 .cell:nth-child(7)  { top: 36%; left: 44%;  transform: rotate(2deg); }
.zone-2 .cell:nth-child(8)  { top: 40%; left: 66%;  transform: rotate(-3deg) scale(0.95); }
.zone-2 .cell:nth-child(9)  { top: 38%; right: -2%; transform: scale(0.7); }
.zone-2 .cell:nth-child(10) { top: 70%; left: 6%;   transform: rotate(4deg); }
.zone-2 .cell:nth-child(11) { top: 72%; left: 26%;  transform: scale(0.95); }
.zone-2 .cell:nth-child(12) { top: 70%; left: 47%;  transform: rotate(8deg) scale(1.0); }
.zone-2 .cell:nth-child(13) { top: 74%; left: 68%;  transform: rotate(-2deg) scale(0.7); }
.zone-2 .cell:nth-child(14) { top: 8%;  right: 0%;  transform: rotate(6deg) scale(0.85); }
.zone-2 .cell:nth-child(15) { top: 64%; right: -1%; transform: rotate(-6deg) scale(0.85); }
.zone-2 .cell:nth-child(16) { top: 6%;  left: -3%;  transform: scale(0.7); }

/* ============================================================
   ZONE 3 -- SCATTER + LONG-FORM
   ============================================================ */
.scatter-hexes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.scatter {
    width: 100px;
    height: 100px;
}
.scatter .hex-inner { padding: 16%; }
.scatter-1 { top: 4%;   left: 4%;  transform: rotate(-12deg) scale(0.9); }
.scatter-2 { top: 8%;   right: 6%; transform: rotate(8deg); }
.scatter-3 { bottom: 6%; left: 8%; transform: rotate(20deg) scale(1.1); }
.scatter-4 { bottom: 4%; right: 10%; transform: rotate(-14deg); }
.scatter-5 { top: 38%;  left: 2%; transform: scale(0.7); }
.scatter-6 { top: 38%;  right: 4%; transform: scale(0.8) rotate(15deg); }
.scatter-7 { top: 8%;   left: 28%; transform: rotate(-8deg) scale(0.6); }
.scatter-8 { bottom: 8%; right: 26%; transform: rotate(6deg) scale(0.65); }

.long-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, 78vw);
    max-height: 86vh;
    overflow-y: auto;
    padding: 40px 8px;
    color: var(--c-quartz);
    z-index: 2;
}
.long-form::-webkit-scrollbar { width: 0; height: 0; }
.long-meta {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--c-mint);
    margin-bottom: 1.8em;
    opacity: 0.85;
}
.long-title {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: clamp(32px, 4.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--c-topaz);
    margin-bottom: 1em;
    font-style: italic;
}
.long-form p {
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--c-quartz);
    margin-bottom: 1.1em;
    font-weight: 400;
}
.long-form em {
    color: var(--c-topaz);
    font-style: italic;
}
.long-sign {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-mint);
    margin-top: 2.4em;
    opacity: 0.8;
}
body.is-inverted .long-form,
body.is-inverted .long-form p,
body.is-inverted .cell-text,
body.is-inverted .nav-name,
body.is-inverted .rotator {
    color: var(--c-bg-twilight);
}
body.is-inverted .long-title { color: var(--c-ruby); }
body.is-inverted .long-meta,
body.is-inverted .hex-meta,
body.is-inverted .long-sign,
body.is-inverted .nav-label {
    color: var(--c-emerald);
}

/* ============================================================
   ZONE 4 -- MANDALA
   ============================================================ */
.mandala {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(720px, 90vw);
    height: min(720px, 90vw);
    transform: translate(-50%, -50%);
}
.mandala-cell {
    width: 200px;
    height: 230px;
    text-decoration: none;
    color: inherit;
    display: block;
}
.mandala-cell::before {
    background: linear-gradient(135deg, var(--c-bg-amethyst) 0%, var(--c-sapphire) 100%);
    opacity: 0.95;
}
.mandala-cell:hover::before {
    background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-topaz) 100%);
}
.mandala-cell .hex-inner {
    padding: 14% 18%;
}
.mandala-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 2;
}
.mandala-center::before {
    background: radial-gradient(circle at center, var(--c-topaz) 0%, var(--c-ruby) 50%, var(--c-bg-amethyst) 100%);
}
.mandala-title {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 38px;
    color: var(--c-bg-twilight);
    letter-spacing: 0.05em;
    font-weight: 600;
}
.mandala-link {
    font-family: var(--f-display);
    font-style: italic;
    font-size: 22px;
    color: var(--c-quartz);
    letter-spacing: 0.04em;
    line-height: 1.25;
}
.mandala-contact .mandala-link {
    font-size: 14px;
    letter-spacing: 0.06em;
}
/* Six surrounding hexes positioned around the centre */
.mandala-1 { top: 6%;  left: 50%; transform: translate(-50%, 0) rotate(-3deg); }
.mandala-2 { top: 28%; left: 88%; transform: translate(-50%, 0) rotate(2deg); }
.mandala-3 { top: 72%; left: 88%; transform: translate(-50%, -100%) rotate(-2deg); }
.mandala-4 { bottom: 6%; left: 50%; transform: translate(-50%, 0) rotate(4deg); }
.mandala-5 { top: 72%; left: 12%; transform: translate(-50%, -100%) rotate(-4deg); }
.mandala-6 { top: 28%; left: 12%; transform: translate(-50%, 0) rotate(3deg); }

.zone-4-meta {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--c-mint);
    opacity: 0.75;
    white-space: nowrap;
}

/* ============================================================
   PROGRESS TRACK
   ============================================================ */
.progress-track {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}
.progress-meta {
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-mint);
    opacity: 0.75;
}
.progress-bar {
    width: 180px;
    height: 2px;
    background: rgba(61, 255, 160, 0.15);
    overflow: hidden;
}
.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--c-sapphire), var(--c-emerald), var(--c-topaz), var(--c-ruby));
    transition: width 0.25s ease;
}

/* ============================================================
   GRID FLASH (anti-design moment at progress 0.15)
   ============================================================ */
body.grid-flash .hex.borders-visible::before {
    background: rgba(61, 255, 160, 0.4);
    opacity: 1;
}

/* ============================================================
   TILT (anti-design moment at progress 0.35)
   ============================================================ */
.stage.is-tilted {
    transform: rotate(3deg);
    transition: transform 1s ease-out;
}
.stage.is-untilting {
    transform: rotate(0deg);
    transition: transform 5s ease-out;
}

/* ============================================================
   ZONE TRANSITIONS (entry animations)
   ============================================================ */
.zone-1.active .hex-hero       { animation: zoom-in 1.2s ease-out both; }
.zone-1.active .hex-orbit      { animation: orbit-in 1s ease-out both; }
.zone-1.active .hex-orbit-2    { animation-delay: 0.05s; }
.zone-1.active .hex-orbit-3    { animation-delay: 0.10s; }
.zone-1.active .hex-orbit-4    { animation-delay: 0.15s; }
.zone-1.active .hex-orbit-5    { animation-delay: 0.20s; }
.zone-1.active .hex-orbit-6    { animation-delay: 0.25s; }
.zone-1.active .hex-orbit-7    { animation-delay: 0.30s; }
.zone-1.active .hex-orbit-8    { animation-delay: 0.35s; }
.zone-1.active .hex-orbit-9    { animation-delay: 0.40s; }
.zone-1.active .hex-orbit-10   { animation-delay: 0.45s; }

.zone-2.active .cell           { animation: cell-in 0.6s ease-out both; }
.zone-2.active .cell:nth-child(2) { animation-delay: 0.05s; }
.zone-2.active .cell:nth-child(3) { animation-delay: 0.10s; }
.zone-2.active .cell:nth-child(4) { animation-delay: 0.15s; }
.zone-2.active .cell:nth-child(5) { animation-delay: 0.20s; }
.zone-2.active .cell:nth-child(6) { animation-delay: 0.25s; }
.zone-2.active .cell:nth-child(7) { animation-delay: 0.30s; }
.zone-2.active .cell:nth-child(8) { animation-delay: 0.35s; }
.zone-2.active .cell:nth-child(9) { animation-delay: 0.40s; }
.zone-2.active .cell:nth-child(10){ animation-delay: 0.45s; }
.zone-2.active .cell:nth-child(11){ animation-delay: 0.50s; }
.zone-2.active .cell:nth-child(12){ animation-delay: 0.55s; }
.zone-2.active .cell:nth-child(13){ animation-delay: 0.60s; }
.zone-2.active .cell:nth-child(14){ animation-delay: 0.65s; }
.zone-2.active .cell:nth-child(15){ animation-delay: 0.70s; }
.zone-2.active .cell:nth-child(16){ animation-delay: 0.75s; }

.zone-3.active .scatter        { animation: scatter-out 0.9s ease-out both; }
.zone-3.active .long-form      { animation: long-form-in 1.4s ease-out both; }

.zone-4.active .mandala-cell   { animation: mandala-in 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.zone-4.active .mandala-center { animation-delay: 0s; }
.zone-4.active .mandala-1      { animation-delay: 0.10s; }
.zone-4.active .mandala-2      { animation-delay: 0.18s; }
.zone-4.active .mandala-3      { animation-delay: 0.26s; }
.zone-4.active .mandala-4      { animation-delay: 0.34s; }
.zone-4.active .mandala-5      { animation-delay: 0.42s; }
.zone-4.active .mandala-6      { animation-delay: 0.50s; }

@keyframes zoom-in {
    from { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1.0); opacity: 1; }
}
@keyframes orbit-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cell-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scatter-out {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes long-form-in {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes mandala-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-30deg); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1.0) rotate(0deg); }
}

/* zone-4 mandala-cell animations need to preserve their final translate/rotate values --
   we set the from-state on these specifically */
.zone-4.active .mandala-1 { animation: mandala-1-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.10s; }
.zone-4.active .mandala-2 { animation: mandala-2-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.18s; }
.zone-4.active .mandala-3 { animation: mandala-3-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.26s; }
.zone-4.active .mandala-4 { animation: mandala-4-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.34s; }
.zone-4.active .mandala-5 { animation: mandala-5-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.42s; }
.zone-4.active .mandala-6 { animation: mandala-6-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.50s; }
.zone-4.active .mandala-center { animation: mandala-center-in 0.9s cubic-bezier(0.22,0.61,0.36,1) both; }

@keyframes mandala-center-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes mandala-1-in {
    from { opacity: 0; transform: translate(-50%, -300%) scale(0.6) rotate(-30deg); }
    to   { opacity: 1; transform: translate(-50%, 0) rotate(-3deg); }
}
@keyframes mandala-2-in {
    from { opacity: 0; transform: translate(200%, -100%) scale(0.6) rotate(30deg); }
    to   { opacity: 1; transform: translate(-50%, 0) rotate(2deg); }
}
@keyframes mandala-3-in {
    from { opacity: 0; transform: translate(200%, 100%) scale(0.6) rotate(30deg); }
    to   { opacity: 1; transform: translate(-50%, -100%) rotate(-2deg); }
}
@keyframes mandala-4-in {
    from { opacity: 0; transform: translate(-50%, 300%) scale(0.6) rotate(30deg); }
    to   { opacity: 1; transform: translate(-50%, 0) rotate(4deg); }
}
@keyframes mandala-5-in {
    from { opacity: 0; transform: translate(-200%, 100%) scale(0.6) rotate(-30deg); }
    to   { opacity: 1; transform: translate(-50%, -100%) rotate(-4deg); }
}
@keyframes mandala-6-in {
    from { opacity: 0; transform: translate(-200%, -100%) scale(0.6) rotate(-30deg); }
    to   { opacity: 1; transform: translate(-50%, 0) rotate(3deg); }
}

/* ============================================================
   RESPONSIVE -- collapse hex sizes
   ============================================================ */
@media (max-width: 1100px) {
    .hex-md { width: 220px; height: 250px; }
    .mandala { width: 90vw; height: 90vw; }
    .mandala-cell { width: 160px; height: 180px; }
    .mandala-link { font-size: 18px; }
    .mandala-title { font-size: 28px; }
    .hex-nav-cell { width: 70px; height: 70px; }
}
@media (max-width: 720px) {
    html, body { font-size: 16px; }
    .hex-hero { width: 88vw; height: 56vh; }
    .hero-title { font-size: clamp(48px, 16vw, 96px); letter-spacing: 0.3em; }
    .hex-md { width: 170px; height: 195px; }
    .hex-md .cell-text { font-size: 11px; }
    .hex-sm { width: 90px; height: 90px; }
    .hex-sm .rotator { font-size: 14px; }
    .mandala-cell { width: 130px; height: 150px; }
    .mandala-link { font-size: 14px; }
    .mandala-contact .mandala-link { font-size: 11px; }
    .mandala-title { font-size: 22px; }
    .hex-nav { left: 6px; gap: 4px; }
    .hex-nav-cell { width: 56px; height: 56px; }
    .nav-name { font-size: 11px; }
    .progress-track { right: 8px; bottom: 8px; }
    .progress-bar { width: 110px; }
    .long-form { width: 92vw; padding: 20px 4px; }
    .long-form p { font-size: 15px; }
    .scatter { width: 70px; height: 70px; }
    .ornament { font-size: clamp(28px, 8vw, 56px); }
    /* hide some orbits on small screens */
    .hex-orbit-5, .hex-orbit-6, .hex-orbit-7, .hex-orbit-9, .hex-orbit-10 { display: none; }
}