/* ==========================================================
   Namaste loader — joined hands part like doors to open the page
   ========================================================== */
.loader { display: none; }
html.show-loader .loader { display: block; }
.loader {
  --hand-h: min(64vh, 600px);
  --gold-1: #F3DDA6; --gold-2: #D8B26A; --gold-3: #9C7638;
  position: fixed; inset: 0; z-index: 200; pointer-events: all; overflow: hidden; cursor: default;
}

.loader__door {
  position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); overflow: hidden;
  background:
    radial-gradient(120% 70% at 100% 46%, rgba(150, 40, 62, .45), transparent 60%),
    linear-gradient(180deg, #3E0B17 0%, #2A060F 100%);
  will-change: transform;
}
.loader__door--l { left: 0; }
.loader__door--r { right: 0; transform-origin: 100% 50%; }
.loader__door--r { background:
    radial-gradient(120% 70% at 0% 46%, rgba(150, 40, 62, .45), transparent 60%),
    linear-gradient(180deg, #3E0B17 0%, #2A060F 100%); }
.loader__door::before {
  content: ''; position: absolute; inset: 0; opacity: .045; pointer-events: none;
  background: var(--buti) 0 0 / 64px 64px;
}
.loader__door::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(transparent, rgba(216, 178, 106, .5) 30%, rgba(216, 178, 106, .5) 70%, transparent);
  opacity: 0;
}
.loader__door--l::after { right: 0; }
.loader__door--r::after { left: 0; }
.loader.is-opening .loader__door::after { opacity: 1; transition: opacity .3s; }

.loader__hand {
  --fade: linear-gradient(#000 66%, transparent 97%);
  position: absolute; top: calc(46% - var(--hand-h) * .52); height: var(--hand-h);
  width: calc(var(--hand-h) * 249 / 942); transform-origin: 0% 92%; will-change: transform; visibility: hidden;
}
.loader__door--r .loader__hand { left: 0; --src: url(../assets/loader/hand-r.webp); }
.loader__door--l .loader__hand { right: 0; transform-origin: 100% 92%; --src: url(../assets/loader/hand-l.webp); }
.loader__hand img { display: block; width: 100%; height: 100%; -webkit-mask: var(--fade); mask: var(--fade); }
.loader__sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(0deg, transparent 38%, rgba(255, 240, 200, .0) 42%, rgba(255, 244, 214, .85) 50%, rgba(255, 240, 200, 0) 58%, transparent 62%) 50% 100% / 100% 300% no-repeat;
  -webkit-mask: var(--src) 0 0 / 100% 100% no-repeat, var(--fade); -webkit-mask-composite: source-in;
  mask: var(--src) 0 0 / 100% 100% no-repeat, var(--fade); mask-composite: intersect;
}

.loader__glow {
  position: absolute; left: 50%; top: 40%; width: min(70vh, 640px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .32), rgba(214, 120, 40, .12) 45%, transparent 72%);
}
.loader__flare {
  position: absolute; left: 50%; top: calc(46% - var(--hand-h) * .52 + var(--hand-h) * .016); width: 140px; height: 140px;
  translate: -50% -50%; pointer-events: none; opacity: 0;
  background:
    radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(255, 210, 140, .35) 35%, transparent 70%),
    linear-gradient(90deg, transparent 49.4%, rgba(255, 236, 190, .7) 50%, transparent 50.6%),
    linear-gradient(0deg, transparent 49.4%, rgba(255, 236, 190, .5) 50%, transparent 50.6%);
  mix-blend-mode: screen;
}

.loader__words {
  position: absolute; left: 0; right: 0; bottom: max(7vh, 3.5rem); display: grid; justify-items: center; gap: .9rem;
  text-align: center; pointer-events: none;
}
.loader__hi { font: 400 clamp(2rem, 3.6vw, 2.9rem)/1 var(--f-hindi); color: var(--gold-1); letter-spacing: .02em; }
.loader__hi span { display: inline-block; }
.loader__en {
  display: flex; align-items: center; gap: 1rem;
  font: 500 .68rem/1 var(--f-body); letter-spacing: .42em; text-transform: uppercase; color: rgba(243, 221, 166, .72);
  padding-left: .42em;
}
.loader__en::before, .loader__en::after { content: ''; width: 34px; height: 1px; background: currentColor; opacity: .6; }

.loader__skip {
  position: absolute; right: var(--pad); bottom: max(3vh, 1.25rem); padding: .6rem 0;
  font: 500 .64rem/1 var(--f-body); letter-spacing: .28em; text-transform: uppercase; color: rgba(243, 221, 166, .45);
  pointer-events: auto; transition: color .3s;
}
.loader__skip:hover { color: var(--gold-1); }

@media (max-width: 720px) {
  .loader { --hand-h: min(54vh, 460px); }
  .loader__words { bottom: 9vh; }
  .loader__skip { display: none; }
}
