/* First-visit splash: a short brand intro, once per browser session. It only shows when the tiny gate script in the
   head sets html.has-splash (never for search crawlers or shared deep links). Two forms share this markup:
   - minimal (this file only): the logo rises in, the name rises word by word, a red rule draws, the tagline fades in,
     then the panel wipes up with a red edge. About 3 seconds.
   - calm (html.kfs-calm, set by the gate for prefers-reduced-motion): no movement at all, only fades. About 2.2 s.
   A tap, click, key press or scroll shortens any of them. If scripts fail it still hides itself (visibility).
   The splash has its own name for the Suisse Light file with font-display:block, so its text never flashes in a
   fallback font (app.css declares the same file as 'Suisse Int\'l' with swap, and a later identical rule would win).
   Widths use container units (cqw), which fall back to the viewport when there is no container: the preview page
   plays this exact file inside a framed stage. Heights also shrink with the viewport height (vh), for landscape
   phones. */
@font-face{font-family:'KF Splash Suisse';src:url('/fonts/SuisseIntl-Light.woff2') format('woff2'),url('/fonts/SuisseIntl-Light.ttf') format('truetype');font-weight:300;font-display:block;}
#kfSplash{display:none;}
/* dvh follows the phone's browser bars as they show and hide; vh is the fallback for older browsers. */
html.has-splash #kfSplash{position:fixed;inset:0;height:100vh;height:100dvh;z-index:100000;display:grid;place-items:center;background:#f5f5f3;border-bottom:4px solid #a6192e;pointer-events:auto;font-family:'KF Splash Suisse',"Suisse Int'l","Helvetica Neue",Helvetica,Arial,sans-serif;animation:kfsOut 700ms cubic-bezier(0.65,0,0.35,1) 2300ms forwards;}
html.has-splash.kfs-skip #kfSplash{animation:kfsOut 320ms cubic-bezier(0.65,0,0.35,1) 0ms forwards;}
#kfSplash .kfs-inner{position:relative;z-index:1;display:grid;justify-items:center;padding:env(safe-area-inset-top,0px) max(24px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(24px,env(safe-area-inset-left,0px));text-align:center;}
#kfSplash .kfs-logo{display:block;height:clamp(24px,5.5vh,36px);width:auto;margin-bottom:clamp(12px,2.6vh,22px);opacity:0;transform:translateY(10px);animation:kfsUp 700ms cubic-bezier(0.2,0,0,1) 100ms forwards;}
/* One line down to 280px wide (28px type); it wraps rather than clips if narrower. Height caps it on landscape phones. */
#kfSplash .kfs-title{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 0.26em;font-size:clamp(28px,min(9.5vw,9vh),72px);font-size:clamp(28px,min(9.5cqw,9vh),72px);font-weight:300;line-height:1.08;letter-spacing:-0.025em;color:#1a1a1a;}
#kfSplash .kfs-title .w{display:inline-block;overflow:hidden;padding-bottom:0.1em;}
#kfSplash .kfs-title .w>span{display:inline-block;transform:translateY(105%);animation:kfsWord 800ms cubic-bezier(0.2,0,0,1) forwards;}
#kfSplash .kfs-title .w:nth-child(1)>span{animation-delay:350ms;}
#kfSplash .kfs-title .w:nth-child(2)>span{animation-delay:470ms;}
#kfSplash .kfs-title .w:nth-child(3)>span{animation-delay:590ms;font-weight:700;color:#a6192e;}
#kfSplash .kfs-rule{width:min(320px,52vw);width:min(320px,52cqw);height:2px;margin:clamp(10px,2.2vh,18px) 0 clamp(10px,2vh,16px);background:#a6192e;transform:scaleX(0);transform-origin:left;animation:kfsRule 800ms cubic-bezier(0.65,0,0.35,1) 800ms forwards;}
#kfSplash .kfs-tag{margin:0;font-size:16px;font-weight:300;letter-spacing:0;color:#5e5d57;white-space:nowrap;opacity:0;transform:translateY(6px);animation:kfsUp 600ms cubic-bezier(0.2,0,0,1) 1200ms forwards;}
@media (max-width:560px){#kfSplash .kfs-logo{height:clamp(24px,5.5vh,32px);margin-bottom:clamp(12px,2.4vh,20px);}}
/* On a slow connection the gate holds the sequence (html.kfs-wait) until the logo has loaded, so it does not fade in empty. */
html.kfs-wait #kfSplash,html.kfs-wait #kfSplash *{animation-play-state:paused;}
@keyframes kfsUp{to{opacity:1;transform:none;}}
@keyframes kfsWord{to{transform:none;}}
@keyframes kfsRule{to{transform:scaleX(1);}}
@keyframes kfsOut{to{transform:translateY(-101%);visibility:hidden;}}
/* Calm: for prefers-reduced-motion (the gate sets html.kfs-calm from that media query, and the preview page can set
   it too). Nothing moves: each part fades in where it stands, then the panel fades out (kfsOutCalm; app.js removes
   the overlay when kfsOut or kfsOutCalm ends). */
html.kfs-calm #kfSplash{animation:kfsOutCalm 500ms linear 1700ms forwards;}
html.kfs-calm.kfs-skip #kfSplash{animation:kfsOutCalm 200ms linear 0ms forwards;}
html.kfs-calm #kfSplash .kfs-logo,html.kfs-calm #kfSplash .kfs-title,html.kfs-calm #kfSplash .kfs-rule,html.kfs-calm #kfSplash .kfs-tag{opacity:0;transform:none;animation:kfsFade 500ms linear forwards;}
html.kfs-calm #kfSplash .kfs-title .w>span{transform:none;animation:none;}
html.kfs-calm #kfSplash .kfs-title{animation-delay:200ms;}
html.kfs-calm #kfSplash .kfs-rule{animation-delay:400ms;}
html.kfs-calm #kfSplash .kfs-tag{animation-delay:600ms;}
@keyframes kfsFade{to{opacity:1;}}
@keyframes kfsOutCalm{to{opacity:0;visibility:hidden;}}