/* =========================================================================
   KHASHAB / the loader: a pair of bookmatched walnut doors
   The monogram is inlaid across the seam; light leaks through the shadow gap
   as the page loads; then the doors swing open toward you.
   ========================================================================= */

.loader { display: none; }

.js .loader {
  display: block;
  position: fixed; inset: 0; z-index: var(--z-loader);
  perspective: 2200px; perspective-origin: 50% 45%;
  pointer-events: auto;
  /* failsafe: if the script never takes over, get out of the way */
  animation: kh-loader-failsafe .6s ease 9s forwards;
}
.js .loader.is-running { animation: none; }
.js .loader.is-done { display: none; }
@keyframes kh-loader-failsafe { to { opacity: 0; visibility: hidden; } }

.loader__door {
  position: absolute; top: 0; bottom: 0; width: 50.05%;
  overflow: hidden;
  background: #3A2A20;          /* veneer colour before the image arrives */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.loader__door--l { left: 0;  transform-origin: 0 50%; }
.loader__door--r { right: 0; transform-origin: 100% 50%; }

.loader__veneer {
  position: absolute; inset: 0;
  background: url("../img/veneer-1100.webp") center / cover no-repeat;
  filter: brightness(.74) saturate(.92) contrast(1.06);
}
.loader__door--r .loader__veneer { transform: scaleX(-1); }   /* bookmatch: the right leaf is the mirror */
@media (max-width: 699.98px) {
  .loader__veneer { background-image: url("../img/veneer-640.webp"); }
  .loader__door--l .loader__note { display: none; }
}

/* downlight falloff + the door edge that meets the seam */
.loader__door::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 226, 184, .10), transparent 32%, transparent 62%, rgba(20, 12, 8, .42)),
    var(--door-edge);
}
.loader__door--l { --door-edge: linear-gradient(90deg, transparent calc(100% - 2px), rgba(255, 238, 214, .16) calc(100% - 2px)); }
.loader__door--r { --door-edge: linear-gradient(90deg, rgba(255, 238, 214, .16) 2px, transparent 2px); }

/* shading as the door turns away from the light (driven by JS) */
.loader__door::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: #120C09; opacity: var(--shade, 0);
}

/* recessed finger pull, a slim vertical groove near the seam */
.loader__pull {
  position: absolute; top: 64%; height: 18%; width: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(10, 6, 4, .55), rgba(10, 6, 4, .2) 60%, rgba(255, 236, 210, .16));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.loader__door--l .loader__pull { right: clamp(18px, 5vw, 64px); }
.loader__door--r .loader__pull { left: clamp(18px, 5vw, 64px); transform: scaleX(-1); }

/* the inlaid monogram, split by the seam */
.loader__mark {
  position: absolute; top: 50%; z-index: 2;
  width: clamp(112px, 15vw, 200px); height: auto;
  color: var(--cream);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(255, 214, 160, .0));
  overflow: visible;
}
.loader__door--l .loader__mark { left: 100%; transform: translate(-50%, -56%); }
.loader__door--r .loader__mark { left: 0;    transform: translate(-50%, -56%); }
.loader__mark g {
  fill: currentColor; fill-opacity: 0;
  stroke: currentColor; stroke-width: .8; stroke-linejoin: round;
}

.loader__note {
  position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 2;
  color: rgba(255, 245, 225, .72);
  font: 500 var(--t-label)/1 var(--f-text); letter-spacing: var(--track-label); text-transform: uppercase;
}
.loader__door--l .loader__note { left: var(--gutter); }
.loader__door--r .loader__note { right: var(--gutter); letter-spacing: 0; text-transform: none; }
.loader__count { font: 400 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--f-display); color: var(--cream); font-variant-numeric: tabular-nums; display: inline-block; min-width: 2.2ch; text-align: right; }
.loader__pct { font: 500 var(--t-label)/1 var(--f-text); margin-left: .35em; vertical-align: top; }

/* the shadow gap between the leaves; light grows through it as the page loads */
.loader__seam {
  position: absolute; left: 50%; top: 0; bottom: 0; z-index: 4; width: 3px; transform: translateX(-50%);
  background: #0B0706;
  pointer-events: none;
}
.loader__seam i {
  position: absolute; left: 1px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, #FFE7C4 18%, #FFF5E1 50%, #FFE7C4 82%, transparent);
  box-shadow: 0 0 10px 1px rgba(255, 214, 160, .55), 0 0 36px 4px rgba(255, 196, 130, .25);
  transform: scaleY(0); transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .loader__seam i { transform: scaleY(1); }
}