/* Pakstoor :: pks-loader.css :: v1.0-000002 :: 2026-05-13 */

/* =========================================================
   Full-screen loader overlay + two animation variants.
   All timings tuned so the gold flash / "LISTED/SECURED"
   beat lands ~1.9 s into the 2.5 s overlay, coinciding
   with the WARDEN chime cluster climax.
   ========================================================= */

/* ---- Scroll lock while overlay is up ----------------------- */
html.pks-loader-active,
body.pks-loader-active {
  overflow: hidden;
}

/* ---- Overlay root ------------------------------------------ */
.pks-loader-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}

.pks-loader-root.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.pks-loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 24, 29, 0.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.pks-loader-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.pks-loader-icon {
  width: 200px;
  height: 200px;
  filter: drop-shadow(0 0 24px rgba(217, 166, 37, 0.15));
}

/* ---- Captions ---------------------------------------------- */
.pks-loader-captions {
  position: relative;
  width: 320px;
  height: 22px;
  text-align: center;
}

.pks-cap {
  position: absolute;
  inset: 0;
  font-family: var(--font-display, 'Oswald', sans-serif);
  font-size:var(--fs-14);
  letter-spacing: 2.5px;
  color: var(--ink, #ECEFF2);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
}

.pks-loader-root.is-visible .pks-cap--1 { animation: pks-cap-1 2500ms both; }
.pks-loader-root.is-visible .pks-cap--2 { animation: pks-cap-2 2500ms both; }
.pks-loader-root.is-visible .pks-cap--3 { animation: pks-cap-3 2500ms both; color: var(--gold, #D9A625); }

@keyframes pks-cap-1 {
   0% { opacity: 0; transform: translateY(6px); }
   8% { opacity: 1; transform: translateY(0); }
  44% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-6px); }
 100% { opacity: 0; }
}
@keyframes pks-cap-2 {
   0% { opacity: 0; transform: translateY(6px); }
  46% { opacity: 0; transform: translateY(6px); }
  52% { opacity: 1; transform: translateY(0); }
  72% { opacity: 1; transform: translateY(0); }
  76% { opacity: 0; transform: translateY(-6px); }
 100% { opacity: 0; }
}
@keyframes pks-cap-3 {
   0% { opacity: 0; transform: translateY(6px); }
  76% { opacity: 0; transform: translateY(6px); }
  82% { opacity: 1; transform: translateY(0); letter-spacing: 4px; }
 100% { opacity: 1; transform: translateY(0); letter-spacing: 4px; }
}

/* =========================================================
   BOX VARIANT — 4 flaps fold in sequence, tape slides, glow
   ========================================================= */

.pks-box-flap {
  transform-box: fill-box;
}
.pks-box-flap--top    { transform-origin: 50% 100%; }
.pks-box-flap--bottom { transform-origin: 50%   0%; }
.pks-box-flap--left   { transform-origin: 100% 50%; }
.pks-box-flap--right  { transform-origin:   0% 50%; }

.pks-loader-root.is-visible .pks-box-flap--top    { animation: pks-fold-y 650ms 250ms cubic-bezier(.5,0,.2,1) both; }
.pks-loader-root.is-visible .pks-box-flap--left   { animation: pks-fold-x 650ms 380ms cubic-bezier(.5,0,.2,1) both; }
.pks-loader-root.is-visible .pks-box-flap--bottom { animation: pks-fold-y 650ms 510ms cubic-bezier(.5,0,.2,1) both; }
.pks-loader-root.is-visible .pks-box-flap--right  { animation: pks-fold-x 650ms 640ms cubic-bezier(.5,0,.2,1) both; }

@keyframes pks-fold-y {
   0% { transform: scaleY(1); }
 100% { transform: scaleY(0); }
}
@keyframes pks-fold-x {
   0% { transform: scaleX(1); }
 100% { transform: scaleX(0); }
}

.pks-box-tape {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
}
.pks-loader-root.is-visible .pks-box-tape {
  animation: pks-tape 800ms 1300ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes pks-tape {
   0% { transform: scaleX(0); opacity: 0; }
  10% { opacity: 1; }
 100% { transform: scaleX(1); opacity: 1; }
}

.pks-box-glow {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.pks-loader-root.is-visible .pks-box-glow {
  animation: pks-glow 900ms 1900ms ease-out both;
}
@keyframes pks-glow {
   0% { opacity: 0; stroke-width: 2; transform: scale(1); filter: drop-shadow(0 0 0 rgba(217,166,37,0)); }
  20% { opacity: 1; stroke-width: 3; transform: scale(1.04); filter: drop-shadow(0 0 18px rgba(217,166,37,0.8)); }
 100% { opacity: 0.6; stroke-width: 2; transform: scale(1); filter: drop-shadow(0 0 6px rgba(217,166,37,0.4)); }
}

/* =========================================================
   SEAL VARIANT — lock body appears, shackle drops, check
   draws, outer ring pulses outward
   ========================================================= */

.pks-seal-body {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.pks-loader-root.is-visible .pks-seal-body {
  animation: pks-seal-body 600ms 300ms cubic-bezier(.2,.6,.2,1) both;
}
@keyframes pks-seal-body {
   0% { opacity: 0; transform: translateY(14px) scale(0.9); }
 100% { opacity: 1; transform: translateY(0)    scale(1);   }
}

.pks-seal-shackle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.pks-loader-root.is-visible .pks-seal-shackle {
  animation: pks-seal-shackle 600ms 900ms cubic-bezier(.5,0,.5,1.3) both;
}
@keyframes pks-seal-shackle {
   0% { opacity: 0; transform: translateY(-20px); }
  60% { opacity: 1; transform: translateY(3px);   }
 100% { opacity: 1; transform: translateY(0);     }
}

.pks-seal-check {
  /* stroke-dashoffset: 60 set inline so the line is hidden at start */
}
.pks-loader-root.is-visible .pks-seal-check {
  animation: pks-seal-check 500ms 1500ms ease-out both;
}
@keyframes pks-seal-check {
   0% { stroke-dashoffset: 60; }
 100% { stroke-dashoffset:  0; }
}

.pks-seal-ring {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.pks-loader-root.is-visible .pks-seal-ring {
  animation: pks-seal-ring 900ms 1800ms ease-out both;
}
@keyframes pks-seal-ring {
   0% { opacity: 0.85; transform: scale(0.4); stroke-width: 3; }
 100% { opacity: 0;    transform: scale(1.35); stroke-width: 1; }
}

/* ---- Reduced-motion: static states only -------------------- */
@media (prefers-reduced-motion: reduce) {
  .pks-loader-root,
  .pks-loader-root * { animation: none !important; transition: none !important; }
  .pks-cap--3 { opacity: 1; color: var(--gold, #D9A625); }
  .pks-cap--1, .pks-cap--2 { opacity: 0; }
  .pks-box-flap, .pks-box-tape, .pks-seal-check { opacity: 1; }
}