/* Boot sequence. The mark assembles itself out of its two halves over a faint canopy, then
   flies into the header logo as the curtain lifts. Shown once per session; the head script
   decides whether it runs, this file only draws it. */

.boot { display: none; }

.is-booting body { overflow: hidden; }
/* Hero copy animates on its own delays; hold it until the curtain is up. */
.is-booting .hero, .is-booting .hero * { animation-play-state: paused !important; }
/* The header mark is the flight's destination, so it stays dark until the boot mark lands. */
.is-booting .logo__svg { opacity: 0; }
.logo__svg { transition: opacity .3s var(--ease); }

.is-booting .boot,
.boot.is-flying {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 999;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--void);
  color: #fff;
  /* Failsafe: if the orchestrator never runs, the curtain still lifts. */
  animation: boot-failsafe .6s var(--ease) 6s forwards;
}
@keyframes boot-failsafe { to { opacity: 0; visibility: hidden; } }

/* Canopy from above, pushed deep green and held far back so the mark stays the subject. */
.boot::before {
  content: "";
  position: absolute; inset: -4%;
  background: url("/assets/footer-forest-1800.jpg") center / cover no-repeat;
  filter: saturate(.5) sepia(.32) hue-rotate(56deg) brightness(.85) contrast(1.02);
  opacity: .6;
  animation: boot-drift 16s ease-out forwards;
  pointer-events: none;
}
@keyframes boot-drift { from { transform: scale(1); } to { transform: scale(1.12); } }

/* Light gathered where the mark sits, night at the edges. */
.boot::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(66% 56% at 50% 44%, rgba(18, 56, 42, .28), rgba(6, 18, 12, .62) 62%, rgba(6, 18, 12, .88) 100%);
  pointer-events: none;
}
.boot-stage, .boot-caption, .boot-foot { position: relative; z-index: 1; }

.boot-stage { width: min(460px, 68vw); }
.boot-scene { display: block; width: 100%; height: auto; overflow: visible; }

/* Both halves are drawn at mark size and travel in from opposite corners, so the arrival
   is the logo itself: disc at (182,79) r39, ring at (219.5,122.5) r33. The logo at 3x. */
.boot-disc, .boot-ring { transform-box: view-box; }
.boot-disc {
  fill: var(--sprout);
  animation: boot-disc-in 1s cubic-bezier(.16, .9, .2, 1.02) .05s both;
}
@keyframes boot-disc-in {
  from { transform: translate(104px, 34px) scale(.55); opacity: 0; }
  to   { transform: translate(182px, 79px) scale(1); opacity: 1; }
}
.boot-ring {
  fill: none;
  stroke: var(--canvas);
  stroke-width: 7.2;
  animation: boot-ring-in 1s cubic-bezier(.16, .9, .2, 1.02) .18s both;
}
@keyframes boot-ring-in {
  from { transform: translate(302px, 168px) scale(.55); opacity: 0; }
  to   { transform: translate(219.5px, 122.5px) scale(1); opacity: 1; }
}

.boot-caption {
  margin-top: clamp(24px, 5vh, 48px);
  text-align: center;
}
.boot-line {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  color: #fff;
  opacity: 0;
  animation: boot-rise .9s var(--ease) .7s both;
}
@keyframes boot-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Instrument rule along the foot of the screen. */
.boot-foot {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: clamp(22px, 4vh, 40px);
  display: grid;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  opacity: 0;
  animation: boot-fade-plain .8s var(--ease) .35s forwards;
}
@keyframes boot-fade-plain { to { opacity: 1; } }
.boot-foot-row { display: flex; justify-content: space-between; align-items: baseline; }
.boot-foot-row span { font-variant-numeric: lining-nums tabular-nums; }
.boot-bar { height: 1px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.boot-bar i {
  display: block; height: 100%; width: 100%;
  background: var(--sprout);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}

/* ---- Exit: the caption clears, then the mark flies to the header logo ---- */
.boot.is-out .boot-foot { animation: none; opacity: 0; transition: opacity .3s var(--ease); }
.boot.is-out .boot-line { animation: none; opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
/* A touch of momentum before the mark leaves, so the hold never reads as a stall. */
.boot.is-out .boot-stage { transform: scale(1.05); transition: transform .6s cubic-bezier(.6, 0, .2, 1); }

/* Flight and curtain. --tx/--ty/--ts are measured off the real header mark. */
.boot.is-flying .boot-stage {
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--ts, .2));
  transition: transform .78s cubic-bezier(.6, 0, .12, 1);
}
.boot.is-flying .boot-caption { opacity: 0; transition: opacity .3s var(--ease); }
.boot.is-flying {
  animation: none;
  opacity: 0;
  transition: opacity .55s var(--ease) .2s;
}

@media (max-width: 640px) { .boot-stage { width: 72vw; } }

@media (prefers-reduced-motion: reduce) {
  .boot::before { animation: none; }
  .boot-disc { animation: none; transform: translate(182px, 79px) scale(1); }
  .boot-ring { animation: none; transform: translate(219.5px, 122.5px) scale(1); }
  .boot-line, .boot-foot { animation: none; opacity: 1; }
  .boot.is-out .boot-stage { transition: none; transform: none; }
  .boot.is-flying .boot-stage { transition: none; transform: none; }
  .boot.is-flying { transition: opacity .35s linear; }
}