/* ============================================================
   monopole.bar — a quiet arcade for a particle that may not exist
   pixel-art / candy-bright / zen-contemplative
   ============================================================ */

:root{
  /* candy-bright palette, grounded by a single deep ink */
  --marshmallow:#FFF4E8;   /* warm near-white base */
  --bubblegum:#FF8FB1;     /* dominant accent / north glow */
  --spearmint:#7FE3D4;     /* secondary accent / field lines */
  --lemon:#FFD23F;         /* lantern-dock glow / tiny highlights */
  --grape:#A98BE6;         /* botanical lattice / mid band */
  --ink:#1B1733;           /* deep aubergine-black — text + dark band + bevel shadow */

  /* derived candy tints for bands (dithered, never smooth) */
  --spearmint-tint:#E6FAF5;
  --bubblegum-tint:#FFEAF0;
  --lemon-tint:#FFF7DD;

  /* pixel grid unit — everything snaps to multiples of 8px */
  --px:8px;

  /* default bevel edges */
  --edge-light:rgba(255,255,255,0.65);
  --edge-dark:var(--ink);

  --easeReel:cubic-bezier(0.22,1,0.36,1);

  --font-display:'Outfit', system-ui, sans-serif;
  --font-body:'Fraunces', Georgia, serif;
  --font-pixel:'Press Start 2P', monospace;
}

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

html{ scroll-behavior:auto; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--marshmallow);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* crisp pixel rendering everywhere */
img, canvas, .duotone, .hero-lattice, .ink-lattice, .lottie-stage,
.sprite-monopole, .orb, .ray, .sprite-lantern, .sprite-moth, .sprite-petal,
.lantern-icon, .chevron span{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* ---- full-screen dither / noise overlay ~4% ---- */
.noise-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:9000;
  opacity:0.04;
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%);
  background-size:calc(var(--px) / 2) calc(var(--px) / 2);
  mix-blend-mode:multiply;
}

/* ============================================================
   BANDS — six full-bleed contemplative bands
   ============================================================ */
.band{
  position:relative;
  width:100%;
  min-height:100vh;
  padding:calc(var(--px) * 12) calc(var(--px) * 4) calc(var(--px) * 16);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.band-inner{
  width:100%;
  max-width:calc(var(--px) * 150);
  margin:0 auto;
  position:relative;
  z-index:2;
}

/* chapter plate numerals — Press Start 2P, top-left margin */
.chapter-plate{
  position:absolute;
  top:calc(var(--px) * 4);
  left:calc(var(--px) * 4);
  font-family:var(--font-pixel);
  font-size:clamp(1.4rem, 0.8rem + 2.6vw, 3.2rem);
  letter-spacing:0.04em;
  color:var(--ink);
  opacity:0.22;
  z-index:3;
  user-select:none;
}

/* band background hues + Bayer-dither edge transitions */
.band--marshmallow{ background:var(--marshmallow); }
.band--spearmint{ background:var(--spearmint-tint); }
.band--grape{ background:var(--grape); }
.band--ink{ background:var(--ink); color:var(--marshmallow); }
.band--bubblegum{ background:var(--bubblegum-tint); }
.band--lemon{ background:var(--lemon-tint); }

/* dithered transition strips top + bottom of each band — tiny solid squares */
.band::before, .band::after{
  content:"";
  position:absolute; left:0; right:0;
  height:calc(var(--px) * 8);
  pointer-events:none;
  z-index:1;
  background-size:var(--px) var(--px);
}
.band::before{ top:0; }
.band::after{ bottom:0; transform:scaleY(-1); }

.band--spearmint::before{
  background-image:
    linear-gradient(45deg, var(--marshmallow) 25%, transparent 25%),
    linear-gradient(-45deg, var(--marshmallow) 25%, transparent 25%);
  background-position:0 0, calc(var(--px)/2) calc(var(--px)/2);
}
.band--grape::before{
  background-image:
    linear-gradient(45deg, var(--spearmint-tint) 25%, transparent 25%),
    linear-gradient(-45deg, var(--spearmint-tint) 25%, transparent 25%);
  background-position:0 0, calc(var(--px)/2) calc(var(--px)/2);
}
.band--ink::before{
  background-image:
    linear-gradient(45deg, var(--grape) 25%, transparent 25%),
    linear-gradient(-45deg, var(--grape) 25%, transparent 25%);
  background-position:0 0, calc(var(--px)/2) calc(var(--px)/2);
}
.band--bubblegum::before{
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ink) 25%, transparent 25%);
  background-position:0 0, calc(var(--px)/2) calc(var(--px)/2);
}
.band--lemon::before{
  background-image:
    linear-gradient(45deg, var(--bubblegum-tint) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bubblegum-tint) 25%, transparent 25%);
  background-position:0 0, calc(var(--px)/2) calc(var(--px)/2);
}
/* hero has no top dither */
.band--marshmallow::before{ display:none; }
.band--lemon::after{ display:none; }

