/* ===========================================================
   KALIBRATE BOOT: "Kalibrate opens by calibrating."
   Static port of CalibrationIntro (app/studio/kalibrate/KalibrateLanding.tsx
   + kalibrate.css). The mark, the wordmark settling, a ruler sweep drawing
   itself left to right, and the status line. The instrument warming up.

   Include in <head>:  <link rel="stylesheet" href="/boot/kalibrate-boot.css">
   The overlay is injected by /boot/kalibrate-boot.js, the first element in
   <body>, so it is on screen at the first paint.
   =========================================================== */
.kal-intro {
  --kalb-ink: #0b0e12;
  --kalb-paper: #f3f0ea;
  --kalb-muted: #8b95a3;
  --kalb-amber: #f4b45a;

  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #141920 0%, var(--kalb-ink) 68%);
  font-family: Sora, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* hard cap: fades on the compositor at 3.9 s even if a 3D compile is
     holding the main thread and the script cannot run */
  animation: kalb-cap .6s cubic-bezier(.4,0,.2,1) 3.9s forwards;
}
@keyframes kalb-cap { to { opacity: 0 } }
.kal-intro.is-out { animation: kalb-out .6s cubic-bezier(.4,0,.2,1) both; pointer-events: none; }
@keyframes kalb-out { to { opacity: 0; visibility: hidden } }
.kal-intro *, .kal-intro *::before, .kal-intro *::after { box-sizing: border-box; }

/* repeat visit or reduced motion: the script never injects it; belt and braces */
html.kal-intro-off .kal-intro { display: none !important; }
@media (prefers-reduced-motion: reduce) { .kal-intro { display: none !important; } }

.kal-intro-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px;
  /* the original faded the whole overlay in over .3s; the backdrop now has to be
     opaque at first paint, so the fade-in moves onto the content instead */
  animation: kalb-in .3s ease both;
}
@keyframes kalb-in { from { opacity: 0 } to { opacity: 1 } }

.kal-intro-mark {
  display: block;
  width: 78px; height: 78px; border-radius: 17px; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 16px 54px rgba(244,180,90,.3);
  animation: kalb-mark 1.5s cubic-bezier(.2,.8,.26,1) both;
}
@keyframes kalb-mark {
  from { opacity: 0; transform: scale(.86); filter: blur(9px) }
  to   { opacity: 1; transform: none;       filter: none }
}
.kal-intro-word {
  margin-top: 20px; font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 800; line-height: 1.15;
  letter-spacing: .34em; text-indent: .34em; color: var(--kalb-paper);
  font-family: 'Archivo Black', Sora, system-ui, sans-serif;
  white-space: nowrap;
  animation: kalb-word 1.2s ease .28s both;
}
@keyframes kalb-word { from { opacity: 0; letter-spacing: .62em } to { opacity: 1 } }

/* The measuring sweep: a rule that draws itself left to right. */
.kal-intro-scale {
  position: relative; width: min(300px, 62vw); height: 13px; margin-top: 22px; overflow: hidden;
}
.kal-intro-scale span {
  position: absolute; inset: 0; transform-origin: left;
  background-image:
    repeating-linear-gradient(90deg, var(--kalb-amber) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--kalb-amber) 0 1px, transparent 1px 40px);
  background-size: 100% 5px, 100% 11px;
  background-position: left bottom; background-repeat: repeat-x;
  animation: kalb-sweep 1.5s cubic-bezier(.3,.75,.25,1) .45s both;
}
@keyframes kalb-sweep { from { transform: scaleX(0); opacity: .25 } to { transform: scaleX(1); opacity: .75 } }

.kal-intro-status {
  margin-top: 16px; font-size: .8125rem; line-height: 1.4; letter-spacing: .17em; text-indent: .17em;
  text-transform: uppercase;
  color: var(--kalb-muted); animation: kalb-word 1s ease .75s both;
}
/* if the page is still compiling its 3D after the sweep, the status breathes
   instead of sitting dead */
.kal-intro.is-waiting .kal-intro-status { animation: kalb-breathe 1.4s ease-in-out infinite; }
@keyframes kalb-breathe { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

.kal-intro-skip {
  position: absolute;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--kalb-muted); font: inherit; font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 12px 14px; min-height: 44px;
}
.kal-intro-skip:focus-visible, .kal-intro-skip:active { outline: none; color: var(--kalb-paper); }