/* Easlish Preloader (EP) — isolated styles (no global resets) */

#ep-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #05050c;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

#ep-root.ep-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ─── CANVAS BACKGROUND ─────────────────────── */
#ep-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}

/* ─── LAYERED LIGHTING ──────────────────────── */
.ep-light-tl {
  position: absolute;
  width: 55vw;
  height: 55vw;
  top: -18vw;
  left: -12vw;
  background: radial-gradient(ellipse, rgba(72, 42, 130, 0.2) 0%, transparent 65%);
  pointer-events: none;
  animation: ep-drift-a 14s ease-in-out infinite;
  will-change: transform;
}

.ep-light-br {
  position: absolute;
  width: 48vw;
  height: 48vw;
  bottom: -12vw;
  right: -10vw;
  background: radial-gradient(ellipse, rgba(110, 55, 170, 0.14) 0%, transparent 65%);
  pointer-events: none;
  animation: ep-drift-b 17s ease-in-out infinite;
  will-change: transform;
}

.ep-light-center {
  position: absolute;
  width: 500px;
  height: 280px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 55% 40%, rgba(110, 79, 154, 0.26) 0%, transparent 68%);
  pointer-events: none;
  border-radius: 50%;
  animation: ep-halo 4.5s ease-in-out infinite;
  will-change: transform, opacity;
}

.ep-rim {
  position: absolute;
  width: 1px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(180, 140, 220, 0.3), transparent);
  top: calc(50% - 175px);
  left: 50%;
  pointer-events: none;
  animation: ep-halo 4.5s ease-in-out infinite;
}

@keyframes ep-drift-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  38% {
    transform: translate(3vw, 2.5vw) scale(1.07);
  }
  72% {
    transform: translate(-2vw, 3.5vw) scale(0.96);
  }
}

@keyframes ep-drift-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-3vw, -2.5vw) scale(1.09);
  }
  68% {
    transform: translate(2.5vw, -3vw) scale(0.93);
  }
}

@keyframes ep-halo {
  0%,
  100% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
  }
}

/* ─── CORNER MARKS ──────────────────────────── */
.ep-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s 0.3s ease;
}

#ep-root.ep-visible .ep-corner {
  opacity: 0.28;
}

.ep-corner::before,
.ep-corner::after {
  content: '';
  position: absolute;
  background: rgba(155, 126, 192, 0.9);
}

.ep-corner::before {
  width: 1px;
  height: 100%;
}

.ep-corner::after {
  width: 100%;
  height: 1px;
}

.ep-corner.tl {
  top: 30px;
  left: 30px;
}

.ep-corner.tr {
  top: 30px;
  right: 30px;
  transform: scaleX(-1);
}

.ep-corner.bl {
  bottom: 30px;
  left: 30px;
  transform: scaleY(-1);
}

.ep-corner.br {
  bottom: 30px;
  right: 30px;
  transform: scale(-1, -1);
}

/* ─── LOGO ──────────────────────────────────── */
.ep-logo-wrap {
  position: relative;
  z-index: 3;
  width: clamp(200px, 32vw, 320px);
  margin-bottom: 52px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s 0.2s ease, transform 0.6s 0.2s ease;
  filter:
    drop-shadow(0 0 30px rgba(110, 79, 154, 0.6))
    drop-shadow(0 6px 20px rgba(0, 0, 0, 0.7));
}

#ep-root.ep-visible .ep-logo-wrap {
  opacity: 1;
  transform: translateY(0);
}

.ep-logo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.ep-logo-wrap svg .cls-1 {
  fill: transparent;
  stroke: #a07fd4;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation:
    ep-draw 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    ep-fill-in 0.65s 1.5s ease forwards;
  will-change: stroke-dashoffset, fill, stroke-width;
}

.ep-logo-wrap svg g:nth-child(1) > path:nth-child(1) {
  animation-delay: 0s, 1.5s;
}
.ep-logo-wrap svg g:nth-child(1) > path:nth-child(2) {
  animation-delay: 0.22s, 1.72s;
}
.ep-logo-wrap svg g:nth-child(1) g > path:nth-child(1) {
  animation-delay: 0.38s, 1.88s;
}
.ep-logo-wrap svg g:nth-child(1) g > path:nth-child(2) {
  animation-delay: 0.48s, 1.98s;
}
.ep-logo-wrap svg g:nth-child(1) g > path:nth-child(3) {
  animation-delay: 0.55s, 2.05s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(1) {
  animation-delay: 0.6s, 2.1s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(2) {
  animation-delay: 0.7s, 2.2s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(3) {
  animation-delay: 0.78s, 2.28s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(4) {
  animation-delay: 0.86s, 2.36s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(5) {
  animation-delay: 0.93s, 2.43s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(6) {
  animation-delay: 1s, 2.5s;
}
.ep-logo-wrap svg g:nth-child(2) > path:nth-child(7) {
  animation-delay: 1.07s, 2.57s;
}

@keyframes ep-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ep-fill-in {
  0% {
    fill: transparent;
    stroke: #a07fd4;
    stroke-width: 0.5;
  }
  100% {
    fill: #7c5faa;
    stroke: #7c5faa;
    stroke-width: 0;
  }
}

/* ─── PROGRESS ──────────────────────────────── */
.ep-progress-wrap {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  transition: opacity 0.5s 0.5s ease;
}

#ep-root.ep-visible .ep-progress-wrap {
  opacity: 1;
}

.ep-label {
  font-size: 11px;
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 300;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  animation: ep-blink 3s ease-in-out infinite;
}

@keyframes ep-blink {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}

.ep-track {
  width: clamp(150px, 24vw, 250px);
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
}

.ep-bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(110, 79, 154, 0.8), #fff);
  will-change: width;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.6),
    0 0 25px rgba(155, 126, 192, 0.5);
}

.ep-bar::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.9);
}

.ep-pct {
  font-size: 13px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  #ep-root {
    transition: none;
  }
  .ep-light-tl,
  .ep-light-br,
  .ep-light-center,
  .ep-rim,
  .ep-label,
  .ep-logo-wrap svg .cls-1 {
    animation: none !important;
  }
}