/* Cinematic film and charge meter. */
.boot {
  position: fixed; z-index: 200; inset: 0; overflow: hidden;
  isolation: isolate; background: #000; color: #eeeae1;
  transition: opacity 650ms ease, visibility 650ms;
}
.boot-world, .boot-film, .boot-blackout {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.boot-world { overflow: hidden; background: #050608; }
.boot-world::before {
  content: ""; position: absolute; z-index: 2; inset: 0;
  background: radial-gradient(ellipse at 50% 43%, transparent 12%, #0009 45%, #000 76%);
  opacity: calc(1 - var(--scene-reveal, 0)); pointer-events: none;
}
.boot-charge-light {
  position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 43% at 43% 44%, #ee57421c, transparent 75%),
    radial-gradient(ellipse 27% 50% at 57% 42%, #c7273929, transparent 75%),
    radial-gradient(ellipse 40% 12% at 50% 75%, #f4583124, transparent 72%);
  opacity: var(--charge-atmosphere, 0); mix-blend-mode: screen;
}
.boot-overflow {
  position: absolute; z-index: 3; inset: -12%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 70%, #ff967477 0%, #ff2747aa 12%, #c500398c 32%, #67002c44 52%, transparent 72%);
  opacity: var(--charge-overflow, 0); mix-blend-mode: screen;
  transform-origin: 50% 70%;
  transform: scale3d(calc(.25 + var(--overflow-spread, 0) * 1.45), calc(.12 + var(--overflow-spread, 0) * 1.5), 1);
  will-change: opacity, transform;
}
.boot-overflow::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 70%, transparent 15%, #ff34456b 29%, #f3083833 39%, transparent 56%);
  transform: scaleX(1.5);
}
.boot-world::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 65% 48%, #9b302c55, transparent 65%);
  opacity: var(--afterglow, 0);
}
.boot[data-boot-state="playing"], .boot[data-boot-state="revealing"] {
  opacity: var(--intro-opacity, 1); transition: none;
}
.boot-film {
  display: block; object-fit: cover; object-position: 50% 50%;
  opacity: var(--film-exposure, 0); transform: scale(var(--scene-scale, 1.035));
  will-change: opacity, transform;
}
.boot-blackout { background: #000; }
.boot-finish {
  position: absolute; z-index: 4; inset: 0; display: grid; place-items: center;
  pointer-events: none; opacity: var(--finish-opacity, 0);
  background: radial-gradient(ellipse at center, #4b090919, transparent 58%);
}
.boot-finish img {
  width: min(42vw, 36vh, 340px); height: auto;
  transform: scale(var(--finish-scale, 1)) rotate(0deg);
  filter: saturate(.65) brightness(.85) drop-shadow(0 0 35px #b42a2233);
}
.boot-ko {
  position: absolute; z-index: 4; inset: 0;
  display: flex; justify-content: center; align-items: flex-end;
  padding-bottom: max(22vh, 8rem);
  pointer-events: none; opacity: var(--ko-opacity, 0);
  transition: none;
}
.boot-ko span {
  font: 500 clamp(1rem, 2vw, 1.5rem)/1 var(--display);
  letter-spacing: .3em; color: #ae8079;
  transform: none;
  text-shadow: 0 2px 14px #000;
}
.boot-captions {
  position: absolute; z-index: 5; right: 1.5rem; bottom: max(12vh, 5.5rem);
  left: 1.5rem; text-align: center; pointer-events: none;
}
.boot-caption {
  margin: 0 auto; max-width: 36rem; color: #dedbd5;
  font: 400 clamp(.95rem, 1.4vw, 1.2rem)/1.6 var(--body);
  text-shadow: 0 2px 8px #000, 0 0 20px #000;
  opacity: 0; transition: none;
}
.boot-caption.is-visible { opacity: 1; }
.boot-controls {
  position: absolute; z-index: 10; bottom: max(.65rem, env(safe-area-inset-bottom, 0px));
  left: max(clamp(1.25rem, 3vw, 3rem), env(safe-area-inset-left, 0px)); right: max(clamp(1.25rem, 3vw, 3rem), env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: auto;
}
.boot-controls button {
  display: flex; min-height: 44px; align-items: center; gap: .7rem;
  touch-action: manipulation;
  padding: .5rem 0; color: #8e8b87;
  font: 400 .6rem/1 var(--mono); letter-spacing: .04em;
  text-shadow: 0 1px 6px #000; transition: color 160ms;
}
.boot-controls button:hover, .boot-controls button:focus-visible { color: #fff; }
.boot-controls kbd { min-width: 1.8rem; min-height: 1.2rem; border-color: #ded8ce33; font-size: .52rem; color: #aaa7a4; }
.boot-sound i { display: block; width: 3px; height: 8px; background: currentColor; box-shadow: 5px -3px currentColor, 10px 2px currentColor; margin-right: 10px; }
.boot-sound[aria-pressed="false"] i { height: 1px; box-shadow: 5px 0 currentColor, 10px 0 currentColor; }
.boot[data-boot-state="revealing"] { pointer-events: none; }
.boot[data-boot-state="complete"], .boot[data-boot-state="skipped"] { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.controls > .menu-utilities { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; }
.controls [data-replay-intro] { color: var(--text-3); }
.controls [data-replay-intro]:hover { color: var(--text); }
@media (max-width: 800px) {
  .boot-film { object-fit: cover; }
  .boot[data-shot="back"] .boot-film { object-position: 48% 50%; }
  .boot-captions { bottom: max(12svh, 5rem); }
  .controls > .menu-utilities { gap: .9rem; }
  .controls [data-replay-intro] { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .boot, .boot * { animation: none !important; transition: none !important; }
}

/* A super meter under pressure. Sparks and release follow the film clock. */
.charge-sparks { position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.boot-charge {
  position: absolute; z-index: 6; left: 50%; bottom: 25%;
  width: min(460px, 72vw); pointer-events: none;
  opacity: var(--charge-opacity, 0);
  transform: translate3d(calc(-50% + var(--charge-jitter, 0px)), calc(var(--charge-release, 0) * -20px), 0)
    scaleY(calc(1 - var(--charge-release, 0) * .65));
  will-change: opacity, transform;
}
.boot-charge::before {
  content: ""; position: absolute; inset: -130px -140px;
  background: radial-gradient(ellipse, #ff573d88, #bd122d44 30%, #86131b18 48%, transparent 70%);
  opacity: var(--charge-heat, 0); transform: scale(calc(.7 + var(--charge-pressure, 0) * 1.2));
}
.charge-gauge {
  position: relative; padding: 5px 7px; border-top: 1px solid #826f6544; border-bottom: 1px solid #826f652c;
  transform: skewX(-22deg) scaleY(calc(1 + var(--charge-swell, 0) * .8));
}
.charge-gauge::before, .charge-gauge::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; background: #ae8a7566; }
.charge-gauge::before { left: 0; } .charge-gauge::after { right: 0; }
.charge-segments { display: flex; gap: 4px; height: 11px; }
.charge-segments i { position: relative; z-index: 1; flex: 1; background: transparent; }
.charge-segments i + i::before { content: ""; position: absolute; inset: 0 auto 0 -4px; width: 4px; background: #080608; }
.charge-segments i:nth-child(4n) { flex: 1.6; }
.charge-segments i:nth-last-child(-n+4) { flex: 1.35; }
.charge-segments { position: relative; background: #24191b; }
.charge-segments::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, #a11c15, #ff7c50 65%, #ffe0b0);
  transform: scaleX(var(--charge-energy, 0)); transform-origin: left;
  box-shadow: 0 0 calc(12px + var(--charge-pressure, 0) * 20px) #ed3b25bb,
    0 0 calc(35px + var(--charge-pressure, 0) * 65px) #d8163b77;
  will-change: transform;
}
.charge-segments::after {
  content: ""; position: absolute; z-index: 2; top: -2px; bottom: -2px;
  left: var(--charge-fill, 0%); width: 2px; transform: translateX(-2px);
  background: #fff0cf; opacity: calc(.25 + var(--charge-energy, 0) * .75);
  box-shadow: 0 0 9px #ffb77d, 0 0 22px #fa422b;
}
.charge-core {
  position: absolute; inset: 8px 7px; background: #fff0cf;
  box-shadow: 0 0 16px #ffb77d, 0 0 45px #fa422b, 0 0 95px #e00835;
  transform: scaleX(var(--charge-energy, 0)); transform-origin: left;
  opacity: calc(var(--charge-pressure, 0) * .85);
}
.is-full .charge-core { opacity: var(--charge-flare, 1); }
.is-full .charge-gauge { border-color: #ffc4a8; filter: drop-shadow(0 0 16px #e83728); }

.boot-charge { width: min(360px, 64vw); bottom: 23%; }
.charge-gauge { padding: 6px; border: 1px solid #b0867355; background: #0e080ac9; transform: skewX(-12deg); }
.charge-gauge::before, .charge-gauge::after { top: -1px; bottom: -1px; background: #e3ae8f; }
.charge-segments { height: 5px; gap: 2px; }
.charge-segments i + i::before { left: -2px; width: 2px; }
.charge-segments i:nth-child(n) { flex: 1; }
.charge-segments::before { background: linear-gradient(90deg, #94271e, #e34a32 65%, #ffe0b0); }
.charge-core { inset: 6px; }