/* The boot screen: the medallion inking itself in, and the story as a boot log
 * (boot.js). Tokens come from brana.css, so it boots in every palette.
 *
 * Every part's resting style is its finished state; the animations only run
 * *from* blank. So with reduced motion (animations off) everything is simply
 * drawn. The timeline, in seconds:
 *   0.1  the eye opens          0.4  the rings draw      0.55 the band turns in
 *   0.8  the star's squares     1.1  the fidel ring, letter by letter
 *   0.9  the log starts; a month lights with each line     ~4.3  ready */

/* while booting only the parchment and the living manuscript behind it show;
   and while the drawing flies to the medallion, the desk waits to arrive
   (transparent already while booting, so nothing flickers on the way) */
body.booting #desk, body.booting #bar, body.booting #dock { visibility: hidden }
body.booting .hero, body.booting .corner, body.booting #bar, body.booting #dock,
body.arriving .hero, body.arriving .corner, body.arriving #bar, body.arriving #dock { opacity: 0 }

#boot {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  overflow: hidden; isolation: isolate; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* the parchment: a warm light behind the medallion, darker at the edges, and
   thin enough that the letters of the manuscript stir through it */
#boot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transition: opacity .85s ease;
  background:
    radial-gradient(circle at 34% 50%, color-mix(in srgb, var(--ochre) 22%, transparent), transparent 42%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, color-mix(in srgb, var(--fg) 16%, transparent)),
    color-mix(in srgb, var(--bg) 80%, transparent);
}
#boot.leaving { pointer-events: none }
#boot.leaving::before { opacity: 0 }

.boot-stage {
  --m: min(64vh, 40vw, 460px);
  display: grid; grid-template-columns: var(--m) minmax(0, 540px); align-items: center; gap: clamp(32px, 5vw, 72px);
}

/* ---------- The medallion, drawing itself ---------- */
.boot-medal { position: relative; width: var(--m); aspect-ratio: 1 }
/* a glow that breathes behind it once it's ready */
.boot-medal::before {
  content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(circle, color-mix(in srgb, var(--ochre) 34%, transparent), transparent 68%);
}
.ready .boot-medal::before { opacity: 1; animation: bm-breathe 3.2s ease-in-out infinite }
@keyframes bm-breathe { 50% { transform: scale(1.06); opacity: .7 } }
.bm { position: relative; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .45s ease }
#boot.landed .bm { opacity: 0 }

@keyframes bm-draw { from { stroke-dashoffset: 1 } to { stroke-dashoffset: 0 } }
@keyframes bm-fade { from { opacity: 0 } }
@keyframes bm-fill { from { fill-opacity: 0 } }
@keyframes bm-pop { from { transform: scale(0) } }

/* the year: the progress bar */
.bm-months path { fill: none; stroke: var(--line); stroke-width: 6; transition: stroke .45s ease, filter .45s ease }
.bm-months .lit { stroke: var(--rubric); filter: drop-shadow(0 0 3px var(--rubric)) }
.bm-months .pagume.lit { stroke: var(--ochre); filter: drop-shadow(0 0 7px var(--ochre)) }

.bm-draw { fill: none; stroke: var(--fg); stroke-width: 2; stroke-dasharray: 1; animation: bm-draw 1s var(--d, 0s) cubic-bezier(.6, 0, .3, 1) both }
.bm-dots { fill: none; stroke: var(--fg); stroke-width: 1; stroke-dasharray: 1 5; animation: bm-fade .8s .35s both }
.bm-sky { stroke: var(--sky); stroke-width: 4 }
.bm-band { transform-origin: 200px 200px; animation: bm-band 1.2s .55s cubic-bezier(.2, .8, .2, 1) both }
.bm-band circle { fill: none; stroke-width: 16; stroke-dasharray: 11.52 11.52 }
@keyframes bm-band { from { opacity: 0; transform: rotate(-140deg) scale(.84) } }

.bm-letter, .bm-sep { text-anchor: middle; dominant-baseline: middle }
.bm-letter { font-family: var(--geez); font-size: 14px; fill: var(--fg); animation: bm-letter .5s calc(1.1s + var(--k) * 42ms) both }
.bm-sep { font-size: 8px; fill: var(--rubric); animation: bm-fade .4s calc(1.15s + var(--k) * 42ms) both }
/* each letter arrives in red ink, then dries black */
@keyframes bm-letter { 0% { opacity: 0; fill: var(--rubric) } 35% { opacity: 1; fill: var(--rubric) } }

