/* ==========================================================================
   Splash — Aini & Associates (flex + 2-stage zoom with pause)
   ========================================================================== */

:root{
  --splash-bg: #ffffff;
  --splash-gold: #C9A227;
  --splash-shadow: rgba(0,0,0,.04);

  /* timings */
  --lockup-fade: .7s;
  --zoom-total: 2.2s;          /* total zoom duration */
  --fade-delay: 1.0s;          /* wait before container fades */
  --fade-dur: 1.1s;
  --ease: cubic-bezier(.22,.61,.36,1); /* smooth, not rubbery */
}

/* Cover */
#splash{
  position: fixed; inset: 0; z-index: 2147483600;
  pointer-events: none;

  background:
    radial-gradient(1200px 600px at 50% 0%, var(--splash-shadow), rgba(0,0,0,0) 60%),
    var(--splash-bg);

  /* Center with flex (beats grid quirks) */
  display: flex; align-items: center; justify-content: center;

  opacity: 1;
  transition: opacity var(--fade-dur) var(--ease) var(--fade-delay);
}

/* Lockup centered stack */
#splash .lockup{
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  margin: 0;
  opacity: 0;
  transition: opacity var(--lockup-fade) var(--ease);
}
#splash.run .lockup{ opacity: 1; }

/* Logo box */
#splash .mark{
  display: grid; place-items: center;
  padding: 22px 26px;
  border: 2px solid var(--splash-gold);
  border-radius: 6px;
  background: #fff;       /* force white (no dark mode surprises) */
  transform-origin: center center;
}
#splash .mark img{
  width: 220px; max-width: 36vw; height: auto; display: block;
}

/* Underline rule */
#splash .rule{
  height: 2px; width: 0;
  background: var(--splash-gold);
  transition: width .9s var(--ease) .3s;
}
#splash.run .rule{ width: 180px; }

/* Optional overlay behind logo (kept subtle and under) */
#splash .reveal{
  position: absolute; z-index: 1;
  left: 0; right: 0; top: 0; height: 100%;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);
  transition: opacity .6s var(--ease) .2s;
}
#splash.run .reveal{ opacity: 1; }

/* =========================
   Two-stage zoom with pause
   ========================= */
@keyframes splash-zoom {
  /* stage 1: grow to near full */
  0%   { transform: scale(1); }
  48%  { transform: scale(1.25); }  /* “fills the screen” moment */
  /* pause */
  62%  { transform: scale(1.25); }  /* hold briefly here */
  /* finish */
  100% { transform: scale(1.6); }   /* final expansion */
}

/* Run zoom only when .run is set */
#splash.run .mark{
  animation: splash-zoom var(--zoom-total) var(--ease) forwards;
}

/* Exit */
#splash.fadeout{
  opacity: 0;
  transition: opacity var(--fade-dur) var(--ease) var(--fade-delay);
}

/* Reduced motion: keep simple */
@media (prefers-reduced-motion: reduce){
  #splash{
    transition: opacity .3s ease 0s !important;
  }
  #splash .lockup{ transition: opacity .3s ease !important; }
  #splash .rule{ width: 0 !important; transition: none !important; }
  #splash .reveal{ display: none !important; }
  #splash .mark{ animation: none !important; }
}