/* ============================================================
   LOADER

   Full-screen intro shown on every page load. Logo centred, the
   tagline beneath it in a smaller size, both arriving out of depth.

   VISIBILITY IS TIED TO THE `js` CLASS ON PURPOSE

   The overlay is opaque and covers the whole site, so anything that
   leaves it on screen forever takes the site with it. Scoping it to
   `.js` reuses the guard already in <head>:

     - no JavaScript at all  -> `js` is never added, the loader
                                never shows, the page is just there
     - scripts fail to run   -> the guard drops `js` after 2s and
                                the loader disappears with it
     - normal load           -> loader.js dismisses it

   So there is no path where a broken script leaves a blank screen.
   ============================================================ */

.loader {
  display: none;
}

.js .loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-top);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.2vh, 1.75rem);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box;

  background-color: var(--c-bg);

  /* The stage the 3D entrance is projected into. On the container,
     not the children, because here they SHOULD share one vanishing
     point — the logo and its tagline are one object arriving
     together, unlike the demo grid where each card needed its own. */
  perspective: 1100px;
  perspective-origin: 50% 45%;
}

/* ---- exit ----------------------------------------------------- */

.js .loader.is-leaving {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity   0.6s var(--ease),
    transform 0.6s var(--ease);
  pointer-events: none;
}

/* ---- logo ----------------------------------------------------- */

.loader__logo {
  width: min(360px, 62vw);
  transform-style: preserve-3d;

  animation: loader-logo-in 1.15s var(--ease-out) both;
}

.loader__logo img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes loader-logo-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, -260px) rotateX(-24deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
  }
}

/* ---- tagline --------------------------------------------------
   Split by WORD, never by character. Persian letters join, and an
   element boundary mid-word with a transform on each side breaks
   the shaping — the word shatters into isolated letterforms. Whole
   words inside each span keep their joins intact.
   ---------------------------------------------------------------- */

.loader__tagline {
  max-width: 90vw;
  text-align: center;

  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--c-text);
}

.loader__word {
  /* inline-block because transforms do not apply to inline boxes */
  display: inline-block;
  animation: loader-word-in 0.75s var(--ease-out) both;
  animation-delay: calc(0.55s + var(--i) * 0.075s);
}

@keyframes loader-word-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, -70px) rotateX(-55deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
}

/* ---- progress line --------------------------------------------
   Driven from elapsed time against the minimum hold, which is what
   actually governs the wait in almost every case — the frames it
   waits on are typically in well before then.
   ---------------------------------------------------------------- */

.loader__bar {
  width: min(220px, 45vw);
  height: 2px;
  border-radius: var(--r-pill);
  background-color: rgb(var(--rgb-ink) / 0.14);
  overflow: hidden;

  animation: loader-fade-in 0.5s var(--ease) 0.35s both;
}

.loader__bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-image: var(--grad-cta);

  transform: scaleX(var(--p, 0));
  transform-origin: right center;   /* RTL: fills from the right */
}

@keyframes loader-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- 3D Modern Waiting Hand Loader (Logical Natural Desk Drumming) ----
   Engineered with physically grounded desk-drumming kinematics:
   fingers naturally rest on table plane, lift UP from desk pivoting at the
   anatomical knuckle joint, strike DOWN firmly with tactile optical ripples
   and squashing contact shadows, and settle with micro-elastic recoil.
   Sculpted with seamless wrist anchor, thenar thumb bridge, and luxury
   Fartak obsidian & amethyst crystal glassmorphism.
   ---------------------------------------------------------------- */

.loader__hand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: clamp(0.15rem, 1vh, 0.45rem);
  perspective: 900px;
  perspective-origin: 50% 65%;
  transform-style: preserve-3d;
  animation: loader-fade-in 0.5s var(--ease) 0.35s both;
  user-select: none;
}

.loader__hand-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hand container: naturally resting in 3D perspective on desk plane */
.hand-loader {
  position: relative;
  width: 110px;
  height: 96px;
  transform-origin: center center;
  transform-style: preserve-3d;
  transform: scale(var(--hand-scale, 1)) rotateX(24deg);
}

/* Ethereal aura glow behind hand */
.hand-loader__glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 150px;
  height: 125px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hand-ambient-glow) 0%, rgba(118, 33, 176, 0.18) 50%, transparent 75%);
  filter: blur(22px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: hand-glow-pulse 2.6s ease-in-out infinite alternate;
}

@keyframes hand-glow-pulse {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
}

/* Ground plane contact shadow under the hand */
.hand-loader__shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 115px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--hand-shadow) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
  filter: blur(5px);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  animation: hand-shadow-pulse 1.35s cubic-bezier(0.25, 0.1, 0.25, 1) infinite both;
}

