/* =========================================================
   Helora page loader — compact layer stack
   ========================================================= */

body.is-loading {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background:
    radial-gradient(420px 260px at 50% 38%, rgba(31, 168, 166, 0.26), transparent 65%),
    linear-gradient(165deg, #062c2c 0%, #0a5c5b 48%, #0e7c7b 100%);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.5s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.03);
}

.loader-stack {
  position: relative;
  width: min(28vw, 108px);
  height: 102px;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.28));
}

.loader-layer {
  position: absolute;
  left: 50%;
  width: var(--w, 100%);
  height: var(--h, 14px);
  border-radius: var(--r, 999px);
  transform: translate(-50%, -72px) scale(0.88);
  opacity: 0;
  background: var(--c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 8px rgba(0, 0, 0, 0.16);
}

.loader-layer.is-in {
  animation: layer-drop 0.55s cubic-bezier(0.22, 1.35, 0.36, 1) forwards;
}

.loader-layer:nth-child(1) { --w: 78%; --h: 18px; --c: #e8943f; bottom: 4px; --r: 42% 42% 50% 50% / 80% 80% 100% 100%; z-index: 1; }
.loader-layer:nth-child(2) { --w: 94%; --h: 12px; --c: #0e7c7b; bottom: 20px; z-index: 2; }
.loader-layer:nth-child(3) { --w: 88%; --h: 11px; --c: #f2a65a; bottom: 30px; z-index: 3; }
.loader-layer:nth-child(4) { --w: 96%; --h: 13px; --c: #1fa8a6; bottom: 39px; z-index: 4; }
.loader-layer:nth-child(5) { --w: 84%; --h: 8px; --c: #fff4e4; bottom: 51px; z-index: 5; }
.loader-layer:nth-child(6) {
  --w: 100%;
  --h: 30px;
  bottom: 55px;
  --r: 50% 50% 40% 40% / 85% 85% 35% 35%;
  background: linear-gradient(180deg, #2bc4c0 0%, #0e7c7b 72%, #0a5c5b 100%);
  z-index: 6;
}

.loader-layer:nth-child(6)::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 48%;
  height: 2px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    -10px -3px 0 -0.5px rgba(255, 255, 255, 0.85),
    12px -2px 0 -0.8px rgba(255, 255, 255, 0.8);
}

.loader-stack.is-complete {
  animation: stack-settle 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.loader-brand {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.65rem;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.loader-brand.is-in {
  opacity: 1;
  transform: none;
}

.loader-text {
  margin: 0;
  min-height: 1.2em;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  max-width: 16rem;
}

.loader-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), #ffe2b0, var(--teal-soft));
  background-size: 200% 100%;
  animation: loader-bar-shine 1.2s linear infinite;
  transition: width 0.18s ease-out;
  box-shadow: 0 0 12px rgba(242, 166, 90, 0.5);
}

@keyframes layer-drop {
  0% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(0.84) rotate(-3deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, 3px) scale(1.02) rotate(0.4deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
  }
}

@keyframes stack-settle {
  0% { transform: scale(1) translateY(0); }
  40% { transform: scale(1.04) translateY(3px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes loader-bar-shine {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-layer {
    opacity: 1;
    transform: translate(-50%, 0);
    animation: none !important;
  }

  .page-loader,
  .loader-brand,
  .loader-bar-fill,
  .loader-stack {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
}