/* ============================================================
   TYPOGRAPHY — variable-fluid display
   ------------------------------------------------------------
   Per DESIGN.md: Outfit's weight axis is wired to (a) clamp()-driven
   size and (b) an IntersectionObserver that tweens
   `font-variation-settings: 'wght'` from 300 -> 700 over ~1.2s when a
   heading scrolls into view, easing back to 400 when it leaves.
   (the IntersectionObserver lives in script.js — .wghtwatch elements)
   ============================================================ */
.hero-line, .band-title{
  font-family:var(--font-display);
  font-variation-settings:'wght' 400;
  font-weight:400;
  letter-spacing:-0.015em;
  line-height:1.05;
  transition:font-variation-settings 1.2s ease-in-out;
}

.hero-line{
  font-size:clamp(1.9rem, 1rem + 4.4vw, 5rem);
  text-align:center;
  margin-top:calc(var(--px) * 4);
}

.band-title{
  font-size:clamp(1.9rem, 1rem + 4.4vw, 5rem);
  margin-bottom:calc(var(--px) * 6);
  color:var(--ink);
}
.band--grape .band-title{ color:var(--ink); }
.band--ink .band-title{ color:var(--marshmallow); }
.band-title--bubblegum{ color:var(--bubblegum) !important; }

.hero-sub{
  font-family:var(--font-pixel);
  font-size:clamp(0.5rem, 0.4rem + 0.5vw, 0.72rem);
  letter-spacing:0.04em;
  text-align:center;
  margin-top:calc(var(--px) * 3);
  opacity:0.55;
}

/* contemplative captions — Fraunces, soft/wonky, max 38ch */
.meditation{
  font-family:var(--font-body);
  font-variation-settings:'opsz' 20, 'SOFT' 80, 'WONK' 1;
  font-size:clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  line-height:1.7;
  max-width:38ch;
  font-style:italic;
}
.meditation--small{ font-size:clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem); }

.card-caption{
  font-family:var(--font-pixel);
  font-size:0.5rem;
  line-height:1.8;
  letter-spacing:0.02em;
  opacity:0.6;
  margin-top:auto;
}

/* ============================================================
   HERO TILE — large centered specimen
   ============================================================ */
.hero-tile{
  position:relative;
  margin:0 auto;
  max-width:calc(var(--px) * 88);
  padding:calc(var(--px) * 8) calc(var(--px) * 6) calc(var(--px) * 9);
  background:var(--marshmallow);
  /* pixel-bevel border, no radius */
  box-shadow:
    inset calc(var(--px)/2) calc(var(--px)/2) 0 var(--edge-light),
    inset calc(var(--px)/-2) calc(var(--px)/-2) 0 var(--edge-dark),
    0 0 0 var(--px) var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}

