/* ===========================================================
   miris.day — a Bauhaus solar observatory hallucinated by a
   1973 paperback dust-jacket designer.
   Palette: #F5EFE2 #2A2540 #E8763A #1F4FA8 #9CC0A6 #F0C97D #D24A4A #7A7186
   Fonts: Major Mono Display (numerals), Bagel Fat One (haiku),
          Inter (body prose).
   =========================================================== */

:root {
  /* --- palette --- */
  --paper:      #F5EFE2;  /* atelier paper */
  --indigo:     #2A2540;  /* plate-rule indigo */
  --ochre:      #E8763A;  /* solar ochre */
  --cobalt:     #1F4FA8;  /* bauhaus cobalt */
  --celadon:    #9CC0A6;  /* twilight celadon */
  --flare-gold: #F0C97D;  /* lens-flare gold */
  --streak-red: #D24A4A;  /* anamorphic horizontal-streak red */
  --ash:        #7A7186;  /* smoke ash */
  --white:      #FFFFFF;

  /* --- type --- */
  --f-num:   'Major Mono Display', 'Inter', monospace;
  --f-haiku: 'Bagel Fat One', 'Inter', sans-serif;
  --f-body:  'Inter', system-ui, sans-serif;

  --gutter: 12vh;
  --ease-spring: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--indigo);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
  /* deliberate refusal of scroll-snap; the scroll is free and slow */
}

/* ===========================================================
   ANALOGUE TEXTURE LAYERS — fixed, never moving
   =========================================================== */

.paper-grain {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
}

.layer-paper-noise {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 2;
  filter: url(#paperNoise);
  opacity: 0.9;
}

.layer-film-grain {
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 60;
  filter: url(#filmGrain);
  mix-blend-mode: multiply;
  opacity: 0.3;
}

/* ===========================================================
   THE DAY ARC — page-spanning SVG hairline
   =========================================================== */

.day-arc-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

#dayArcPath {
  stroke: var(--ochre);
  stroke-width: 1.6;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
  transition: none;
}

/* ===========================================================
   PERSISTENT HOUR GLYPH — top-right, smooth digit roll
   =========================================================== */

.hour-glyph {
  position: fixed;
  top: clamp(1.2rem, 3vh, 2.4rem);
  right: clamp(1.6rem, 4vw, 3.4rem);
  z-index: 40;
  display: flex;
  align-items: baseline;
  font-family: var(--f-num);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: 0.06em;
  color: var(--indigo);
  user-select: none;
  pointer-events: none;
  line-height: 1;
}

.hour-glyph .colon {
  margin: 0 0.04em;
  opacity: 0.65;
  transform: translateY(-0.06em);
}

.hour-glyph .digit {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
}

.hour-glyph .digit-strip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transition: transform 0.48s var(--ease-spring);
  will-change: transform;
}

/* split the inline "0123456789" string into 10 stacked rows
   handled by letter spacing trick — instead use a measured line-height
   by wrapping; but since markup is a single string, use writing layout */
.hour-glyph .digit-strip {
  white-space: pre;
  line-height: 1em;
  /* render the 10 chars as a vertical column via writing-mode-like hack:
     simpler — we just transform a single rendered string. So instead we
     letterspace each char onto its own line by inserting via JS spans.
     The JS will replace .digit-strip text with <i> rows. */
}

.hour-glyph .digit-strip i {
  display: block;
  height: 1em;
  font-style: normal;
}

/* ===========================================================
   VERTICAL MICRO-INDEX — right margin
   =========================================================== */

.micro-index {
  position: fixed;
  top: 50%;
  right: clamp(0.7rem, 1.8vw, 1.6rem);
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 2.2vh, 1.6rem);
}

.mi-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--ash);
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.4s var(--ease-spring),
              border-color 0.4s var(--ease-spring),
              transform 0.4s var(--ease-spring);
}

.mi-dot.is-passed {
  background: var(--ash);
}

.mi-dot.is-active {
  background: var(--cobalt);
  border-color: var(--cobalt);
  transform: scale(1.7);
}

.mi-dot::after {
  content: attr(data-hour);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-num);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  color: var(--ash);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.mi-dot:hover::after {
  opacity: 1;
}

/* ===========================================================
   SCROLL ROOT + PLATES
   =========================================================== */

