/* Kardash intro — site/intro/intro.css
   Contract: pages add <link rel="stylesheet" href="intro/intro.css"> in <head>
   and <script src="intro/intro.js" defer></script> before </body>.
   The html::before block is the POSTER: the oak (crown + trunk) is painted from the
   very first frame, before any script runs. intro.js takes over with identical
   geometry (same --kintro-w, same centring), so the handover is invisible.
   Safety: if intro.js never runs, the poster hides itself after 6 s. */

:root {
  --kintro-w: min(68vw, 46vh, 400px);          /* logo box width; height = w * 959/924 */
  --kintro-z: 2147483000;
  --kintro-bg: #fff;
}

html:not(.intro-off)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--kintro-z);
  background-color: var(--kintro-bg);
  background-image: url("img/crown.webp"), url("img/trunk.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: var(--kintro-w) auto, var(--kintro-w) auto;
  pointer-events: none;
  animation: kintro-poster-fallback 0s linear 6s forwards;
}
html.intro-off::before { content: none; display: none; animation: none; }

@keyframes kintro-poster-fallback { to { visibility: hidden; opacity: 0; } }

/* ---- overlay injected by intro.js ---- */
.kintro {
  position: fixed;
  inset: 0;
  z-index: calc(var(--kintro-z) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;              /* turns white in the same frame the poster hides */
  touch-action: none;
  overscroll-behavior: contain;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kintro.is-ready { background: var(--kintro-bg); }
.kintro.is-leaving { pointer-events: none; }

.kintro__logo {
  position: relative;
  width: var(--kintro-w);
  aspect-ratio: 924 / 959;
  will-change: transform, opacity;
}
.kintro__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  visibility: hidden;                   /* shown together, after decode, with the poster handover */
  pointer-events: none;
  will-change: transform, opacity;
}
.kintro.is-ready .kintro__layer { visibility: visible; }
.kintro__layer--crown { transform-origin: 60.6% 44.6%; }   /* where the trunk meets the crown */
.kintro__layer--wordmark,
.kintro__layer--tagline { opacity: 0; }                     /* revealed by the timeline */
.kintro.is-static .kintro__layer--wordmark,
.kintro.is-static .kintro__layer--tagline { opacity: 1; }

.kintro__skip {
  position: absolute;
  right: 28px;
  bottom: 24px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: #6b6b6b;
  font: 500 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s ease, color .2s ease;
  cursor: pointer;
}
.kintro__skip:hover,
.kintro__skip:focus-visible { color: #111; outline: none; }
.kintro__skip:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.kintro.is-ready .kintro__skip { opacity: 1; transition-delay: .5s; }
.kintro.is-leaving .kintro__skip { opacity: 0; transition-delay: 0s; }

@media (max-width: 640px) {
  .kintro__skip { right: 50%; transform: translateX(50%); bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.intro-off)::before { animation-duration: 0s; }
  .kintro__skip { transition: none; }
}