/* miko.pet — flat-design / retro-display / asymmetric parallax / circuit + organic-blob */

* { margin: 0; padding: 0; box-sizing: border-box; box-shadow: none !important; }

:root {
  --scroll-y: 0;
  --cream: #FFEED9;
  --mustard: #F6B23A;
  --persimmon: #E2552B;
  --sienna: #9C3B1B;
  --walnut: #3F2A1A;
  --linen: #D8C7A4;
  --sage: #7A8B5C;
  --wash: #FBF5EA;
}

html { scroll-behavior: auto; }

body {
  background: var(--cream);
  color: var(--walnut);
  font-family: 'Bagel Fat One', sans-serif;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ---- Asymmetric golden seam ---- */
.seam {
  position: fixed;
  left: 38.2vw;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--walnut);
  z-index: 1;
  pointer-events: none;
}

/* ---- Page-edge wash ---- */
.edge-wash {
  position: fixed;
  left: 0;
  right: 0;
  height: 2vh;
  z-index: 6;
  pointer-events: none;
}
.edge-wash--top { top: 0; background: linear-gradient(to bottom, var(--wash), var(--cream)); }
.edge-wash--bottom { bottom: 0; background: linear-gradient(to top, var(--wash), var(--cream)); }

/* ---- Floating blob layer (rate 0.28) ---- */
.float-layer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--scroll-y) * 0.28 * -1px), 0);
  will-change: transform;
}
.drift-blob { position: absolute; opacity: 0.32; }
.drift-blob--a { width: 30vw; left: 52vw; top: 18vh; }
.drift-blob--b { width: 22vw; left: 8vw; top: 130vh; }
.drift-blob--c { width: 26vw; left: 60vw; top: 280vh; }

/* ---- Main / sections ---- */
main { position: relative; z-index: 2; }

.layer {
  position: relative;
  min-height: clamp(70vh, 90vh, 110vh);
  padding: 8vh 6vw;
  overflow: hidden;
}

.numeral {
  position: absolute;
  top: 4vh;
  right: 6vw;
  font-family: 'Bagel Fat One', sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--persimmon);
  mix-blend-mode: multiply;
  z-index: 3;
}

/* ---- Parallax layers ---- */
.parallax { will-change: transform; }
.parallax--left  { transform: translate3d(0, calc(var(--scroll-y) * 1.0  * 0px), 0); }
.parallax--right { transform: translate3d(0, calc(var(--scroll-y) * 0.62 * -1px + var(--local-base, 0px)), 0); }

/* JS sets --local-* offsets relative to section; we instead drive via global --scroll-y differential */

/* ---- Display headlines ---- */
.display-h {
  font-family: 'Bagel Fat One', sans-serif;
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  letter-spacing: -0.02em;
  line-height: 0.86;
  color: var(--walnut);
}
h3.display-h { font-size: clamp(2.4rem, 5vw, 4rem); }

p { font-family: 'Bagel Fat One', sans-serif; font-size: 1.05rem; line-height: 1.5; color: var(--sienna); }

.body-serif {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--sienna);
}

.caption { max-width: 28vw; margin-top: 1.4rem; }
@media (max-width: 820px) { .caption { max-width: 80vw; } }

/* ---- Rubik Mono pin labels ---- */
.pin-list, .pin-list li, .stamp, .bpm-readout, .adopt-counter, .tagline { font-family: 'Rubik Mono One', monospace; }
.stamp, .bpm-readout, .adopt-counter, #birth-stamp { font-family: 'Major Mono Display', monospace; }

/* =========================================================
   Layer 1: The Pinout
   ========================================================= */
.layer--pinout { min-height: 100vh; }
.layer--pinout .parallax--left {
  position: absolute;
  left: 6vw;
  top: 64vh;
}
.domain-mark {
  font-family: 'Bagel Fat One', sans-serif;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--walnut);
}
.domain-mark .dot { color: var(--persimmon); }
.domain-mark .tagline {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sienna);
  margin-top: 0.8rem;
}
.bpm-readout {
  display: block;
  font-size: 0.875rem;
  color: var(--persimmon);
  margin-bottom: 0.6rem;
  letter-spacing: 0.05em;
}
.layer--pinout .parallax--right {
  position: absolute;
  right: 4vw;
  top: 8vh;
}
.pin-list { list-style: none; }
.pin-list li {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sienna);
  margin: 1.4rem 0;
  text-align: right;
}
.pin-list--left li { text-align: left; }

.trace { position: absolute; pointer-events: none; }
.trace--pinout { left: 0; bottom: 0; width: 50vw; height: 60vh; z-index: 0; }
.trace--signoff { right: 0; top: 0; width: 50vw; height: 60vh; z-index: 0; }

/* =========================================================
   Layer 2: The Origin Trace
   ========================================================= */