@keyframes hand-shadow-pulse {
  0%, 100% { transform: translateX(-50%) scale(1);       opacity: 0.70; }
  38%      { transform: translateX(-50%) scale(1.04, 0.94); opacity: 0.90; }
}

/* Wrist: smoothly anchors hand to table surface */
.hand-loader__wrist {
  position: absolute;
  left: 20px;
  bottom: -14px;
  width: 54px;
  height: 24px;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(180deg, rgba(30, 8, 55, 0.9) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* Palm: clean, sleek frosted glass base with seamless top */
.hand-loader__palm {
  position: absolute;
  left: 10px;
  bottom: 4px;
  width: 74px;
  height: 42px;
  border-radius: 16px 16px 24px 24px;
  background: var(--hand-palm-bg);
  border: 1.2px solid var(--hand-outline);
  border-top: none;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.45),
    inset 0 -2px 6px rgba(0, 0, 0, 0.5),
    0 6px 20px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
  z-index: 3;
}

/* Knuckle arch highlight across the top of palm */
.hand-loader__palm::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 4px;
  right: 4px;
  height: 6px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 30%, rgba(215,65,235,0.6) 50%, rgba(255,255,255,0.4) 70%, transparent 100%);
  filter: blur(0.5px);
}

/* Thenar muscle bridge connecting palm and thumb */
.hand-loader__palm::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 4px;
  width: 18px;
  height: 24px;
  border-radius: 12px;
  background: var(--hand-palm-bg);
  border: 1.2px solid var(--hand-outline);
  border-left: none;
  border-bottom: none;
  transform: rotate(20deg);
  z-index: 3;
}

/* Fingers: smoothly articulated pill capsules */
.hand-loader__finger {
  position: absolute;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  z-index: 4;
}

/* Anatomical finger proportions, positioning & natural outward fan-out (splay) */
.hand-loader__finger--pinky  { left: 12px; bottom: 34px; width: 12px; height: 35px; --r: -7deg; }
.hand-loader__finger--ring   { left: 27px; bottom: 35px; width: 13px; height: 44px; --r: -2.5deg; }
.hand-loader__finger--middle { left: 43px; bottom: 36px; width: 14px; height: 50px; --r: 0deg; }
.hand-loader__finger--index  { left: 59px; bottom: 35px; width: 13px; height: 43px; --r: 3.5deg; }

/* Finger body: silky rounded pill with frosted glass luster & top specular rim */
.hand-loader__finger-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-image: var(--hand-finger-face);
  border: 1.2px solid var(--hand-outline);
  border-top: 1.8px solid var(--hand-border-specular);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
    inset 0 0 8px rgba(215, 65, 235, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  transform-origin: center bottom;
  animation: hand-finger-tap 1.35s cubic-bezier(0.22, 0.05, 0.18, 1) infinite both;
  animation-delay: var(--d, 0ms);
  will-change: transform;
}

/* Tactile optical ripple on table surface upon impact */
.hand-loader__ripple {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 18px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #c084fc;
  transform: translateX(-50%) scale(0.3);
  opacity: 0;
  pointer-events: none;
  animation: hand-ripple-tap 1.35s ease-out infinite both;
  animation-delay: var(--d, 0ms);
}

/* Dedicated contact shadow under each fingertip */
.hand-loader__contact-shadow {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 14px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, transparent 75%);
  transform: translateX(-50%);
  pointer-events: none;
  animation: hand-shadow-tap 1.35s cubic-bezier(0.22, 0.05, 0.18, 1) infinite both;
  animation-delay: var(--d, 0ms);
}

/* Opposable Thumb emerging seamlessly from thenar mound */
.hand-loader__thumb {
  position: absolute;
  left: 72px;
  bottom: 12px;
  width: 14px;
  height: 31px;
  transform-origin: 3px 24px;
  transform: rotate(38deg);
  transform-style: preserve-3d;
  z-index: 5;
}

.hand-loader__thumb-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background-image: var(--hand-finger-face);
  border: 1.2px solid var(--hand-outline);
  border-top: 1.8px solid var(--hand-border-specular);
  box-shadow:
    inset 0 1.5px 2px rgba(255, 255, 255, 0.55),
    inset 0 0 8px rgba(215, 65, 235, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  transform-origin: 3px 24px;
  animation: hand-thumb-tap 1.35s cubic-bezier(0.22, 0.05, 0.18, 1) infinite both;
  animation-delay: 320ms;
  will-change: transform;
}

/* ============================================================
   100% LOGICAL & NATURAL DESK-DRUMMING KINEMATICS
   Fingers rest naturally on table plane. When drumming:
   1. Lifts UP from desk (rotates up, pulls tip up).
   2. Strikes DOWN firmly onto desk (hits surface: TAP!).
   3. Elastic micro-recoil.
   4. Rests on desk surface.
   NEVER slides down into palm!
   ============================================================ */
