/* ==========================================================================
   The living seal — first entry of a session on home (html.kf-intro, set in <head>).
   Night sky, the KF monogram drawn in one gold line, a light sweeping across the metal, the ring
   "BESPOKE ANNEXES" turning into place, then the seal flies into the header while the
   veil lifts off the night film, which has been rendering underneath all along.
   js/intro.js drives it (≤ 2.4 s; any scroll, tap or key skips). Without the script the CSS below
   shows the seal still and lifts the veil after 3 s, so nothing can stay covered.
   ========================================================================== */

.intro { display: none; }

html.kf-intro .intro,
.intro.is-replay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none; /* never traps a tap: taps skip it (intro.js) and reach the page */
  animation: intro-away 0.6s ease 3s forwards;
}
html.kf-intro .intro.is-live,
.intro.is-replay { animation: none; }
/* Round 6 §7 — the seal clicked: the same opening again (intro.js replay()), over any screen, KF Studio's
   full-screen sheet included (css/studio.css, z-index 2147483000). */
.intro.is-replay { z-index: 2147483001; }

.intro__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(20, 26, 38, 0.55) 0%, rgba(10, 10, 10, 0) 60%),
    #050506;
}

/* Stars: two layers of single-pixel lights, twinkling out of step. */
.intro__stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    32.4vw 15.1vh 0 0.5px rgba(244,241,234,0.35),
    9.4vw 58.3vh 0 0px rgba(244,241,234,0.5),
    43.4vw 7.0vh 0 0px rgba(227,206,146,0.35),
    82.7vw 12.4vh 0 0.5px rgba(244,241,234,0.5),
    58.6vw 5.0vh 0 0.5px rgba(244,241,234,0.5),
    85.8vw 29.0vh 0 0.5px rgba(244,241,234,0.5),
    30.8vw 81.6vh 0 0.5px rgba(244,241,234,0.5),
    57.1vw 18.8vh 0 0.5px rgba(244,241,234,0.35),
    6.0vw 20.6vh 0 0px rgba(185,199,216,0.9),
    58.6vw 45.3vh 0 0px rgba(244,241,234,0.7),
    69.9vw 24.4vh 0 0px rgba(227,206,146,0.7),
    72.9vw 28.8vh 0 0.5px rgba(244,241,234,0.35),
    41.8vw 75.7vh 0 0px rgba(227,206,146,0.5),
    3.9vw 66.8vh 0 0.5px rgba(185,199,216,0.7),
    35.0vw 49.7vh 0 0px rgba(244,241,234,0.9),
    94.5vw 47.4vh 0 0.5px rgba(244,241,234,0.35),
    70.1vw 64.7vh 0 0.5px rgba(185,199,216,0.9),
    38.6vw 66.9vh 0 0px rgba(227,206,146,0.35),
    16.8vw 11.7vh 0 0px rgba(244,241,234,0.35),
    12.9vw 24.8vh 0 0px rgba(227,206,146,0.9),
    16.6vw 40.2vh 0 0px rgba(244,241,234,0.7),
    86.4vw 27.8vh 0 0.5px rgba(185,199,216,0.9),
    88.4vw 95.8vh 0 0px rgba(244,241,234,0.5),
    15.1vw 65.9vh 0 0.5px rgba(227,206,146,0.35),
    18.2vw 28.2vh 0 0.5px rgba(227,206,146,0.5),
    36.9vw 56.6vh 0 0px rgba(244,241,234,0.5),
    90.0vw 78.0vh 0 0px rgba(227,206,146,0.9),
    39.4vw 48.2vh 0 0px rgba(244,241,234,0.9),
    6.7vw 20.9vh 0 0px rgba(244,241,234,0.5),
    60.1vw 10.2vh 0 0px rgba(244,241,234,0.5),
    61.4vw 7.0vh 0 0px rgba(227,206,146,0.5),
    63.4vw 95.5vh 0 0px rgba(227,206,146,0.7),
    11.5vw 48.8vh 0 0px rgba(227,206,146,0.9),
    31.2vw 14.4vh 0 0px rgba(185,199,216,0.7),
    82.9vw 16.1vh 0 0.5px rgba(244,241,234,0.35),
    36.2vw 69.0vh 0 0.5px rgba(185,199,216,0.35),
    86.3vw 69.6vh 0 0px rgba(185,199,216,0.7),
    35.6vw 22.3vh 0 0.5px rgba(244,241,234,0.7),
    81.2vw 98.5vh 0 0px rgba(244,241,234,0.5),
    74.0vw 22.7vh 0 0.5px rgba(185,199,216,0.9),
    2.9vw 2.8vh 0 0px rgba(227,206,146,0.7),
    19.4vw 60.5vh 0 0.5px rgba(227,206,146,0.7),
    98.8vw 95.5vh 0 0px rgba(244,241,234,0.7),
    10.2vw 47.0vh 0 0px rgba(244,241,234,0.7),
    62.4vw 90.0vh 0 0.5px rgba(227,206,146,0.35),
    34.4vw 64.3vh 0 0.5px rgba(227,206,146,0.35);
  animation: intro-twinkle 2.2s ease-in-out infinite alternate;
}
.intro__stars--2 {
  width: 2px;
  height: 2px;
  box-shadow:
    75.0vw 47.8vh 0 0.5px rgba(227,206,146,0.5),
    33.3vw 80.1vh 0 0px rgba(227,206,146,0.9),
    74.3vw 8.5vh 0 0px rgba(244,241,234,0.5),
    2.8vw 59.1vh 0 0.5px rgba(244,241,234,0.9),
    82.7vw 98.0vh 0 0.5px rgba(244,241,234,0.7),
    54.8vw 2.1vh 0 0px rgba(244,241,234,0.35),
    98.7vw 19.5vh 0 0px rgba(244,241,234,0.5),
    21.3vw 50.1vh 0 0.5px rgba(185,199,216,0.7),
    41.9vw 13.1vh 0 0.5px rgba(227,206,146,0.7),
    58.3vw 90.4vh 0 0.5px rgba(244,241,234,0.9),
    15.2vw 51.1vh 0 0.5px rgba(244,241,234,0.9),
    0.4vw 79.9vh 0 0px rgba(244,241,234,0.5),
    61.9vw 12.0vh 0 0.5px rgba(185,199,216,0.35),
    51.8vw 55.5vh 0 0px rgba(244,241,234,0.35),
    19.1vw 4.2vh 0 0.5px rgba(227,206,146,0.35),
    2.8vw 89.4vh 0 0px rgba(227,206,146,0.35),
    61.3vw 50.6vh 0 0px rgba(185,199,216,0.5),
    50.8vw 80.7vh 0 0.5px rgba(185,199,216,0.5),
    89.3vw 20.3vh 0 0px rgba(244,241,234,0.9),
    12.2vw 44.2vh 0 0px rgba(244,241,234,0.35),
    7.3vw 66.9vh 0 0.5px rgba(244,241,234,0.35),
    64.3vw 36.6vh 0 0px rgba(244,241,234,0.7),
    22.0vw 95.3vh 0 0px rgba(227,206,146,0.9),
    99.0vw 83.2vh 0 0.5px rgba(227,206,146,0.5),
    40.4vw 42.1vh 0 0px rgba(185,199,216,0.7),
    72.2vw 1.9vh 0 0.5px rgba(227,206,146,0.9),
    1.8vw 33.1vh 0 0px rgba(244,241,234,0.7),
    98.5vw 78.8vh 0 0px rgba(244,241,234,0.35),
    27.2vw 90.6vh 0 0px rgba(185,199,216,0.5),
    82.0vw 85.0vh 0 0px rgba(227,206,146,0.7),
    53.7vw 51.5vh 0 0px rgba(185,199,216,0.9),
    27.9vw 80.0vh 0 0px rgba(227,206,146,0.5),
    26.9vw 1.7vh 0 0px rgba(185,199,216,0.35),
    60.8vw 22.2vh 0 0px rgba(244,241,234,0.7);
  animation-duration: 1.7s;
  animation-delay: -0.8s;
}
/* A faint warm light behind the seal, like a window lit in the dark. */
.intro__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vmin, 620px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(197, 162, 83, 0.16), rgba(197, 162, 83, 0.05) 55%, rgba(197, 162, 83, 0) 100%);
  opacity: 0;
  animation: intro-glow 1.2s ease 0.5s forwards;
}