.bm-sq { stroke: var(--fg); stroke-width: 3; stroke-dasharray: 1; animation: bm-draw 1s .8s cubic-bezier(.6, 0, .3, 1) both, bm-fill .8s 1.6s ease both }
.bm-sq.blue { fill: var(--blue) }
.bm-sq.red { fill: var(--rubric); animation-delay: 1s, 1.85s }
.bm-deco { fill: none; stroke: var(--ochre); stroke-width: 2; stroke-dasharray: 2 6; animation: bm-fade .9s 2.1s both }
.bm-deco.fine { stroke-width: 1; stroke-dasharray: 1 4 }
.bm-tip { fill: var(--ochre); stroke: var(--fg); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: bm-pop .5s calc(1.9s + var(--k) * 70ms) cubic-bezier(.3, 1.7, .5, 1) both }
.bm-disc { fill: var(--disc); stroke: var(--fg); stroke-width: 3; stroke-dasharray: 1; animation: bm-draw 1s .3s ease both, bm-fill .5s .1s ease both }
.ready .bm-disc { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ochre) 55%, transparent)) }

/* the eye: it opens first, looks around, and blinks (it is also a secret) */
.bm-eye { pointer-events: auto; cursor: pointer }
.bm-wake { transform-box: fill-box; transform-origin: center; animation: bm-open .9s .1s cubic-bezier(.3, 1.5, .5, 1) both }
@keyframes bm-open { 0%, 45% { transform: scaleY(.04) } 100% { transform: none } }
.bm-look { animation: bm-look 3.6s 1.1s ease-in-out infinite }
@keyframes bm-look { 0%, 100% { transform: none } 22% { transform: translateX(-13px) } 50% { transform: translate(13px, -3px) } 72% { transform: translateX(2px) } }
.bm-eye .lid { transition: transform .09s ease-in }

/* the month that just lit, named under the medallion like its cartouche */
.boot-month {
  position: absolute; left: 50%; bottom: -5%; translate: -50% 0; z-index: 1;
  display: flex; align-items: baseline; gap: 10px; padding: 5px 16px; white-space: nowrap;
  background: var(--panel); border: 1.5px solid var(--fg); box-shadow: 4px 4px 0 var(--rubric);
  animation: bm-fade .5s .9s both; transition: box-shadow .4s ease, filter .3s ease;
}
.boot-month b { min-width: 4.6em; text-align: center; font-size: 19px; font-weight: 400; color: var(--rubric) }
.boot-month span { font-size: 11.5px; color: var(--ink-soft) }
.boot-month.gold { box-shadow: 4px 4px 0 var(--ochre) }
#boot.leaving .boot-month { filter: opacity(0) }

/* ---------- The words ---------- */
.boot-text { min-width: 0; transition: opacity .35s ease, translate .35s ease }
#boot.leaving .boot-text { opacity: 0; translate: 26px 0 }

/* ብራና OS, written in by a red nib */
.boot-title { position: relative; display: inline-block; font-size: clamp(46px, 6vw, 70px); line-height: 1; color: var(--rubric); text-shadow: 3px 3px 0 var(--fg) }
.bt-ink { display: inline-block; clip-path: inset(-12% -6% -24% -2%); animation: bt-write 1.25s .3s cubic-bezier(.5, 0, .3, 1) both }
@keyframes bt-write { from { clip-path: inset(-12% 100% -24% -2%) } }
.bt-nib {
  position: absolute; left: 100%; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -5px; rotate: 45deg; opacity: 0;
  background: var(--rubric); box-shadow: 0 0 12px var(--rubric); animation: bt-nib 1.25s .3s cubic-bezier(.5, 0, .3, 1) both;
}
@keyframes bt-nib {
  0% { left: 0; top: 62%; opacity: 1 } 20% { top: 22% } 42% { top: 70% } 64% { top: 26% } 86% { top: 64% }
  96% { left: 100%; top: 46%; opacity: 1 } 100% { left: 100%; opacity: 0 }
}
.boot-sub { margin-top: 12px; font-size: 11px; letter-spacing: .22em; color: var(--ink-soft); animation: bm-fade .6s .9s both }
.boot-when { margin-top: 5px; font-size: 11.5px; animation: bm-fade .6s 1s both }
.boot-when .geez { color: var(--rubric) }

