/* JawalOS, coming soon: the phone's boot animation, drawn live.
   Mirrors customization/profiles/jawalos/branding/make-bootanimation.py:
     appear  0.3 s, once: the logo fades in (ease-out cubic)
     pulse   2.4 s, forever: the maroon of the OS mark breathes toward a soft rose
             ("screen" light, white untouched) while a maroon halo swells behind it. */

:root {
  --w: clamp(240px, 62vw, 620px);       /* the boot screen draws the logo at 62% of its width */
  --appear: 0.3s;
  --pulse: 2.4s;
  --rose: rgb(242 201 211);            /* PULSE_LIGHT */
  --rose-peak: 0.34;                    /* PULSE_STRENGTH */
  --halo: rgb(132 31 60);               /* HALO, darkened like the logo's maroon */
  --halo-rest: 0.10;
  --halo-peak: 0.45;
  --breath: cubic-bezier(0.37, 0, 0.63, 1);   /* 0.5 - 0.5 cos: sine in-out */
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; background: #000; }

body {
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

main {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 16px;
}

.stage {
  position: relative;
  width: var(--w);
  aspect-ratio: 7292 / 1528;
  opacity: 0;
  animation: appear var(--appear) cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.logo, .halo, .pulse { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo { display: block; }

/* the OS mark's own silhouette, as a mask */
.halo > div, .pulse {
  -webkit-mask: url(/mark-shape.svg) center / 100% 100% no-repeat;
          mask: url(/mark-shape.svg) center / 100% 100% no-repeat;
}

/* halo behind the mark: the silhouette in maroon, blurred (28 px at a 1080 px screen) */
.halo {
  filter: blur(calc(var(--w) * 0.0418));
  opacity: var(--halo-rest);
  animation: halo var(--pulse) var(--breath) var(--appear) infinite;
}
.halo > div { position: absolute; inset: 0; background: var(--halo); }

/* the pulse: rose light in screen blending, inside the mark only; white stays white */
.pulse {
  background: var(--rose);
  mix-blend-mode: screen;
  opacity: 0;
  animation: pulse var(--pulse) var(--breath) var(--appear) infinite;
}

.soon {
  margin-top: calc(var(--w) * 0.16);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding-left: 0.42em;                 /* balance the trailing letter-spacing */
  color: rgb(255 255 255 / 0.42);
  opacity: 0;
  animation: soon 1.2s ease-out 0.9s forwards;
}

@keyframes appear { to { opacity: 1; } }
@keyframes soon   { to { opacity: 1; } }
@keyframes halo   { 0%, 100% { opacity: var(--halo-rest); } 50% { opacity: var(--halo-peak); } }
@keyframes pulse  { 0%, 100% { opacity: 0; } 50% { opacity: var(--rose-peak); } }

@media (prefers-reduced-motion: reduce) {
  .stage, .soon { animation: none; opacity: 1; }
  .halo, .pulse { animation: none; }
}