.hero-lattice{
  position:absolute; inset:0;
  opacity:0.5;
  background-image:url("assets/botanical-tile.svg");
  background-size:calc(var(--px) * 8) calc(var(--px) * 8);
  animation:lattice-drift 38s linear infinite;
}
@keyframes lattice-drift{
  from{ background-position:0 0; }
  to{ background-position:calc(var(--px) * 8) calc(var(--px) * 8); }
}

.hero-pole{
  position:relative;
  z-index:2;
  width:calc(var(--px) * 24);
  height:calc(var(--px) * 24);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:calc(var(--px) * 2);
}

/* ---- the monopole sprite — orb + outward rays only ---- */
.sprite-monopole{
  position:relative;
  width:calc(var(--px) * 16);
  height:calc(var(--px) * 16);
  animation:pole-pulse 6s ease-in-out infinite;
}
@keyframes pole-pulse{
  0%,100%{ transform:scale(1); filter:drop-shadow(0 0 var(--px) var(--bubblegum)); }
  50%{ transform:scale(1.06); filter:drop-shadow(0 0 calc(var(--px)*2.5) var(--bubblegum)); }
}
.orb{
  position:absolute; top:50%; left:50%;
  width:calc(var(--px) * 7); height:calc(var(--px) * 7);
  transform:translate(-50%,-50%);
  background:
    /* chunky pixel orb — concentric flat steps */
    radial-gradient(circle at 50% 50%, var(--marshmallow) 0 18%, var(--lemon) 18% 34%, var(--bubblegum) 34% 60%, var(--grape) 60% 100%);
  box-shadow:
    0 0 0 var(--px) var(--ink),
    inset calc(var(--px)/2) calc(var(--px)/2) 0 rgba(255,255,255,0.4);
}
.ray{
  position:absolute; top:50%; left:50%;
  width:calc(var(--px) * 1);
  height:calc(var(--px) * 5);
  background:var(--bubblegum);
  box-shadow:0 0 0 1px var(--ink);
  transform-origin:50% 0%;
}
/* each ray pushed OUT from center then rotated; pixel "arrowhead" via ::after */
.ray::after{
  content:""; position:absolute; left:50%; bottom:calc(var(--px) * -1.5);
  width:calc(var(--px) * 2); height:calc(var(--px) * 1.5);
  transform:translateX(-50%);
  background:var(--bubblegum);
  box-shadow:0 0 0 1px var(--ink);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.ray-n { transform:translate(-50%,-50%) rotate(180deg) translateY(calc(var(--px)*-4.5)); }
.ray-ne{ transform:translate(-50%,-50%) rotate(225deg) translateY(calc(var(--px)*-4.5)); }
.ray-e { transform:translate(-50%,-50%) rotate(270deg) translateY(calc(var(--px)*-4.5)); }
.ray-se{ transform:translate(-50%,-50%) rotate(315deg) translateY(calc(var(--px)*-4.5)); }
.ray-s { transform:translate(-50%,-50%) rotate(0deg)   translateY(calc(var(--px)*-4.5)); }
.ray-sw{ transform:translate(-50%,-50%) rotate(45deg)  translateY(calc(var(--px)*-4.5)); }
.ray-w { transform:translate(-50%,-50%) rotate(90deg)  translateY(calc(var(--px)*-4.5)); }
.ray-nw{ transform:translate(-50%,-50%) rotate(135deg) translateY(calc(var(--px)*-4.5)); }

/* downward chevron sprite — bobs once every 7s */
.chevron{
  margin:calc(var(--px) * 6) auto 0;
  width:calc(var(--px) * 5); height:calc(var(--px) * 3);
  position:relative;
  animation:chevron-bob 7s ease-in-out infinite;
}
.chevron span{
  position:absolute; left:50%; transform:translateX(-50%);
  width:calc(var(--px) * 1); height:calc(var(--px) * 1);
  background:var(--ink);
}
.chevron span:nth-child(1){ top:0; box-shadow:calc(var(--px)*-1) 0 0 var(--ink), calc(var(--px)*1) 0 0 var(--ink); }
.chevron span:nth-child(2){ top:var(--px); box-shadow:calc(var(--px)*-2) 0 0 var(--ink), calc(var(--px)*2) 0 0 var(--ink); }
.chevron span:nth-child(3){ top:calc(var(--px)*2); }
@keyframes chevron-bob{
  0%,82%,100%{ transform:translateY(0); }
  88%{ transform:translateY(calc(var(--px)*1)); }
  94%{ transform:translateY(0); }
}

/* ============================================================
   VITRINE — the card-grid
   ============================================================ */
.vitrine{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap:clamp(1rem, 3vw, 2.75rem);
  align-items:stretch;
}
.vitrine--probe{
  grid-template-columns:repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.card{
  position:relative;
  min-height:calc(var(--px) * 36);
  padding:calc(var(--px) * 4);
  display:flex;
  flex-direction:column;
  gap:calc(var(--px) * 2);
  background:var(--marshmallow);
  color:var(--ink);
  /* pixel-bevel border */
  box-shadow:
    inset calc(var(--px)/2) calc(var(--px)/2) 0 var(--edge-light),
    inset calc(var(--px)/-2) calc(var(--px)/-2) 0 var(--edge-dark);
  transition:transform 400ms var(--easeReel), box-shadow 400ms ease;
  overflow:hidden;
}
/* hover: tiny pixel-step lift + spearmint edge-glow. no tilt/zoom/flip. */
.card:hover{
  transform:translate(0, calc(var(--px) * -1));
  box-shadow:
    inset calc(var(--px)/2) calc(var(--px)/2) 0 var(--edge-light),
    inset calc(var(--px)/-2) calc(var(--px)/-2) 0 var(--edge-dark),
    0 0 0 calc(var(--px)/2) var(--spearmint),
    0 calc(var(--px)*1) 0 0 var(--ink);
}

/* card colour variants */
.card--accent{ background:var(--lemon-tint); }
.card--mint{ background:var(--spearmint-tint); }
.card--lemon{ background:var(--lemon-tint); }
.card--ink{ background:var(--ink); color:var(--marshmallow); }
.card--ink .meditation{ color:var(--marshmallow); }
.card--ink .card-caption{ color:var(--spearmint); opacity:0.7; }
.card--bubblegum-text{ background:var(--bubblegum); color:var(--ink); }
.card--closing .meditation{ font-size:clamp(1.15rem, 1rem + 0.4vw, 1.45rem); }

/* text-meditation cards centre their line */
.card--text{ justify-content:center; }
.card--accent{ justify-content:center; }

/* ---- duotone pixel photographs (described, CSS-built) ---- */
.card--photo .duotone{
  flex:1;
  min-height:calc(var(--px) * 24);
  border:0;
  box-shadow:0 0 0 calc(var(--px)/2) var(--ink);
  background-size:calc(var(--px)/2) calc(var(--px)/2), 100% 100%;
  background-blend-mode:multiply;
}
/* common dither layer + a hue-specific "image" gradient */
.duotone--chamber{
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%),
    repeating-linear-gradient(115deg, var(--bubblegum) 0 calc(var(--px)*3), var(--ink) calc(var(--px)*3) calc(var(--px)*4), var(--bubblegum) calc(var(--px)*4) calc(var(--px)*9), var(--ink) calc(var(--px)*9) calc(var(--px)*9.5));
}
.duotone--coil{
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%),
    repeating-radial-gradient(circle at 50% 50%, var(--spearmint) 0 calc(var(--px)*2), var(--ink) calc(var(--px)*2) calc(var(--px)*3.5));
}
.duotone--magnet{
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%),
    linear-gradient(90deg, var(--bubblegum) 0 35%, var(--ink) 35% 50%, var(--marshmallow) 50% 65%, var(--ink) 65% 100%);
}
.duotone--geiger{
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%),
    repeating-linear-gradient(0deg, var(--bubblegum) 0 calc(var(--px)*2.5), var(--ink) calc(var(--px)*2.5) calc(var(--px)*3));
}
.duotone--aurora{
  background-image:
    repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%),
    linear-gradient(180deg, var(--ink) 0 30%, var(--spearmint) 30% 48%, var(--bubblegum) 48% 62%, var(--ink) 62% 100%);
}