.scroll-root {
  position: relative;
  z-index: 5;
  padding-top: var(--gutter);
}

.plate {
  position: relative;
  min-height: 100vh;
  margin-bottom: var(--gutter);
  display: grid;
  /* 12-column grid laid over a 9-row baseline — the Bauhaus dotted ruler */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(9, 1fr);
  padding: 0 clamp(1.4rem, 5vw, 5.5rem);
  overflow: hidden;
}

.plate:last-child {
  margin-bottom: 0;
  min-height: 130vh; /* room for the colophon-seal 12vh below */
}

/* the dotted Bauhaus ruler — faint */
.plate-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
}

.plate-grid span {
  border-left: 1px dashed var(--ash);
}
.plate-grid span:first-child { border-left: 1px dashed var(--ash); }
.plate-grid span:last-child  { border-right: 1px dashed var(--ash); }

/* ---- the stage where the primitives live ---- */
.plate-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

/* ---- the text column, hand-placed asymmetrically per plate ---- */
.plate-text {
  position: relative;
  z-index: 10;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 56ch;
}

.plate-numeral {
  font-family: var(--f-num);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
}

.hour-stamp {
  font-family: var(--f-num);
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  letter-spacing: 0.06em;
  color: var(--indigo);
  line-height: 1;
}

.haiku {
  font-family: var(--f-haiku);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  letter-spacing: -0.015em;
  line-height: 0.94;
  color: var(--ochre);
  margin: 0.1rem 0 0;
  font-weight: 400;
}

/* ---- the progressive-disclosure "+" toggle ---- */
.disclose-toggle {
  width: 32px;
  height: 32px;
  margin-top: 0.6rem;
  border: 1.5px solid var(--indigo);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  flex: 0 0 auto;
  transition: background 0.4s var(--ease-spring),
              border-color 0.4s var(--ease-spring);
}

.disclose-toggle:hover {
  background: rgba(42, 37, 64, 0.06);
}

.toggle-cross {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 0.48s var(--ease-spring);
}

.toggle-cross span {
  position: absolute;
  background: var(--indigo);
}
.toggle-cross span:first-child {
  left: 50%; top: 7px; bottom: 7px;
  width: 1.5px;
  transform: translateX(-50%);
}
.toggle-cross span:last-child {
  top: 50%; left: 7px; right: 7px;
  height: 1.5px;
  transform: translateY(-50%);
}

.disclose-toggle[aria-expanded="true"] .toggle-cross {
  transform: rotate(45deg);
}
.disclose-toggle[aria-expanded="true"] {
  border-color: var(--ochre);
}
.disclose-toggle[aria-expanded="true"] .toggle-cross span {
  background: var(--ochre);
}

/* ---- the prose that triangulates open ---- */
.prose {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.48s var(--ease-spring),
              opacity 0.48s var(--ease-spring),
              margin-top 0.48s var(--ease-spring);
  margin-top: 0;
}

.prose.is-open {
  max-height: 60vh;
  opacity: 1;
  margin-top: 0.4rem;
}