.layer--origin .parallax--left { position: relative; z-index: 3; }
.origin-col { width: 28vw; }
@media (max-width: 820px) { .origin-col { width: 84vw; } }
.origin-col p { margin-top: 1.2rem; }
.origin-col .stamp { color: var(--persimmon); font-size: 0.95rem; letter-spacing: 0.04em; }
.layer--origin .parallax--right {
  position: absolute;
  right: 2vw;
  top: 6vh;
  width: 34vw;
}
.big-blob { width: 100%; }
@media (max-width: 820px) { .layer--origin .parallax--right { display: none; } }

/* ---- Heartbeat pulse ---- */
@keyframes pulse-72bpm {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.06); }
  24% { transform: scale(1); }
}
.pulse-blob {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-72bpm 833ms ease-in-out infinite;
}
.pulse-trace {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-72bpm 833ms ease-in-out infinite;
}

/* =========================================================
   Layer 3: The Heartbeat Schematic
   ========================================================= */
.layer--heartbeat { min-height: 100vh; }
.heartbeat-title { margin-bottom: 0.6rem; }
.heartbeat-bus {
  position: absolute;
  left: 0; right: 0;
  top: 50vh;
  width: 100%;
  height: 200px;
  z-index: 1;
}
.junction-blobs {
  position: absolute;
  top: calc(50vh - 70px);
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 8vw;
  z-index: 2;
  pointer-events: none;
}
.mini-blob { width: 80px; }
.junction-blobs .mini-blob:nth-child(2) { transform: translateY(28px); }

/* =========================================================
   Layer 4: The Care Manual
   ========================================================= */
.layer--care { min-height: 110vh; }
.care-block { margin-bottom: 5vh; }
.care-block h3 { margin-bottom: 1rem; }
.care-block--1 { width: 32vw; margin-left: 0; }
.care-block--2 { width: 27vw; margin-left: 12vw; }
.care-block--3 { width: 41vw; margin-left: 4vw; }
@media (max-width: 820px) {
  .care-block--1, .care-block--2, .care-block--3 { width: 86vw; margin-left: 0; }
}

/* =========================================================
   Layer 5: The Energy Loop
   ========================================================= */
.layer--loop { min-height: 100vh; }
.loop-stage {
  position: absolute;
  right: 6vw;
  top: 14vh;
  width: 38vw;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  z-index: 2;
}
.energy-loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#energy-loop-path { stroke-linecap: round; }
.loop-blob {
  position: absolute;
  left: 50%; top: 50%;
  width: 28%;
  transform: translate(-50%, -50%);
}
@media (max-width: 820px) { .loop-stage { position: relative; right: auto; width: 86vw; margin-top: 4vh; } }

/* =========================================================
   Layer 6: The Lineage Bus
   ========================================================= */
.layer--family { min-height: 110vh; }
.family-bus {
  position: absolute;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  width: min(80vw, 760px);
  height: auto;
  z-index: 2;
}
.chip-label {
  font-family: 'Rubik Mono One', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--linen);
  text-anchor: middle;
}
.chip-label--dark { fill: var(--walnut); }

/* =========================================================
   Layer 7: The Adoption Pulse
   ========================================================= */
.layer--adopt { min-height: 100vh; display: flex; align-items: center; }
.adopt-wrap { position: relative; z-index: 3; }
.adopt-word {
  font-family: 'Bagel Fat One', sans-serif;
  font-size: clamp(8rem, 22vw, 16rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--persimmon);
  display: inline-flex;
  align-items: center;
}
.o-letter { position: relative; display: inline-block; }
.o-blob {
  position: absolute;
  left: 50%; top: 50%;
  width: 0.42em;
  transform: translate(-50%, -50%);
}
.adopt-counter {
  font-family: 'Major Mono Display', monospace;
  font-size: 0.875rem;
  color: var(--sienna);
  letter-spacing: 0.08em;
  margin-top: 1.2rem;
}
.adopt-line { margin-top: 1rem; max-width: 32vw; }
@media (max-width: 820px) { .adopt-line { max-width: 86vw; } }

/* =========================================================
   Layer 8: The Sign-off Pinout
   ========================================================= */
.layer--signoff { min-height: 100vh; }
.layer--signoff .parallax--left {
  position: absolute;
  left: 4vw;
  top: 10vh;
}
.layer--signoff .parallax--right {
  position: absolute;
  right: 6vw;
  top: 60vh;
  text-align: right;
}
.domain-mark--end .tagline { text-align: right; }

/* ---- hover: instant colour flip, no transition ---- */
.pin-list li:hover { color: var(--persimmon); }
.chip:hover rect { fill: var(--sienna); }
.care-block h3:hover { color: var(--persimmon); }

@media (max-width: 820px) {
  .layer { padding: 7vh 7vw; }
  .layer--pinout .parallax--left { position: relative; left: auto; top: auto; margin-top: 30vh; }
  .layer--pinout .parallax--right { position: relative; right: auto; top: auto; margin-top: 4vh; }
  .layer--signoff .parallax--left,
  .layer--signoff .parallax--right { position: relative; left: auto; right: auto; top: auto; text-align: left; }
  .domain-mark--end .tagline { text-align: left; }
  .seam { left: 12vw; }
}