/* Ekonbee page loader
   - Hex mark with brand gradient stroke draw-on
   - Italic "e" reveal
   - Orbiting particle
   - Progress bar
   - Dissolves on window load
*/

.ekb-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #0a0807;
  background-image:
    radial-gradient(800px 500px at 80% 20%, rgba(193, 38, 140, .18), transparent 60%),
    radial-gradient(700px 400px at 15% 85%, rgba(238, 144, 2, .14), transparent 60%);
  opacity: 1;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.ekb-loader.is-hiding { opacity: 0; pointer-events: none; }

/* The whole loader is removed from DOM after the transition ends.
   Until then, lock body scroll. */
body.ekb-loading { overflow: hidden; }

/* Subtle vignette ring */
.ekb-loader::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(closest-side, transparent 60%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}

.ekb-loader__stage {
  position: relative;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* ---------- Hex mark ---------- */
.ekb-loader__mark {
  position: relative;
  width: 140px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ekb-loader__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(193, 38, 140, .35));
  opacity: 0;
  transform: scale(.85);
  animation: ekbLogoIn .8s cubic-bezier(.2, .7, .2, 1) .1s forwards,
             ekbLogoFloat 3.6s ease-in-out 1s infinite;
}
@keyframes ekbLogoIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes ekbLogoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.02); }
}

/* Hex stroke draw-on */
.ekb-loader__hex {
  fill: none;
  stroke: url(#ekbLoaderGrad);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  filter: drop-shadow(0 0 8px rgba(193, 38, 140, .4));
  animation: ekbLoaderDraw 1.4s cubic-bezier(.6, .1, .2, 1) forwards;
}
@keyframes ekbLoaderDraw {
  to { stroke-dashoffset: 0; }
}

/* Inner italic "e" — fades in once hex is drawn */
.ekb-loader__e {
  font-family: "Raleway", Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: 56px;
  fill: #fff;
  opacity: 0;
  text-anchor: middle;
  dominant-baseline: middle;
  animation: ekbLoaderFade .5s ease-out 1.05s forwards;
}
@keyframes ekbLoaderFade {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Orbiting particle — follows a circular path around the hex */
.ekb-loader__orbit {
  position: absolute;
  inset: 0;
  animation: ekbLoaderSpin 2.5s linear infinite;
  animation-delay: 1.1s;
  opacity: 0;
  animation-fill-mode: both;
}
.ekb-loader__orbit::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ee9002, #c1268c);
  box-shadow:
    0 0 12px rgba(238, 144, 2, .8),
    0 0 24px rgba(193, 38, 140, .5);
  opacity: 0;
  animation: ekbLoaderParticleIn .4s ease-out 1.1s forwards;
}
@keyframes ekbLoaderSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ekbLoaderParticleIn {
  to { opacity: 1; }
}
/* enable orbit visibility once mark is drawn */
.ekb-loader__orbit { animation-play-state: running; opacity: 1; }

/* Outer pulsing ring */
.ekb-loader__pulse {
  position: absolute;
  inset: -22px -12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  animation: ekbLoaderPulse 2.2s ease-out 1.4s infinite;
}
@keyframes ekbLoaderPulse {
  0%   { transform: scale(.85); opacity: .55; border-color: rgba(238, 144, 2, .35); }
  100% { transform: scale(1.35); opacity: 0;   border-color: rgba(126, 63, 191, .15); }
}

/* ---------- Wordmark ---------- */
.ekb-loader__word {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f5efe8;
  display: flex;
  gap: 2px;
}
.ekb-loader__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: ekbLoaderLetterIn .5s cubic-bezier(.2, .7, .2, 1) forwards;
}
.ekb-loader__word span:nth-child(1) { animation-delay: 1.2s; }
.ekb-loader__word span:nth-child(2) { animation-delay: 1.27s; }
.ekb-loader__word span:nth-child(3) { animation-delay: 1.34s; }
.ekb-loader__word span:nth-child(4) { animation-delay: 1.41s; }
.ekb-loader__word span:nth-child(5) { animation-delay: 1.48s; }
.ekb-loader__word span:nth-child(6) { animation-delay: 1.55s; }
.ekb-loader__word span:nth-child(7) { animation-delay: 1.62s; }
@keyframes ekbLoaderLetterIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tagline ---------- */
.ekb-loader__tag {
  font-family: "Inter", "Roboto", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(245, 239, 232, .45);
  opacity: 0;
  animation: ekbLoaderFade .6s ease-out 1.7s forwards;
  margin-top: -22px;
}

/* ---------- Progress bar ---------- */
.ekb-loader__bar {
  position: relative;
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, .06);
  border-radius: 2px;
  overflow: hidden;
}
.ekb-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    #ee9002 30%,
    #c1268c 50%,
    #7e3fbf 70%,
    transparent 100%);
  transform: translateX(-100%);
  animation: ekbLoaderBar 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
  animation-delay: 1.2s;
}
@keyframes ekbLoaderBar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ekb-loader__logo {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .ekb-loader__tag,
  .ekb-loader__word span {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .ekb-loader__orbit,
  .ekb-loader__pulse,
  .ekb-loader__bar::after {
    animation: none;
  }
  .ekb-loader { transition: opacity .2s; }
}