/* EMBER splash intro — a short, game-style brand reveal shown when the course
   opens (the flame ignites, the name + tagline rise, embers drift up, then it
   dissolves into the course). White-label safe: name/tagline/logo come from
   /api/brand. Skippable; respects prefers-reduced-motion. */
#ember-splash {
  position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #1c130a 0%, #0b0d13 58%, #050609 100%);
  overflow: hidden; opacity: 1; transition: opacity .6s ease, transform .7s ease;
  font-family: Inter, system-ui, sans-serif;
}
#ember-splash::after { /* soft vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,.7);
}
#ember-splash.out { opacity: 0; transform: scale(1.08); pointer-events: none; }

#ember-splash .es-inner { position: relative; text-align: center; z-index: 2; padding: 0 24px; }
#ember-splash .es-flame {
  width: 132px; height: 132px; display: block; margin: 0 auto;
  filter: drop-shadow(0 0 34px rgba(255,122,24,.6));
  animation: es-ignite .75s cubic-bezier(.18,.85,.25,1) both, es-flick 2.4s ease-in-out .8s infinite;
}
#ember-splash .es-name {
  margin: 20px 0 8px; font-weight: 800; font-size: clamp(34px, 7vw, 52px); line-height: 1;
  letter-spacing: .2em; color: #fff; text-shadow: 0 0 26px rgba(255,122,24,.4);
  opacity: 0; animation: es-rise .7s ease .38s both;
}
#ember-splash .es-tag {
  font-weight: 500; font-size: clamp(13px, 2.4vw, 17px); letter-spacing: .05em; color: #d3dbe8;
  opacity: 0; animation: es-rise .7s ease .62s both;
}
#ember-splash .es-bar {
  margin: 26px auto 0; width: 210px; height: 3px; border-radius: 4px;
  background: rgba(255,255,255,.12); overflow: hidden; opacity: 0; animation: es-rise .5s ease .8s both;
}
#ember-splash .es-bar i { display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #ff7a18, #ffd27a); animation: es-fill 1.7s ease .85s both; }
#ember-splash .es-skip {
  position: absolute; bottom: 22px; right: 26px; z-index: 3;
  background: rgba(255,255,255,.06); color: #aeb7c6; border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 7px 14px; font: 600 12px Inter, system-ui; cursor: pointer;
  opacity: 0; animation: es-rise .5s ease 1s both;
}
#ember-splash .es-skip:hover { color: #fff; border-color: #ff7a18; }

/* drifting embers */
#ember-splash .es-sparks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#ember-splash .es-sparks i {
  position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #ffd27a, #ff7a18 60%, transparent 70%);
  opacity: 0; animation: es-spark linear infinite;
}

@keyframes es-ignite { from { opacity: 0; transform: scale(.15) translateY(40px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes es-flick { 0%,100% { filter: drop-shadow(0 0 26px rgba(255,122,24,.5)); } 45% { filter: drop-shadow(0 0 44px rgba(255,170,50,.8)); } 70% { filter: drop-shadow(0 0 30px rgba(255,140,30,.6)); } }
@keyframes es-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes es-fill { to { width: 100%; } }
@keyframes es-spark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 12% { opacity: .9; } 100% { opacity: 0; transform: translateY(-78vh) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  #ember-splash .es-flame { animation: es-ignite .3s ease both; }
  #ember-splash .es-name, #ember-splash .es-tag, #ember-splash .es-bar, #ember-splash .es-skip { animation: es-rise .3s ease both; }
  #ember-splash .es-sparks { display: none; }
}