/* feature:splash — animated logo splash on the first page load of a visit (once per browser tab session).
   Pairs with splash.js (loaded in <head>). Colours fall back to Vrika Spiti ink/ochre if --ink/--ochre are not defined. See README.md */

/* While the splash is pending: paint the brand colour immediately (no white flash) and keep the page hidden. */
html.splash-on{background:var(--ink,#0F2A3A)}
html.splash-on body{visibility:hidden;overflow:hidden}
/* Hold the home hero's entrance animation until the splash lifts, so visitors actually see it. */
html.splash-on .hero-in > *,html.splash-on .hero-photo img{animation-play-state:paused}

.splash{visibility:visible;position:fixed;inset:0;z-index:100000;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 38%,#1C4A66 0%,#0F2A3A 55%,#0A1F2B 100%);
  clip-path:inset(0 0 0 0);transition:clip-path .75s cubic-bezier(.76,0,.24,1)}
.splash.out{clip-path:inset(0 0 100% 0)}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;text-align:center;transition:transform .75s cubic-bezier(.76,0,.24,1),opacity .5s}
.splash.out .splash-inner{transform:translateY(-40px);opacity:0}

/* Mark: rounded square + house, drawn with strokes then filled */
.splash-mark{width:92px;height:92px}
.splash-mark .frame,.splash-mark .house{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.splash-mark .frame{stroke-dasharray:100;stroke-dashoffset:100;animation:splashDraw .8s cubic-bezier(.65,0,.35,1) .1s forwards}
.splash-mark .house{stroke-dasharray:100;stroke-dashoffset:100;animation:splashDraw .7s cubic-bezier(.65,0,.35,1) .55s forwards}
.splash-mark .fill{fill:#fff;opacity:0;transform-origin:50% 50%;transform:scale(.92);animation:splashFill .45s ease-out 1.05s forwards}
.splash-mark .door{fill:#0F2A3A;opacity:0;animation:splashFade .3s ease-out 1.2s forwards}

/* Wordmark: letters rise in, flare axis grows as they settle */
.splash-word{display:flex;font-family:'Commissioner',system-ui,sans-serif;font-weight:800;font-size:clamp(46px,9vw,76px);letter-spacing:-.035em;line-height:1;overflow:hidden;padding:.08em .04em .12em}
.splash-word span{display:inline-block;transform:translateY(110%);opacity:0;font-variation-settings:"FLAR" 0,"VOLM" 0;
  animation:splashLetter .7s cubic-bezier(.2,.7,.2,1) forwards,splashFlare .9s ease-out forwards;animation-delay:calc(.75s + var(--i) * 55ms),calc(1s + var(--i) * 55ms)}
.splash-line{width:0;height:2px;border-radius:2px;background:var(--ochre,#C6973F);margin-top:-8px;animation:splashLine .7s cubic-bezier(.65,0,.35,1) 1.25s forwards}
.splash-tag{margin:0;font-size:clamp(15px,2.2vw,18px);color:#B9CAD4;opacity:0;transform:translateY(8px);animation:splashTag .6s ease-out 1.45s forwards;max-width:44ch;text-wrap:balance}
.splash-skip{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:13px;color:#7F97A5;opacity:0;animation:splashFade .4s ease-out 1.6s forwards}

@keyframes splashDraw{to{stroke-dashoffset:0}}
@keyframes splashFill{to{opacity:1;transform:scale(1)}}
@keyframes splashFade{to{opacity:1}}
@keyframes splashLetter{to{transform:none;opacity:1}}
@keyframes splashFlare{to{font-variation-settings:"FLAR" 100,"VOLM" 60}}
@keyframes splashLine{to{width:min(220px,48vw)}}
@keyframes splashTag{to{opacity:1;transform:none}}

/* Reduced motion: no drawing or sliding, just a calm static logo that fades out */
@media (prefers-reduced-motion:reduce){
  .splash,.splash-inner{transition:opacity .4s!important;clip-path:none!important}
  .splash.out{opacity:0}
  .splash-mark .frame,.splash-mark .house{stroke-dashoffset:0!important}
  .splash-mark .fill,.splash-mark .door,.splash-word span,.splash-tag,.splash-skip{opacity:1!important;transform:none!important;font-variation-settings:"FLAR" 100,"VOLM" 60!important}
  .splash-line{width:min(220px,48vw)!important}
}