.prose p {
  font-family: var(--f-body);
  font-size: 17.5px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  max-width: 56ch;
  color: var(--indigo);
  margin: 0;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

/* ---- micro-monogram per plate (lower-right) ---- */
.micro-monogram {
  position: absolute;
  width: 40px;
  height: 40px;
  right: clamp(1.4rem, 5vw, 5.5rem);
  bottom: clamp(1.4rem, 5vh, 4rem);
  z-index: 10;
}

/* ===========================================================
   BAUHAUS PRIMITIVES — generic helpers
   =========================================================== */

.prim { position: absolute; }

.sq { background: var(--indigo); }

/* secondary curve — the design's hand-drawn rebellion */
.secondary-curve {
  position: absolute;
  pointer-events: none;
}

/* hairlines */
.hairline { position: absolute; background: var(--indigo); opacity: 0.85; }
.hairline--h { height: 1.5px; }
.hairline--diag {
  height: 1.5px;
  transform-origin: center;
}

/* ===========================================================
   LENS-FLARE COMPOSITES — the signature atmospheric move
   =========================================================== */

.flare-wrap {
  position: absolute;
  pointer-events: none;
}

.flare-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flare-halo {
  mix-blend-mode: screen;
}

.flare-hi {
  mix-blend-mode: screen;
}

.flare-streak {
  mix-blend-mode: screen;
}

/* breathing animation — eight oscillators, out of phase by 0.5s */
@keyframes flare-breathe {
  from { transform: scale(0.98); }
  to   { transform: scale(1.02); }
}

.flare-breathe {
  transform-box: fill-box;
  transform-origin: center;
  animation: flare-breathe 4s ease-in-out infinite alternate;
}

.flare-wrap--1 .flare-breathe { animation-delay: 0s; }
.flare-wrap--2 .flare-breathe { animation-delay: 0.5s; }
.flare-wrap--4 .flare-breathe { animation-delay: 1.5s; }
.flare-wrap--5 .flare-breathe { animation-delay: 2.0s; }
.flare-wrap--6 .flare-breathe { animation-delay: 2.5s; }

/* zenith mega halo */
.zenith-halo {
  position: absolute;
  width: 70vw;
  height: 70vw;
  top: -22vw;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(240, 201, 125, 0.35) 0%,
              rgba(240, 201, 125, 0.12) 45%,
              rgba(240, 201, 125, 0) 72%);
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes halo-breathe {
  from { transform: translateX(-50%) scale(0.985); }
  to   { transform: translateX(-50%) scale(1.015); }
}
.zenith-halo { animation: halo-breathe 4s ease-in-out infinite alternate; }

/* cool halo for blue-hour plates */
.cool-halo {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  background: radial-gradient(circle,
              rgba(156, 192, 166, 0.20) 0%,
              rgba(156, 192, 166, 0.08) 50%,
              rgba(156, 192, 166, 0) 75%);
}

.cool-halo--7 {
  width: 60vw;
  height: 60vw;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: cool-breathe 4s ease-in-out infinite alternate;
}
@keyframes cool-breathe {
  from { transform: translate(-50%, -50%) scale(0.985); }
  to   { transform: translate(-50%, -50%) scale(1.02); }
}

/* ===========================================================
   PER-PLATE COMPOSITION — asymmetric, off-axis placement
   =========================================================== */

/* ---------- Plate I — 04:42 sunrise ---------- */
.plate--1 .plate-text {
  grid-column: 4 / 11;
  grid-row: 5 / 9;
}
.prim--tri-down-1 {
  position: absolute;
  width: 38vw;
  height: 38vw;
  left: 22%;
  top: -8vh;
}
.flare-wrap--1 {
  width: 28vw;
  height: 28vw;
  right: -8vw;
  bottom: -10vw;
}
.sc--1 {
  width: 26vw;
  height: 24vh;
  left: 6vw;
  bottom: 8vh;
}

/* ---------- Plate II — 06:18 golden hour ---------- */
.plate--2 .plate-text {
  grid-column: 6 / 12;
  grid-row: 3 / 8;
}
.flare-wrap--2 {
  width: 52vw;
  height: 52vw;
  left: -24vw;
  top: 50%;
  transform: translateY(-50%);
}
.hairline-2 {
  left: 0; right: 0;
  top: 38.2%;
}
.sc--2 {
  width: 22vw;
  height: 30vh;
  right: 14vw;
  top: 12vh;
}

/* ---------- Plate III — 08:55 morning work ---------- */
.plate--3 .plate-text {
  grid-column: 2 / 8;
  grid-row: 6 / 9;
  align-self: end;
  padding-bottom: 6vh;
}
.sq--big-3 {
  width: 32vw; height: 32vw;
  left: 4vw; top: 4vh;
}
.sq--mid-3 {
  width: 18vw; height: 18vw;
  left: 30vw; top: 30vh;
}
.sq--small-3 {
  width: 9vw; height: 9vw;
  left: 46vw; top: 52vh;
}
.sc--3 {
  width: 20vw; height: 24vh;
  right: 8vw; top: 14vh;
}

/* ---------- Plate IV — 12:51 zenith ---------- */
.plate--4 .plate-text {
  grid-column: 4 / 10;
  grid-row: 6 / 9;
  align-self: end;
  padding-bottom: 8vh;
  text-align: left;
}
.flare-wrap--4 {
  width: 56vw; height: 56vw;
  left: 50%;
  transform: translateX(-50%);
  top: -28vw;
}
.sc--4 {
  width: 40vw; height: 40vh;
  right: -6vw; bottom: -6vh;
}

/* ---------- Plate V — 16:24 afternoon ---------- */
.plate--5 .plate-text {
  grid-column: 3 / 10;
  grid-row: 2 / 6;
}
.prim--long-tri-5 {
  position: absolute;
  width: 60vw; height: 4vh;
  right: -2vw;
  top: 62%;
}
.flare-wrap--5 {
  width: 14vw; height: 14vw;
  left: 6vw; top: 8vh;
}
.sc--5 {
  width: 22vw; height: 28vh;
  left: 2vw; top: 30vh;
}

/* ---------- Plate VI — 19:08 sunset ---------- */
.plate--6 .plate-text {
  grid-column: 5 / 12;
  grid-row: 2 / 6;
}
.flare-wrap--6 {
  width: 36vw; height: 36vw;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18vw;
}
.hairline-6a { left: 0; right: 0; top: 20%; }
.hairline-6b { left: 0; right: 0; top: 40%; }
.hairline-6c { left: 0; right: 0; top: 60%; }
.sc--6 {
  width: 22vw; height: 28vh;
  left: 4vw; top: 6vh;
}

/* ---------- Plate VII — 21:33 blue hour ---------- */
.plate--7 .plate-text {
  grid-column: 4 / 11;
  grid-row: 6 / 9;
  align-self: end;
  padding-bottom: 6vh;
}
.sq--celadon-7 {
  width: 36vw; height: 36vw;
  background: var(--celadon);
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
}
.prim--crown-7 {
  position: absolute;
  width: 2.4vw; height: 2.4vw;
  left: 50%;
  top: calc(46% - 18vw - 2.4vw);
  transform: translateX(-50%);
}
.sc--7 {
  width: 24vw; height: 30vh;
  right: 6vw; bottom: 6vh;
}

/* ---------- Plate VIII — 23:59 midnight ---------- */
.plate--8 .plate-text {
  grid-column: 5 / 12;
  grid-row: 4 / 7;
}
.sq--celadon-8 {
  width: 28vw; height: 28vw;
  background: var(--celadon);
  left: 6vw; top: 8vh;
}
.hairline-8 {
  width: 130vw;
  left: -15vw;
  top: 46%;
  transform: rotate(28deg);
}
.seed-circle-8 {
  width: 2vw; height: 2vw;
  border-radius: 50%;
  background: var(--cobalt);
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
}
.sc--8 {
  width: 22vw; height: 26vh;
  left: 4vw; bottom: 30vh;
}

/* ===========================================================
   COLOPHON SEAL — at the very bottom of plate VIII
   =========================================================== */

.colophon {
  position: absolute;
  bottom: 4vh;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 0 8vw;
  z-index: 10;
}

.colophon-seal {
  width: 64px;
  height: 64px;
}

.colophon-monogram {
  font-family: var(--f-haiku);
  font-size: 30px;
  fill: var(--ash);
}

.colophon-line {
  font-family: var(--f-body);
  font-size: 0.78rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ash);
  text-align: center;
  max-width: 52ch;
  margin: 0;
}

.colophon-line em {
  font-style: italic;
}

.colophon-year {
  font-family: var(--f-num);
  letter-spacing: 0.06em;
}

/* ===========================================================
   RESPONSIVE — keep the essay legible on narrow screens
   =========================================================== */

@media (max-width: 720px) {
  .plate {
    padding: 0 clamp(1.2rem, 6vw, 2rem);
    grid-template-rows: repeat(12, 1fr);
  }
  .plate--1 .plate-text,
  .plate--2 .plate-text,
  .plate--3 .plate-text,
  .plate--4 .plate-text,
  .plate--5 .plate-text,
  .plate--6 .plate-text,
  .plate--7 .plate-text,
  .plate--8 .plate-text {
    grid-column: 1 / 13;
    grid-row: 5 / 11;
    align-self: center;
    padding-bottom: 0;
  }
  .haiku { font-size: clamp(2.6rem, 11vw, 4rem); }
  .hour-stamp { font-size: clamp(2rem, 9vw, 3rem); }
  .micro-index { right: 0.4rem; gap: 0.7rem; }
  .prose.is-open { max-height: 80vh; }
}