/* ---- lottie stages ---- */
.lottie-stage{
  flex:1;
  min-height:calc(var(--px) * 24);
  box-shadow:0 0 0 calc(var(--px)/2) var(--ink);
  background:var(--marshmallow);
  display:flex; align-items:center; justify-content:center;
}
.card--ink .lottie-stage,
.card--blossom .lottie-stage{ background:var(--ink); }
.card--blossom .lottie-stage{ background:var(--grape); }
.card--horizon .lottie-stage{ background:var(--ink); }
.lottie-stage svg{ width:100% !important; height:100% !important; image-rendering:pixelated; }

/* ---- interactive probe card ---- */
.card--probe{
  background:var(--ink);
  color:var(--marshmallow);
  min-height:calc(var(--px) * 50);
}
.card--probe canvas{
  width:100%;
  flex:1;
  min-height:calc(var(--px) * 30);
  box-shadow:0 0 0 calc(var(--px)/2) var(--bubblegum);
  background:#120F24;
  display:block;
}
.card--probe .card-caption{ color:var(--spearmint); opacity:0.75; }
.probe-readings{
  display:flex; flex-wrap:wrap; gap:calc(var(--px) * 2);
  font-family:var(--font-pixel);
  font-size:0.5rem;
  line-height:2;
  color:var(--lemon);
}
.probe-readings span{ white-space:nowrap; }