.intro__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vmin, 320px);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.intro__seal {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: intro-seal-still 0.8s ease 1.1s forwards; /* no script: the seal simply appears */
}
.intro.is-live .intro__seal { opacity: 1; animation: none; }
.intro__seal .kf-glass { filter: drop-shadow(0 0 7px rgba(243, 227, 176, 0.6)); }
.intro__seal .kf-lamps { filter: drop-shadow(0 0 4px rgba(243, 227, 176, 0.9)); }
/* SVG parts that rotate / scale around the seal's centre, or rise in place. */
.intro__seal .kf-arc,
.intro__seal .kf-rings {
  transform-box: view-box;
  transform-origin: 200px 200px;
}
.intro__seal .kf-name { transform-box: fill-box; transform-origin: 50% 50%; }

/* The header logo waits for the seal to land in it (intro.js shows it); without the script, just after
   the veil has lifted. */
html.kf-intro .brand__seal { visibility: hidden; animation: kf-show 0s linear 3.2s forwards; }

/* A soft landing after the seal (judge r3): the hero's words and the preview notice ease in once the veil
   has lifted, instead of being there the instant it goes. intro.js swaps html.kf-intro for html.kf-reveal.
   Without the script, a CSS timer shows them anyway. */
@media (prefers-reduced-motion: no-preference) {
  html.kf-intro .banner { opacity: 0; animation: kf-copy-show 0s linear 3.4s forwards; }
  /* The hero's words sit under the opaque veil at a hair above zero (not 0): they are painted on the first
     frame — the page's largest text, its LCP — and still invisible until the veil lifts (speed pass 26.09;
     at opacity 0 the browser counted them only 3.4 s later). */
  html.kf-intro #film-1 .film__copy > * { opacity: 0.001; animation: kf-copy-show 0s linear 3.4s forwards; }
  html.kf-intro #film-1 .film__copy > * { transform: translate(0, 14px); }
  html.kf-reveal .banner { transition: opacity 1s ease 1.1s; }
  html.kf-reveal #film-1 .film__copy > * { transition: opacity 0.9s var(--ease-out), transform 1.2s var(--ease-out); }
  html.kf-reveal #film-1 .film__copy > :nth-child(2) { transition-delay: 0.12s; }
  html.kf-reveal #film-1 .film__copy > :nth-child(3) { transition-delay: 0.3s; }
  html.kf-reveal #film-1 .film__copy > :nth-child(4) { transition-delay: 0.42s; }
}
@keyframes kf-copy-show { to { opacity: 1; transform: none; } }

@keyframes intro-twinkle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes intro-glow { to { opacity: 1; } }
@keyframes intro-seal-still { to { opacity: 1; } }
@keyframes intro-away { to { opacity: 0; visibility: hidden; } }

/* Belt and braces: reduced motion never gets the intro (the <head> script checks too). */
@media (prefers-reduced-motion: reduce) {
  html.kf-intro .intro,
  .intro.is-replay { display: none; }
}
@media print {
  html.kf-intro .intro,
  .intro.is-replay { display: none; }
}