/* ==========================================================================
   InsuranceOS splash screen — shared across every app in the suite.
   Palette is fixed by design (from the brand splash reference) and is also
   the app's live color system, not just the splash: --clay is the primary
   accent, --gold the secondary accent, --cream/--sand the two background
   tones, --soil the ink/text color. Do not substitute other colors here.
   ========================================================================== */
:root{
  --sf-cream:#F5F1E8;
  --sf-sand:#ECE6D8;
  --sf-soil:#2D2118;
  --sf-clay:#A87D5D;
  --sf-gold:#C9B07A;
  --sf-font:'Cal Sans','Sora',sans-serif;
}

#sf-splash-root{position:fixed;inset:0;z-index:9999;background:var(--sf-cream);
  font-family:var(--sf-font);-webkit-font-smoothing:antialiased;}
#sf-splash-root.sf-hidden{display:none;}

#sf-splash-root .sf-screen{position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--sf-cream);
  opacity:0;pointer-events:none;transition:opacity .5s ease;}
#sf-splash-root .sf-screen.sf-active{opacity:1;pointer-events:all;}

/* Screen 1 — dots */
.sf-dots-loader{display:flex;align-items:center;gap:12px;}
.sf-dl{width:12px;height:12px;border-radius:50%;background:var(--sf-soil);opacity:0;}
.sf-dl:nth-child(1){animation:sfDotIn .4s .1s forwards, sfDotWave 1.6s .5s ease-in-out infinite;}
.sf-dl:nth-child(2){animation:sfDotIn .4s .25s forwards, sfDotWave 1.6s .72s ease-in-out infinite;}
.sf-dl:nth-child(3){animation:sfDotIn .4s .4s forwards, sfDotWave 1.6s .94s ease-in-out infinite;}
@keyframes sfDotIn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:scale(1);}}
@keyframes sfDotWave{0%,100%{transform:translateY(0);opacity:.3;}50%{transform:translateY(-10px);opacity:1;}}

/* Screen 2 — ticker */
#sf-screen-ticker{overflow:hidden;}
.sf-ticker-scene{position:relative;width:100%;height:100%;overflow:hidden;}
.sf-ticker-scene::before,.sf-ticker-scene::after{content:'';position:absolute;left:0;right:0;height:35%;z-index:2;pointer-events:none;}
.sf-ticker-scene::before{top:0;background:linear-gradient(to bottom,var(--sf-cream) 0%,transparent 100%);}
.sf-ticker-scene::after{bottom:0;background:linear-gradient(to top,var(--sf-cream) 0%,transparent 100%);}
.sf-ticker-track{position:absolute;width:100%;will-change:transform;}
.sf-ticker-row{display:flex;align-items:center;gap:16px;padding:0 40px;height:72px;}
.sf-ticker-row-dots{display:flex;gap:6px;align-items:center;flex-shrink:0;opacity:0;transition:opacity .35s ease;}
.sf-ticker-row-dots .sf-d{width:8px;height:8px;border-radius:50%;background:var(--sf-clay);}
.sf-ticker-word{font-size:clamp(34px,8vw,56px);line-height:1;color:var(--sf-soil);opacity:.1;filter:blur(1px);
  transform:scale(.88);transform-origin:left center;white-space:nowrap;
  transition:opacity .38s cubic-bezier(.4,0,.2,1),filter .38s cubic-bezier(.4,0,.2,1),transform .38s cubic-bezier(.4,0,.2,1);}
.sf-ticker-row.sf-active .sf-ticker-word{opacity:1;filter:blur(0);transform:scale(1);}
.sf-ticker-row.sf-active .sf-ticker-row-dots{opacity:1;}
.sf-ticker-row.sf-near .sf-ticker-word{opacity:.18;filter:blur(0);transform:scale(.93);}
.sf-ticker-row.sf-active .sf-ticker-row-dots .sf-d:nth-child(1){animation:sfDW 1.5s ease-in-out infinite 0s;}
.sf-ticker-row.sf-active .sf-ticker-row-dots .sf-d:nth-child(2){animation:sfDW 1.5s ease-in-out infinite .2s;}
.sf-ticker-row.sf-active .sf-ticker-row-dots .sf-d:nth-child(3){animation:sfDW 1.5s ease-in-out infinite .4s;}
@keyframes sfDW{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(-5px);opacity:1;}}

/* Screen 3 — logo reveal (line-draw technique) */
#sf-screen-logo{gap:0;}
.sf-logo-stage{display:flex;flex-direction:column;align-items:center;gap:1.6rem;}
.sf-logo-svg-wrap{width:112px;height:112px;position:relative;}
#sf-umbrella-svg{width:112px;height:112px;overflow:visible;}
#sf-umbrella-path{fill:none;stroke:var(--sf-soil);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
#sf-umbrella-path.sf-filled{fill:var(--sf-soil);stroke:var(--sf-soil);transition:fill .6s ease;}
#sf-lead-dot{r:2.6;fill:var(--sf-clay);opacity:0;transition:opacity .2s;filter:drop-shadow(0 0 4px var(--sf-gold));}
#sf-lead-dot.sf-on{opacity:1;}

.sf-wordmark{text-align:center;opacity:0;transform:translateY(10px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}
.sf-wordmark.sf-visible{opacity:1;transform:translateY(0);}
.sf-wordmark-primary{font-weight:700;font-size:2.1rem;letter-spacing:-.02em;color:var(--sf-soil);line-height:1;}
.sf-wordmark-primary span{color:var(--sf-clay);}
.sf-wordmark-sub{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sf-gold);margin-top:.6rem;}

/* Progress bar */
#sf-splash-root .sf-progress-bar{position:fixed;bottom:env(safe-area-inset-bottom,24px);left:50%;
  transform:translateX(-50%);width:40px;height:3px;background:var(--sf-sand);border-radius:100px;overflow:hidden;}
#sf-splash-root .sf-progress-fill{height:100%;background:var(--sf-clay);border-radius:100px;width:0%;transition:width .05s linear;}

@media (prefers-reduced-motion: reduce){
  #sf-splash-root .sf-screen{transition:none;}
  .sf-wordmark{transition:none;}
}