/* bytedar intro: full-screen, scroll-locked. Frames -> explosion -> "Welcome to bytedar" in many languages -> curtain lifts.
   It sits above the header (logo + More), so neither shows until the curtain lifts. No blur filters anywhere. */
#bfIntro{position:fixed;inset:0;z-index:9999;display:none;overflow:hidden;background:#202940;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
html.bf-intro-on #bfIntro{display:block}
html.bf-intro-skip #bfIntro,html.bf-lock #bfIntro{display:none}

/* lock the page behind the intro */
html.bf-intro-on,html.bf-intro-on body{overflow:hidden;overscroll-behavior:none}
/* hold the page's own entrance animations until the curtain lifts, so they play on screen instead of behind the intro */
html.bf-intro-on body>*:not(#bfIntro),html.bf-intro-on body>*:not(#bfIntro) *{animation-play-state:paused!important}

#bfIntro .bfi-cv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .22s linear}
#bfIntro .bfi-panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;will-change:transform}
#bfIntro.is-greet .bfi-panel{background:#202940}
#bfIntro.is-greet .bfi-cv{visibility:hidden}
#bfIntro.is-reveal{background:transparent;pointer-events:none}

/* greeting: dot + word, hard cuts (no fades, no blur), like the reference */
#bfIntro .bfi-greet{margin:0;padding:0 5vw;display:flex;align-items:center;justify-content:center;gap:.7em;max-width:100%;color:#efe2d9;
  position:relative;z-index:2;font:500 clamp(24px,3.6vw,56px)/1.25 var(--font-display,'Space Grotesk',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif);
  letter-spacing:-.01em;text-align:center;transition:opacity .28s linear}
#bfIntro .bfi-greet[hidden]{display:none}
#bfIntro .bfi-dot{flex:none;width:.2em;height:.2em;border-radius:50%;background:currentColor}
#bfIntro .bfi-word{display:block;min-width:0;overflow-wrap:anywhere}
#bfIntro.is-reveal .bfi-greet{opacity:0}

#bfIntro .bfi-skip{position:absolute;right:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,32px);bottom:max(clamp(16px,3vw,32px),env(safe-area-inset-bottom));z-index:2;
  background:rgba(32,41,64,.35);border:1px solid rgba(239,226,217,.28);color:#efe2d9;font:500 12px/1 var(--font-sans,'Inter',sans-serif);letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;border-radius:999px;cursor:pointer;opacity:0;animation:bfiSkipIn .5s .7s linear forwards;transition:border-color .2s}
#bfIntro .bfi-skip:hover,#bfIntro .bfi-skip:focus-visible{border-color:rgba(239,226,217,.7);outline:none}
#bfIntro.is-reveal .bfi-skip{display:none}
@keyframes bfiSkipIn{to{opacity:.75}}

/* greeting photo flashes: hard cuts, mostly high-contrast B&W, some red duotone, a few solid colour cards */
#bfIntro .bfi-flash{position:absolute;inset:0;overflow:hidden;background:#202940}
#bfIntro .bfi-flash[hidden]{display:none}
#bfIntro .bfi-flash img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;filter:grayscale(1) contrast(1.4) brightness(.7)}
#bfIntro .bfi-flash img.on{display:block}
#bfIntro .bfi-tint{position:absolute;inset:0;z-index:1;background:#d98f7b;mix-blend-mode:multiply;opacity:0}
#bfIntro .bfi-flash.is-red img{filter:grayscale(1) contrast(1.55) brightness(1.05)}
#bfIntro .bfi-flash.is-red .bfi-tint{opacity:1}
#bfIntro .bfi-flash.is-solid-red{background:#d98f7b}
#bfIntro .bfi-flash.is-solid-amber{background:#FFB000}
#bfIntro .bfi-flash.is-solid-red img,#bfIntro .bfi-flash.is-solid-amber img{display:none}
#bfIntro .bfi-flash.is-solid-amber+.bfi-greet{color:#202940}