/* ============================================================
   Baraem GradeFlow — opening sequence
   ------------------------------------------------------------
   Three soft colour blobs drift behind a faint grid, the crest
   floats on a pulsing halo with dots orbiting it, and a bar
   fills. All motion is disabled under prefers-reduced-motion:
   the composition stays, the movement stops.
   ============================================================ */

.ld {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, #1a1040 0%, #2d1b69 38%, #4a2c8a 72%, #6b3fa0 100%);
  opacity: 1;
  transition: opacity .5s ease, visibility .5s ease;
}
.ld.ld-out { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- drifting colour field ---------- */
.ld-bg { position: absolute; inset: 0; overflow: hidden; }
.ld-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
}
.ld-blob.b1 {
  width: 46vmax; height: 46vmax;
  top: -14vmax; inset-inline-start: -12vmax;
  background: radial-gradient(circle at 30% 30%, #ff6ec7, #7b2ff7 70%);
  animation: ldDrift1 17s ease-in-out infinite alternate;
}
.ld-blob.b2 {
  width: 40vmax; height: 40vmax;
  bottom: -12vmax; inset-inline-end: -10vmax;
  background: radial-gradient(circle at 60% 40%, #37d5ff, #1f6bff 72%);
  animation: ldDrift2 21s ease-in-out infinite alternate;
}
.ld-blob.b3 {
  width: 30vmax; height: 30vmax;
  top: 42%; inset-inline-start: 46%;
  background: radial-gradient(circle at 50% 50%, #ffd166, #ff7a45 70%);
  opacity: .34;
  animation: ldDrift3 15s ease-in-out infinite alternate;
}

/* faint grid so the colour reads as designed, not as mush */
.ld-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 72%);
}

/* ---------- crest ---------- */
.ld-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
  opacity: 1;
}
/* Entrance is opt-in: JS adds .ld-in, and the animation has no fill-mode so a
   stalled timeline leaves the splash fully visible rather than at opacity 0. */
.ld-in .ld-stage { animation: ldRise .6s cubic-bezier(.2,.8,.25,1); }
@keyframes ldRise {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ld-crest {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(96px, 20vmin, 168px);
  aspect-ratio: 394 / 493;          /* the crest's own proportions */
  margin-bottom: 14px;
}
.ld-img {
  width: 100%; height: 100%;
  object-fit: contain;
  position: relative; z-index: 2;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
  animation: ldFloat 4.2s ease-in-out infinite;
}
.ld-halo {
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,102,.42), rgba(255,214,102,0) 68%);
  z-index: 1;
  animation: ldPulse 2.8s ease-in-out infinite;
}

/* eight dots on a ring around the crest */
.ld-orbit {
  position: absolute;
  inset: -22%;
  z-index: 0;
  animation: ldSpin 9s linear infinite;
}
.ld-orbit i {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--dot, #ffd166);
  box-shadow: 0 0 10px var(--dot-glow, rgba(255,209,102,.9));
  opacity: .85;
}
.ld-orbit b {                       /* thin ring itself */
  position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}

/* ---------- text + bar ---------- */
.ld-name {
  font-size: clamp(1.05rem, 3.4vmin, 1.7rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.ld-tag {
  font-size: clamp(.72rem, 2vmin, .9rem);
  color: rgba(255,255,255,.7);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ld-bar {
  width: min(230px, 56vw);
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
}
.ld-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd166, #ff6ec7, #37d5ff);
  transition: width .55s cubic-bezier(.3,.9,.3,1);
  box-shadow: 0 0 14px rgba(255,138,216,.6);
}
.ld-phase {
  margin-top: 11px;
  font-size: .76rem;
  color: rgba(255,255,255,.66);
  letter-spacing: .04em;
  min-height: 1.2em;
}

/* ---------- keyframes ---------- */
@keyframes ldDrift1 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(9vmax,7vmax,0) scale(1.16); }
}
@keyframes ldDrift2 {
  from { transform: translate3d(0,0,0) scale(1.1); }
  to   { transform: translate3d(-11vmax,-6vmax,0) scale(.94); }
}
@keyframes ldDrift3 {
  from { transform: translate3d(-6vmax,4vmax,0) scale(.9); }
  to   { transform: translate3d(7vmax,-5vmax,0) scale(1.2); }
}
@keyframes ldSpin { to { transform: rotate(360deg); } }
@keyframes ldFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes ldPulse {
  0%, 100% { transform: scale(1);    opacity: .85; }
  50%      { transform: scale(1.12); opacity: .45; }
}
/* ---------- reduced motion: keep the art, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .ld-blob, .ld-orbit, .ld-halo, .ld-img, .ld-stage { animation: none !important; }
  .ld-bar i { transition: none; }
}