/* ============================================================
   MAYDAN — Animated Logo & Splash Intro
   ============================================================ */

#maydan-splash {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(13,148,136,.12), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(99,102,241,.10), transparent 45%),
    radial-gradient(circle at 80% 15%, rgba(217,119,6,.07), transparent 35%),
    var(--my-body, #f4f6f8);
  cursor: pointer;
  overflow: hidden;
}
#maydan-splash.bye { animation: spFadeOut .45s ease forwards; }
@keyframes spFadeOut { to { opacity: 0; visibility: hidden; } }

.splash-inner { text-align: center; padding: 1rem; }

/* ---------- The mark ---------- */
.splash-logo {
  width: 148px; height: 148px; display: block; margin-inline: auto;
  animation: spLogoIn 1s cubic-bezier(.2,.9,.3,1.2) both;
  filter: drop-shadow(0 18px 30px rgba(13,148,136,.28));
}
@keyframes spLogoIn {
  from { transform: scale(.55) rotate(-18deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* frame draws itself */
.lg-frame {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: spDraw 1s ease .15s forwards;
}
@keyframes spDraw { to { stroke-dashoffset: 0; } }

/* pin pops */
.lg-pin {
  opacity: 0; transform-origin: 60px 62px; transform: scale(0) translateY(8px);
  animation: spPop .55s cubic-bezier(.34,1.56,.64,1) .75s forwards;
}
@keyframes spPop { to { opacity: 1; transform: none; } }

/* pulse ring behind pin */
.lg-pulse {
  transform-origin: 60px 58px; opacity: 0;
  animation: spPulse 1.8s ease-out 1.35s infinite;
}
@keyframes spPulse {
  0% { opacity: .55; transform: scale(.4); }
  70% { opacity: 0; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* amber spark orbits the rhombus then keeps floating */
.lg-orbit {
  transform-origin: 60px 60px; opacity: 0;
  animation: spOrbit 1.5s cubic-bezier(.45,0,.25,1) .9s forwards,
             spSpin 7s linear 2.4s infinite;
}
@keyframes spOrbit { from { opacity: 0; transform: rotate(-270deg); } to { opacity: 1; transform: rotate(90deg); } }
@keyframes spSpin  { from { transform: rotate(90deg); } to { transform: rotate(450deg); } }
.lg-spark { animation: spTwinkle 1.6s ease-in-out 1.2s infinite alternate; transform-origin: 60px 6px; }
@keyframes spTwinkle { from { transform: scale(.85); } to { transform: scale(1.15); } }

/* ---------- Wordmark ---------- */
.splash-word {
  font-family: "Cairo", sans-serif;
  font-weight: 900; font-size: 3.2rem; line-height: 1.25;
  margin-top: 1rem;
  background: linear-gradient(100deg, #0b7c72 20%, #0d9488 40%, #2dd4bf 50%, #0d9488 60%, #0b7c72 80%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0; transform: translateY(14px);
  animation: spUp .6s ease 1.15s forwards, spShimmer 1.6s ease 1.75s 1;
}
@keyframes spUp { to { opacity: 1; transform: none; } }
@keyframes spShimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }

.splash-latin {
  font-family: "Cairo", sans-serif; font-weight: 700; font-size: .95rem;
  color: var(--my-ink-3, #94a3b8); letter-spacing: .9em; text-indent: .9em;
  margin-top: .1rem; opacity: 0;
  animation: spTrack .8s ease 1.45s forwards;
}
@keyframes spTrack { from { opacity: 0; letter-spacing: 1.4em; } to { opacity: 1; letter-spacing: .45em; } }

.splash-tag {
  font-family: "Cairo", sans-serif; font-weight: 600; font-size: 1rem;
  color: var(--my-ink-2, #64748b); margin-top: .8rem;
  opacity: 0; animation: spUp .6s ease 1.8s forwards;
}

.splash-byline {
  font-family: "Cairo", sans-serif; font-weight: 600; font-size: .72rem;
  color: var(--my-ink-3, #94a3b8); margin-top: 1.6rem;
  opacity: 0; animation: spUp .6s ease 2.1s forwards;
}

/* progress hairline */
.splash-bar {
  width: 168px; height: 4px; border-radius: 4px; margin: 1rem auto 0;
  background: var(--my-hover, #e9edf2); overflow: hidden;
  opacity: 0; animation: spUp .4s ease 1.5s forwards;
}
.splash-bar i {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #0d9488, #2dd4bf, #d97706);
  animation: spFill 1.5s cubic-bezier(.6,.05,.3,1) 1.55s forwards;
}
@keyframes spFill { to { width: 100%; } }

/* ---------- Quick mode (portal pages) ---------- */
#maydan-splash.quick .splash-logo  { animation-duration: .7s; }
#maydan-splash.quick .lg-frame     { animation: spDraw .7s ease .1s forwards; }
#maydan-splash.quick .lg-pin       { animation-delay: .5s; animation-duration: .45s; }
#maydan-splash.quick .lg-pulse     { animation-delay: .95s; }
#maydan-splash.quick .lg-orbit     { animation: spOrbit 1s cubic-bezier(.45,0,.25,1) .55s forwards, spSpin 7s linear 1.55s infinite; }
#maydan-splash.quick .splash-word  { font-size: 2.4rem; animation-delay: .7s, 1.1s; animation-duration: .5s, 1.2s; }
#maydan-splash.quick .splash-latin { animation-delay: .85s; }
#maydan-splash.quick .splash-tag,
#maydan-splash.quick .splash-byline{ animation-delay: 1s; }
#maydan-splash.quick .splash-bar   { animation-delay: .9s; }
#maydan-splash.quick .splash-bar i { animation: spFill .9s cubic-bezier(.6,.05,.3,1) .95s forwards; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #maydan-splash * { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ---------- Static mini logo (sidebar / hero) ---------- */
.logo-mini { display: block; }
.logo-mini .lg-frame { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.logo-mini .lg-pin, .logo-mini .lg-orbit { opacity: 1; transform: none; animation: none; }
.logo-mini .lg-orbit { transform: rotate(90deg); transform-origin: 60px 60px; }
.logo-mini .lg-pulse, .logo-mini .lg-spark { animation: none; opacity: 0; }
.logo-mini .lg-spark { opacity: 1; }
.logo-hero { filter: drop-shadow(0 10px 22px rgba(13,148,136,.3)); }
.logo-hero .lg-pulse { opacity: 0; animation: spPulse 2.2s ease-out 1s infinite; }
.logo-hero .lg-orbit { animation: spSpin 9s linear infinite; }