/*
 * The first frame of Coleoni OS (v0.9.19). Linked from index.html ahead of the app,
 * so the mark is on screen before a line of script runs: the C is drawn round from
 * its lower end, the square lands, and the mark waits there until the app takes
 * over and sets `data-leaving`. The colours fall back to the theme's own, for the
 * moment before the app's stylesheet is read.
 */

@property --boot-sweep {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

#boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--pulse-background, #0e0f11);
  color: var(--pulse-foreground, #eceef1);
  pointer-events: none;
}

[data-theme='classic'] #boot {
  background: var(--pulse-background, #f4f5f7);
  color: var(--pulse-foreground, #1d1f23);
}

#boot[data-leaving] {
  animation: boot-leave 380ms cubic-bezier(0.5, 0, 0.75, 0) both;
}

.boot-mark {
  position: relative;
  width: 56px;
  aspect-ratio: 1368 / 1451;
}

#boot[data-leaving] .boot-mark {
  animation: boot-mark-leave 380ms cubic-bezier(0.5, 0, 0.75, 0) both;
}

.boot-mark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The C, revealed by a sweep that starts at its lower end and runs round to its top. */
.boot-c {
  fill: currentColor;
  mask-image: conic-gradient(
    from 118deg at 52% 53%,
    #000 var(--boot-sweep),
    transparent calc(var(--boot-sweep) + 1deg)
  );
  animation: boot-draw 680ms cubic-bezier(0.65, 0, 0.35, 1) 90ms both;
}

/* The square lands where the C opens, turning into place. */
.boot-square {
  fill: var(--pulse-accent, oklch(0.9 0.235 129));
  transform-origin: 82.6% 28.7%;
  animation:
    boot-land 560ms cubic-bezier(0.16, 1, 0.3, 1) 600ms both,
    boot-wait 2.4s cubic-bezier(0.76, 0, 0.24, 1) 1.4s infinite;
}

@keyframes boot-draw {
  from {
    --boot-sweep: 0deg;
  }
  to {
    --boot-sweep: 362deg;
  }
}

@keyframes boot-land {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-90deg);
  }
}

@keyframes boot-wait {
  50% {
    opacity: 0.55;
  }
}

@keyframes boot-leave {
  to {
    opacity: 0;
  }
}

@keyframes boot-mark-leave {
  to {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-c,
  .boot-square,
  #boot[data-leaving],
  #boot[data-leaving] .boot-mark {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}