/* ============================================================
   INK-BAND LATTICE backdrop
   ============================================================ */
.ink-lattice{
  position:absolute; inset:0;
  opacity:0.32;
  background-image:url("assets/botanical-tile.svg");
  background-size:calc(var(--px) * 8) calc(var(--px) * 8);
  animation:lattice-drift 52s linear infinite;
  z-index:0;
}
.band--ink .band-inner{ z-index:2; }

/* ============================================================
   BOTTOM DOCK — six pixel lanterns
   ============================================================ */
.dock{
  position:fixed;
  left:50%;
  bottom:calc(var(--px) * 2);
  transform:translateX(-50%);
  display:flex;
  gap:calc(var(--px) * 2);
  padding:calc(var(--px) * 1.5) calc(var(--px) * 2.5);
  background:var(--ink);
  box-shadow:
    inset calc(var(--px)/2) calc(var(--px)/2) 0 rgba(255,255,255,0.18),
    inset calc(var(--px)/-2) calc(var(--px)/-2) 0 #000,
    0 0 0 calc(var(--px)/2) var(--ink);
  z-index:8000;
}
.dock-lantern{
  background:transparent;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--px)/2);
  padding:calc(var(--px)/2);
}
.lantern-icon{
  width:calc(var(--px) * 2.5);
  height:calc(var(--px) * 3);
  background:var(--grape);
  box-shadow:
    0 0 0 1px var(--ink),
    inset 0 calc(var(--px)/-2) 0 rgba(0,0,0,0.25);
  position:relative;
  transition:background 600ms ease, filter 600ms ease, transform 300ms ease;
}
.lantern-icon::before{
  /* the little top loop of the lantern */
  content:""; position:absolute; top:calc(var(--px) * -0.75); left:50%;
  width:calc(var(--px) * 1); height:calc(var(--px) * 1);
  transform:translateX(-50%);
  background:var(--grape);
  box-shadow:0 0 0 1px var(--ink);
}
.lantern-label{
  font-family:var(--font-pixel);
  font-size:0.4rem;
  color:rgba(255,244,232,0.4);
  transition:color 400ms ease;
}
/* active band lantern — lemon-drop glow */
.dock-lantern.is-active .lantern-icon{
  background:var(--lemon);
  filter:drop-shadow(0 0 calc(var(--px)*1.5) var(--lemon));
  animation:lantern-glow 4s ease-in-out infinite;
}
.dock-lantern.is-active .lantern-label{ color:var(--lemon); }
@keyframes lantern-glow{
  0%,100%{ filter:drop-shadow(0 0 calc(var(--px)*1) var(--lemon)); }
  50%{ filter:drop-shadow(0 0 calc(var(--px)*2.5) var(--lemon)); }
}
.dock-lantern:hover .lantern-icon{ transform:translateY(calc(var(--px)/-2)); }

