/* Boot splash for index.html. A same-origin file rather than an inline <style>: the portal CSP is
   style-src 'self'. src/auth/boot-splash.ts takes the splash down; keep its timings in step with this file.

   Choreography (shared with the mobile app's splash):
     0-800ms      photo rises in (opacity, scale .94 -> 1, 14px -> 0), then breathes 1 <-> 1.02 every 2.4s
     500-1500ms   one diagonal sheen across the photo
     800-1500ms   wordmark fades in and rises 10px
     1100-1700ms  tagline
     1200ms ->    indeterminate progress line
     exit 550ms   photo grows to 1.06 and fades, text fades, then the overlay fades (ends at 550ms) */

/* Space Grotesk 700 (the portal's heading face), cut down to the glyphs of "KokoaDirect" so it loads in one
   small request. SIL Open Font License: boot-wordmark-OFL.txt. */
@font-face {
  font-family: 'Kokoa Boot Wordmark';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(/boot-wordmark.woff2?v=2) format('woff2');
}

#boot-splash {
  /* Photo width: 42vw up to 260px, and small enough on short screens that the text still fits below it. */
  --w: max(150px, min(42vw, 260px, calc((80vh - 130px) * 1.4)));
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bean: #2b1b14;
  --pod: #c9871a;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #ffffff;
  color: var(--bean);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
#boot-splash p {
  margin: 0;
}
#boot-splash .boot-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Photo and text as one column, centred a little above the middle of the screen. */
#boot-splash .boot-stage {
  position: absolute;
  top: 47%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%);
}
#boot-splash .boot-photo {
  position: relative;
  width: var(--w);
  animation: boot-enter 800ms var(--ease-out) both;
}
/* The breathing loop sits on an inner layer so the exit on .boot-photo starts from wherever the breath is. */
#boot-splash .boot-breath {
  position: relative;
  animation: boot-breathe 2400ms ease-in-out 800ms infinite;
}
/* Warm cream glow behind the photo. It shares the breathing layer with the photo so the photo's white
   multiplies into it and no rectangle edge shows. */
#boot-splash .boot-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 165%;
  height: 210%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fbf5ee 0%, rgba(251, 245, 238, 0.85) 38%, rgba(251, 245, 238, 0) 100%);
}
/* Soft elliptical ground shadow under the bean pile. */
#boot-splash .boot-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -5%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 34, 22, 0.2), rgba(60, 34, 22, 0.07) 55%, rgba(60, 34, 22, 0));
}
#boot-splash .boot-photo img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* One diagonal pass of light, clipped to the photo. Overlay lifts the pods and leaves the white background white. */
#boot-splash .boot-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#boot-splash .boot-sheen::before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 34%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 40%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.32) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: overlay;
  transform: translateX(-180%) skewX(-18deg);
  animation: boot-sheen 1000ms var(--ease-in-out) 500ms both;
}

#boot-splash .boot-wordmark {
  margin-top: clamp(18px, 3.6vh, 32px);
  font: 700 clamp(28px, 7vw, 36px) / 1 'Kokoa Boot Wordmark', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.02em;
  color: var(--bean);
  animation: boot-rise-10 700ms var(--ease-out) 800ms both;
}
#boot-splash .boot-wordmark span {
  color: #a8701a;
}
#boot-splash .boot-tagline {
  margin-top: clamp(10px, 1.6vh, 14px);
  /* Trailing letter-spacing would pull the line off centre. */
  padding-left: 0.3em;
  font: 700 11px / 1.4 system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7f746a;
  animation: boot-rise-6 600ms var(--ease-out) 1100ms both;
}

/* Slim indeterminate progress line near the bottom edge. */
#boot-splash .boot-progress {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(28px, 8vh, 64px) + env(safe-area-inset-bottom, 0px));
  width: min(168px, 40vw);
  height: 2px;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 2px;
  background: #f0e9e0;
  animation: boot-fade-in 500ms ease-out 1200ms both;
}
#boot-splash .boot-progress::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201, 135, 26, 0), var(--pod) 45%, #6b3a2c);
  transform: translateX(-100%);
  animation: boot-glide 1600ms var(--ease-in-out) 1200ms infinite;
}

/* Exit, 550ms in all: the photo and text go first, then the overlay itself fades to reveal the app.
   boot-splash.ts removes the splash on the overlay's own animationend. */
#boot-splash.is-leaving {
  pointer-events: none;
  animation: boot-fade-out 300ms ease-in 250ms forwards;
}
#boot-splash.is-leaving .boot-photo {
  animation: boot-exit-photo 450ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#boot-splash.is-leaving .boot-wordmark,
#boot-splash.is-leaving .boot-tagline,
#boot-splash.is-leaving .boot-progress {
  animation: boot-fade-out 300ms ease-in forwards;
}

@keyframes boot-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
}
@keyframes boot-breathe {
  50% { transform: scale(1.02); }
}
@keyframes boot-sheen {
  from { transform: translateX(-180%) skewX(-18deg); }
  to { transform: translateX(400%) skewX(-18deg); }
}
@keyframes boot-rise-10 {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes boot-rise-6 {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes boot-fade-in {
  from { opacity: 0; }
}
@keyframes boot-glide {
  from { transform: translateX(-100%); }
  to { transform: translateX(265%); }
}
@keyframes boot-exit-photo {
  to { opacity: 0; transform: scale(1.06); }
}
@keyframes boot-fade-out {
  to { opacity: 0; }
}

/* Landscape phones: less space between the parts. */
@media (max-height: 480px) {
  #boot-splash .boot-stage { top: 46%; }
  #boot-splash .boot-wordmark { font-size: 26px; }
  #boot-splash .boot-progress { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* Reduced motion: everything in place from the first frame, a still progress mark, and a plain fade out. */
@media (prefers-reduced-motion: reduce) {
  #boot-splash .boot-photo,
  #boot-splash .boot-breath,
  #boot-splash .boot-sheen::before,
  #boot-splash .boot-wordmark,
  #boot-splash .boot-tagline,
  #boot-splash .boot-progress,
  #boot-splash.is-leaving .boot-photo,
  #boot-splash.is-leaving .boot-wordmark,
  #boot-splash.is-leaving .boot-tagline,
  #boot-splash.is-leaving .boot-progress {
    animation: none;
  }
  #boot-splash .boot-sheen {
    display: none;
  }
  #boot-splash .boot-progress::before {
    animation: none;
    transform: translateX(82%);
  }
  /* !important: the app stylesheet turns every animation off under reduced motion once it loads. */
  #boot-splash.is-leaving {
    animation: boot-fade-out 200ms linear forwards !important;
  }
}