@keyframes hand-finger-tap {
  0%, 14% {
    /* Resting comfortably on table surface */
    transform: rotate(var(--r, 0deg)) translateY(0) scaleY(1);
  }
  26% {
    /* Natural lift up from table */
    transform: rotate(calc(var(--r, 0deg) - 16deg)) translateY(-9px) scaleY(1.02);
  }
  38% {
    /* Clean, firm table strike */
    transform: rotate(calc(var(--r, 0deg) + 2deg)) translateY(2px) scaleY(0.96);
  }
  46% {
    /* Micro elastic recoil */
    transform: rotate(calc(var(--r, 0deg) - 1.5deg)) translateY(-1px) scaleY(1.01);
  }
  56%, 100% {
    /* Return to relaxed resting position */
    transform: rotate(var(--r, 0deg)) translateY(0) scaleY(1);
  }
}

@keyframes hand-thumb-tap {
  0%, 14% {
    transform: rotate(38deg) translate(0, 0);
  }
  26% {
    transform: rotate(26deg) translate(-2px, -6px);
  }
  38% {
    transform: rotate(43deg) translate(1px, 2px);
  }
  46% {
    transform: rotate(36deg) translate(0, -0.5px);
  }
  56%, 100% {
    transform: rotate(38deg) translate(0, 0);
  }
}

@keyframes hand-shadow-tap {
  0%, 14% { transform: translateX(-50%) scale(1); opacity: 0.7; }
  26%     { transform: translateX(-50%) scale(0.4); opacity: 0.15; }
  38%     { transform: translateX(-50%) scale(1.3, 1.1); opacity: 0.95; }
  46%     { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
  56%, 100% { transform: translateX(-50%) scale(1); opacity: 0.7; }
}

@keyframes hand-ripple-tap {
  0%, 36% { opacity: 0; transform: translateX(-50%) scale(0.3); }
  38%     { opacity: 0.95; transform: translateX(-50%) scale(0.7); }
  56%     { opacity: 0; transform: translateX(-50%) scale(2.2); }
  100%    { opacity: 0; transform: translateX(-50%) scale(2.2); }
}

/* ---- Animated Typography Wave (LOADING) ---- */
.hand-loader__text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-family: var(--f-lead);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--hand-text-dim);
  direction: ltr;
}

.hand-loader__text span {
  display: inline-block;
  animation: hand-letter-pop 1.35s cubic-bezier(0.16, 1, 0.3, 1) infinite both;
  animation-delay: calc(var(--i, 0) * 80ms);
  will-change: transform, opacity, color;
}

@keyframes hand-letter-pop {
  0%, 12% {
    transform: translateY(0) scale(1);
    opacity: 0.50;
    color: var(--hand-text-dim);
  }
  26% {
    transform: translateY(-7px) scale(1.18);
    opacity: 1;
    color: var(--hand-text-pop);
    text-shadow: 0 0 14px var(--hand-text-glow), 0 0 4px #ffffff;
  }
  40%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.50;
    color: var(--hand-text-dim);
  }
}

/* Micro status badge beneath */
.hand-loader__status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.22rem 0.8rem;
  border-radius: var(--r-pill);
  background: rgba(88, 28, 135, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.32);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hand-loader__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 8px #c084fc;
  animation: hand-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes hand-dot-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.25); box-shadow: 0 0 12px #c084fc, 0 0 18px rgba(168, 85, 247, 0.8); }
}

.hand-loader__status-text {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #e9d5ff;
  letter-spacing: -0.01em;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

@media (max-width: 440px) or (max-height: 700px) {
  .hand-loader {
    --hand-scale: 0.88;
  }
  .hand-loader__text {
    font-size: 0.65rem;
    letter-spacing: 0.28em;
  }
}

/* ---- skip hint ------------------------------------------------- */

.loader__skip {
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  animation: loader-fade-in 0.5s var(--ease) 1.6s both;
}

/* ---- scroll lock ----------------------------------------------
   Without this the page scrolls behind the overlay and the visitor
   arrives somewhere in the middle of the hero sequence.
   ---------------------------------------------------------------- */

.is-loading {
  overflow: hidden;
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .loader__logo,
  .loader__word,
  .loader__bar,
  .loader__skip,
  .loader__hand-wrap {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hand-loader__glow,
  .hand-loader__dot,
  .hand-loader__shadow,
  .hand-loader__finger-body,
  .hand-loader__contact-shadow,
  .hand-loader__ripple,
  .hand-loader__thumb-body,
  .hand-loader__text span {
    animation: none;
  }

  .loader__hand-stage {
    transform: none !important;
  }

  .js .loader.is-leaving {
    transition: opacity 0.2s linear;
    transform: none;
  }
}