/* ============================================================
   FOOTER inside band 06
   ============================================================ */
.band-footer{
  margin-top:calc(var(--px) * 10);
  display:flex;
  align-items:center;
  gap:calc(var(--px) * 2);
  justify-content:center;
}
.sprite-lantern{
  width:calc(var(--px) * 3);
  height:calc(var(--px) * 4);
  background:var(--lemon);
  box-shadow:0 0 0 1px var(--ink), inset 0 calc(var(--px)/-2) 0 rgba(0,0,0,0.25);
  filter:drop-shadow(0 0 calc(var(--px)*1.5) var(--lemon));
  animation:lantern-glow 5s ease-in-out infinite;
  position:relative;
}
.sprite-lantern::before{
  content:""; position:absolute; top:calc(var(--px) * -0.75); left:50%;
  width:calc(var(--px) * 1); height:calc(var(--px) * 1);
  transform:translateX(-50%);
  background:var(--lemon);
  box-shadow:0 0 0 1px var(--ink);
}
.footer-date{
  font-family:var(--font-pixel);
  font-size:0.5rem;
  letter-spacing:0.04em;
  opacity:0.55;
}

/* ============================================================
   AMBIENT DRIFTING SPRITES — moth + cherry petal
   ============================================================ */
.ambient{ position:fixed; inset:0; pointer-events:none; z-index:7500; }
.sprite-moth{
  position:absolute; top:30vh; left:-10vw;
  width:calc(var(--px) * 2); height:calc(var(--px) * 2);
  background:var(--marshmallow);
  box-shadow:
    0 0 0 1px var(--ink),
    calc(var(--px)*1.5) 0 0 var(--marshmallow),
    calc(var(--px)*1.5) 0 0 1px var(--ink);
  opacity:0.7;
  animation:moth-drift 41s linear infinite;
}
@keyframes moth-drift{
  0%{ transform:translate(0,0) rotate(0); }
  25%{ transform:translate(30vw, -8vh); }
  50%{ transform:translate(60vw, 6vh); }
  75%{ transform:translate(90vw, -4vh); }
  100%{ transform:translate(120vw, 2vh); }
}
.sprite-petal{
  position:absolute; top:-8vh; left:70vw;
  width:calc(var(--px) * 1.5); height:calc(var(--px) * 1.5);
  background:var(--bubblegum);
  box-shadow:0 0 0 1px var(--ink);
  opacity:0.65;
  animation:petal-fall 23s linear infinite;
}
@keyframes petal-fall{
  0%{ transform:translate(0,0) rotate(0); }
  100%{ transform:translate(-14vw, 110vh) rotate(540deg); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:48rem){
  .band{ padding:calc(var(--px)*10) calc(var(--px)*2) calc(var(--px)*14); }
  .chapter-plate{ top:calc(var(--px)*2); left:calc(var(--px)*2); }
  .hero-tile{ padding:calc(var(--px)*6) calc(var(--px)*3) calc(var(--px)*7); }
  .dock{ gap:var(--px); padding:var(--px) calc(var(--px)*1.5); }
  .lantern-label{ display:none; }
}

/* ============================================================
   reduced motion — freeze loops to first frame, kill weight tween
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  .hero-line, .band-title{ transition:none !important; }
}