/* ==========================================================================
   assets/css/page-splash.css — Splash (Brutal Lite v3.1 strict, builder B3)
   Owner: the splash overlay on start.php only. Reference: lite5/splash-preview.html.
   First-visit-only (localStorage, see the inline script in start.php), ~1s, then
   fades out to reveal the real Welcome screen underneath. No tokens/colours/radii/
   shadows changed from the reference; prefers-reduced-motion drops every animation
   and shows the final state immediately.
   ========================================================================== */

.sm-splash{
  position:fixed; inset:0; z-index:5000; background:var(--yellow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .25s ease;
}
.sm-splash.is-hiding{ opacity:0; pointer-events:none; }

/* v197: new "sm" tilted-card logo, animated in three beats (~1.1s):
   1) front white card pops in with a springy overshoot,
   2) the yellow back card swings out from behind it to its 8° tilt,
   3) the "sm" letters rise into place, then the whole mark gives one small bounce.
   transform-box:view-box + origins in SVG units (512 viewBox) keep every pivot on the card centres. */
.sm-splash .mark{width:140px;height:140px;}
.sm-splash .mark svg{width:100%;height:100%;display:block;overflow:visible;
  animation:smSplashBounce .35s ease-out 1.05s both;transform-origin:50% 60%;}
.sm-splash .mark svg *{transform-box:view-box;}
.sm-splash .mark .front{transform-origin:240px 240px;opacity:0;
  animation:smSplashFrontIn .55s cubic-bezier(.3,1.6,.4,1) .1s forwards;}
.sm-splash .mark .back{transform-origin:268px 268px;transform:translate(-28px,-28px) rotate(0deg);opacity:0;
  animation:smSplashBackOut .5s cubic-bezier(.3,1.5,.45,1) .45s forwards;}
.sm-splash .mark .letters{transform-origin:240px 240px;opacity:0;
  animation:smSplashLettersIn .4s cubic-bezier(.2,1.3,.4,1) .7s forwards;}
@keyframes smSplashFrontIn{0%{opacity:0;transform:scale(.3) rotate(-10deg);}60%{opacity:1;transform:scale(1.1) rotate(3deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
@keyframes smSplashBackOut{0%{opacity:1;transform:translate(-28px,-28px) rotate(0deg);}100%{opacity:1;transform:translate(0,0) rotate(8deg);}}
@keyframes smSplashLettersIn{0%{opacity:0;transform:translateY(46px) scale(.8);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes smSplashBounce{0%{transform:scale(1);}45%{transform:scale(.94,1.04);}100%{transform:scale(1);}}

.sm-splash .word{margin-top:18px;font:800 30px/1 var(--font-display);color:var(--ink);letter-spacing:-.5px;
  opacity:0;transform:translateY(8px);animation:smSplashWordIn .5s ease .55s forwards;}
@keyframes smSplashWordIn{to{opacity:1;transform:translateY(0);}}

.sm-splash .tag{margin-top:14px;opacity:0;transform:translateY(10px) rotate(-2deg);animation:smSplashTagIn .45s cubic-bezier(.3,1.4,.4,1) .95s forwards;}
@keyframes smSplashTagIn{to{opacity:1;transform:translateY(0) rotate(-2deg);}}

.sm-splash .city{position:absolute;bottom:46px;left:0;right:0;text-align:center;font:800 11.5px/1 var(--font-ui);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(22,19,16,.55);
  opacity:0;animation:smSplashCityIn .5s ease 1.15s forwards;}
@keyframes smSplashCityIn{to{opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .sm-splash .mark svg,.sm-splash .mark .front,.sm-splash .mark .letters{animation:none!important;opacity:1!important;transform:none!important;}
  .sm-splash .mark .back{animation:none!important;opacity:1!important;transform:rotate(8deg)!important;}
  .sm-splash .word,.sm-splash .tag,.sm-splash .city{animation:none!important;opacity:1!important;transform:none!important;}
  .sm-splash{transition:none;}
}