/* the log: the story, one milestone a line */
.boot-log {
  list-style: none; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line);
  font-size: 12px; line-height: 1.85; min-height: calc(16 * 1.85em + 12px);
}
.boot-log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; animation: bl-in .34s ease-out both }
@keyframes bl-in { from { clip-path: inset(0 100% 0 0); transform: translateX(-6px) } to { clip-path: inset(0 0 0 0) } }
.bl-n { flex: none; width: 1.7em; text-align: right; font-size: 11px; color: var(--rubric) }
.bl-s { flex: none; width: 6.2ch; text-align: center; font-size: 10.5px; font-weight: 600; white-space: pre }
.ok .bl-s { color: var(--green) }
.dim, .dim .bl-s { color: var(--ink-soft) }
.bl-k { flex: none }
.bl-dots { flex: 1 1 18px; min-width: 18px; translate: 0 -4px; border-bottom: 1px dotted color-mix(in srgb, var(--fg) 38%, transparent) }
.bl-v { margin-left: auto; text-align: right }
.ok .bl-v { color: var(--ink-soft) }
/* the one line that matters most */
.live { color: var(--rubric); font-weight: 600 }
.live .bl-s { color: var(--bg); background: var(--rubric); box-shadow: 0 0 14px color-mix(in srgb, var(--rubric) 70%, transparent); animation: bl-live 1.6s .3s ease-in-out 2 }
@keyframes bl-live { 50% { box-shadow: 0 0 22px var(--rubric) } }

/* the way in */
.boot-enter {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px 9px 9px;
  color: var(--bg); background: var(--fg); border: 2px solid var(--fg); box-shadow: 5px 5px 0 var(--rubric);
  animation: be-in .55s cubic-bezier(.3, 1.5, .5, 1) both, be-glow 2.2s .6s ease-in-out infinite;
}
.boot-enter[hidden] { display: none }
.boot-enter:hover { box-shadow: 7px 7px 0 var(--rubric); translate: -2px -2px }
.be-key { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid currentColor; font-size: 17px; line-height: 1 }
.boot-enter b { font-size: 24px; font-weight: 400; line-height: 1 }
.be-en { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .85 }
@keyframes be-in { from { opacity: 0; transform: translateY(10px) scale(.94) } }
@keyframes be-glow { 50% { box-shadow: 5px 5px 0 var(--rubric), 0 0 0 7px color-mix(in srgb, var(--rubric) 16%, transparent) } }

.boot-skip {
  position: absolute; right: 18px; bottom: 16px; padding: 6px 11px; font-size: 11px; letter-spacing: .06em; color: var(--ink-soft);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 70%, transparent); animation: bm-fade .6s 1.4s both;
}
.ready .boot-skip, #boot.leaving .boot-skip { visibility: hidden }

/* ---------- Phones: the medallion above, the story below ---------- */
@media (max-width: 760px) {
  #boot { place-items: start center; padding: 22px 16px 54px }
  .boot-stage { --m: min(72vw, 40svh, 330px); grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 34px; width: 100%; max-width: 520px }
  .boot-text { width: 100% }
  .boot-title { font-size: 42px }
  .boot-sub { font-size: 10px; letter-spacing: .16em }
  .boot-log {
    font-size: 10.5px; line-height: 1.75; min-height: 0;
    max-height: calc(100svh - var(--m) - 260px); overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .boot-log.full { mask-image: linear-gradient(transparent, #000 34px); -webkit-mask-image: linear-gradient(transparent, #000 34px) }
  .bl-k { min-width: 0; overflow-wrap: anywhere }
  .bl-dots { min-width: 10px }
  .boot-enter { width: 100%; justify-content: center }
  .boot-skip { right: 50%; translate: 50% 0; bottom: 14px; white-space: nowrap }
  #boot.leaving .boot-text { translate: 0 20px }
}