/* ==========================================================================
   DENTAL ARC - SPLASH
   White screen: particles gather into the arc, the crisp symbol settles in
   with a sweep of light, the name rises underneath, then the screen lifts.
   ========================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: #fff; transition: opacity .55s ease .1s;
}
.splash.is-leaving { opacity: 0; pointer-events: none; }
.splash.is-leaving .splash-mark { transform: scale(1.04); opacity: 0; }
.splash-mark { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease; }
.splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash-mark { position: relative; display: grid; justify-items: center; gap: clamp(14px, 2.4vh, 22px); width: min(300px, 62vw); }
.splash-symbol { position: relative; width: 100%; aspect-ratio: 1511 / 680; }
.splash-symbol img { width: 100%; height: 100%; opacity: 0; filter: blur(6px); transform: scale(.96); transition: opacity .6s ease, filter .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.splash-symbol::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%) -100% 0 / 300% 100% no-repeat;
  -webkit-mask: url(../assets/images/dental-arc-symbol.png) center / 100% 100% no-repeat;
          mask: url(../assets/images/dental-arc-symbol.png) center / 100% 100% no-repeat;
  opacity: 0;
}
.splash-name { width: 58%; overflow: hidden; }
.splash-name img { width: 100%; transform: translateY(110%); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.splash-line { width: 0; height: 1px; background: #21B7B0; opacity: .5; transition: width .8s cubic-bezier(.65, 0, .35, 1); }

.splash.is-formed .splash-symbol img { opacity: 1; filter: none; transform: none; }
.splash.is-formed .splash-symbol::after { animation: splashSheen .9s ease .15s forwards; }
.splash.is-formed .splash-name img { transform: none; transition-delay: .1s; }
.splash.is-formed .splash-line { width: 46%; transition-delay: .2s; }
@keyframes splashSheen { 0% { opacity: 1; background-position: 150% 0; } 100% { opacity: 1; background-position: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .splash { transition: opacity .4s ease; }
  .splash-symbol img, .splash-name img { opacity: 1; filter: none; transform: none; transition: none; }
}