/* Home page intro (js/intro.js), client 2026-10-04: the La Casa Branka
   atrium, about 2 seconds, then the home page. "La Casa Branka / We see what
   is possible" is part of the picture. Two versions of it, chosen by the
   screen's shape (js/intro.js): wide screens assets/img/intro-wide.webp
   (1676x939), upright screens (phones) assets/img/intro-tall.webp (941x1672).
   Both encoded in Chrome at quality 0.97 so the colours match the PNGs
   exactly (ffmpeg's encoder turned them greyer).
   Opacity and transform only (the GPU animates them, smooth on any machine):
     0-0.6 s   the picture fades in while it settles from 1.05 to 1 (1.2 s, a
               camera coming to rest)
     1.2 s     it glides forward into the opening (to 1.1, 1.3 s) as the whole
               intro dissolves into the page; the room starts playing now
   <html> classes, set by the inline script in <head>:
     intro-run  the overlay is shown
     intro-on   the page chrome and package text wait (removed at the reveal) */

.pf-intro { display: none; }
html.intro-run .pf-intro {
  display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden;
  background: var(--sc-canvas);
  cursor: default;
}
html.intro-run { overflow: hidden; }

.pf-intro__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform-origin: 47% 55%;                  /* the opening at the end of the hall */
  opacity: 0; will-change: transform, opacity;
}
@media (orientation: portrait) {
  .pf-intro__img { transform-origin: 54% 52%; }  /* the same opening in the tall picture */
}
.pf-intro.is-in .pf-intro__img {
  animation: pfIntroFade 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both,
             pfIntroSettle 1.2s cubic-bezier(0.2, 0.6, 0.3, 1) both;
}
.pf-intro.is-out { animation: pfIntroOut 1.3s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
.pf-intro.is-out .pf-intro__img {
  opacity: 1;
  animation: pfIntroPush 1.3s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
@keyframes pfIntroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pfIntroSettle { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes pfIntroPush { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes pfIntroOut { 0% { opacity: 1; } 15% { opacity: 1; } 100% { opacity: 0; } }

/* For screen readers only: the text is in the image. */
.pf-intro__label {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- the page waits under the intro, then comes in -------------------------- */
.site-bar, .pf-dock { transition: opacity 1s ease 0.15s; }
html.intro-on .site-bar, html.intro-on .pf-dock { opacity: 0; }
/* Package 01's text: held hidden, then its usual line-by-line entrance plays
   (the .is-current transition) when intro-on is removed. */
html.intro-on .pf-page__body > * { opacity: 0 !important; transform: translateX(-2.5rem) !important; transition: none !important; }