/* ==========================================================================
   AALANKAAR STUDIOS — 03 · CUSTOM CURSOR & ENTRY LOADER
   Two pieces of theatre. Both fully removed under prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   THE CURSOR
   A three-body system: a hard dot that tracks 1:1, a soft ring that lags
   behind it, and a label that appears when the ring has something to say.
   Everything sits in difference blend mode so it reads on ivory and on ink.
   ========================================================================== */

/* Two tones, one shape.
   03-cursor.js measures the luminance directly under the pointer — sampling
   the photograph itself, not just the element behind it — and adds
   .is-on-light when the ground is bright. Everything below reads its colour
   from --cur, so the whole cursor flips in one place. */
.cursor-layer{
  position:fixed; inset:0;
  z-index:var(--z-cursor);
  pointer-events:none;
  display:none;

  --cur:        var(--c-ivory);
  --cur-mote:   var(--c-gold-soft);
  --cur-fill-1: rgba(232,218,180,.07);
  --cur-fill-2: rgba(232,218,180,.12);
}

.cursor-layer.is-on-light{
  --cur:        var(--c-ink);
  --cur-mote:   var(--c-vermilion);
  --cur-fill-1: rgba(23,12,9,.06);
  --cur-fill-2: rgba(23,12,9,.10);
}
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor .cursor-layer{ display:block; }
}

.cursor-dot{
  position:fixed; top:0; left:0;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--cur, var(--c-ivory));
  transform:translate3d(-50%,-50%,0);
  transition:width var(--dur-2) var(--ease), height var(--dur-2) var(--ease),
             opacity var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  will-change:transform;
}

.cursor-ring{
  position:fixed; top:0; left:0;
  width:38px; height:38px;
  border:1px solid var(--cur, var(--c-ivory));
  border-radius:50%;
  transform:translate3d(-50%,-50%,0) scale(1);
  transition:width var(--dur-3) var(--ease),
             height var(--dur-3) var(--ease),
             background-color var(--dur-3) var(--ease),
             border-color var(--dur-3) var(--ease),
             opacity var(--dur-2) var(--ease);
  will-change:transform;
  display:grid;
  place-items:center;
}

.cursor-label{
  position:fixed; top:0; left:0;
  font-family:var(--font-sans);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--cur, var(--c-ivory));
  white-space:nowrap;
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.65);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-back);
  will-change:transform;
}
.cursor-label.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }

/* --- Cursor states, driven by [data-cursor] on the hovered element ------- */

/* link / nav — the ring swells softly */
.cursor-ring.is-link{ width:58px; height:58px; background:var(--cur-fill-1); }

/* image / gallery — "VIEW" */
.cursor-ring.is-view{ width:88px; height:88px; background:var(--cur-fill-2); }

/* add to bag — "+ BAG" */
.cursor-ring.is-bag{ width:74px; height:74px; background:var(--cur-fill-2); }

/* draggable carousel — "DRAG" */
.cursor-ring.is-drag{ width:80px; height:80px; background:var(--cur-fill-1); }

/* product gallery — "ZOOM" */
.cursor-ring.is-zoom{ width:92px; height:92px; background:var(--cur-fill-2); }

/* dismiss controls — "CLOSE" */
.cursor-ring.is-close{ width:76px; height:76px; background:rgba(156,36,54,.16); border-color:var(--c-ruby); }

/* video / audio — "PLAY" */
.cursor-ring.is-play{ width:84px; height:84px; background:var(--cur-fill-2); }

/* text input — the ring collapses into a caret bar */
.cursor-ring.is-text{ width:2px; height:26px; border-radius:1px; background:var(--cur, var(--c-ivory)); border-color:transparent; }

/* pressed */
.cursor-ring.is-down{ transform:translate3d(-50%,-50%,0) scale(.82); }
.cursor-dot.is-down{ width:11px; height:11px; }

/* hidden — off-window, or while the loader owns the screen */
.cursor-dot.is-hidden,
.cursor-ring.is-hidden,
.cursor-label.is-hidden{ opacity:0; }

/* When the ring grows large the dot gets out of its way. */
.cursor-dot.is-quiet{ opacity:0; }

/* The trail — short-lived motes shed while the pointer moves fast. */
.cursor-mote{
  position:fixed; top:0; left:0;
  border-radius:50%;
  background:var(--cur-mote, var(--c-gold-soft));
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  animation:mote-fade .62s var(--ease) forwards;
}
@keyframes mote-fade{
  from{ opacity:.55; }
  to  { opacity:0; transform:translate3d(-50%,-50%,0) scale(.2); }
}

/* Click ripple — a single vermilion ring pushed out from the click point. */
.cursor-ripple{
  position:fixed; top:0; left:0;
  width:10px; height:10px;
  border:1px solid var(--c-vermilion);
  border-radius:50%;
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  animation:ripple-out .75s var(--ease) forwards;
}
@keyframes ripple-out{
  from{ opacity:.9;  transform:translate3d(-50%,-50%,0) scale(1); }
  to  { opacity:0;   transform:translate3d(-50%,-50%,0) scale(9); }
}

/* ==========================================================================
   THE LOADER
   Four beats, ~1.9s:
     1. Two ink panels hold the screen over an ivory field.
     2. The wordmark rises letter by letter out of its own baseline.
     3. A gold rule sweeps left to right beneath it while a counter climbs.
     4. The panels part vertically and the page is already there behind them.
   ========================================================================== */

.loader{
  position:fixed; inset:0;
  z-index:var(--z-loader);
  display:grid;
  place-items:center;
  /* Transparent on purpose: the two panels already overlap to cover the
     whole viewport, so as they part they reveal the page itself rather than
     a flat field the page then has to fade in behind. */
  background:transparent;
  overflow:hidden;
}
.loader.is-done{ pointer-events:none; }
.loader.is-gone{ display:none; }

/* Without JavaScript nothing would ever dismiss it, so it never appears. */
.no-js .loader,
.no-js .veil{ display:none !important; }

/* Panels */
.loader__panel{
  position:absolute; left:0;
  width:100%; height:50.5%;
  background:var(--c-ink-deep);
  transition:transform 1.05s var(--ease-snap);
  will-change:transform;
}
.loader__panel--top{    top:0;    transform:translateY(0); }
.loader__panel--bottom{ bottom:0; transform:translateY(0); }
.loader.is-open .loader__panel--top{    transform:translateY(-100%); }
.loader.is-open .loader__panel--bottom{ transform:translateY(100%); }

/* Centre stage */
.loader__stage{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s-4);
  transition:opacity var(--dur-3) var(--ease), transform var(--dur-4) var(--ease);
}
.loader.is-open .loader__stage{ opacity:0; transform:translateY(-14px); }

/* The wordmark */
.loader__word{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 9vw, 5.2rem);
  font-weight:500;
  font-style:italic;
  letter-spacing:-0.03em;
  color:var(--c-ivory);
  line-height:1;
  display:flex;
}
.loader__word span{
  display:inline-block;
  opacity:0;
  transform:translateY(90%) rotate(6deg);
  animation:letter-rise .85s var(--ease) forwards;
  animation-delay:calc(var(--i, 0) * 55ms + 150ms);
}
@keyframes letter-rise{
  to{ opacity:1; transform:translateY(0) rotate(0); }
}

.loader__sub{
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-gold-soft);
  opacity:0;
  animation:fade-up .8s var(--ease) .95s forwards;
}
@keyframes fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:.9; transform:translateY(0); }
}

/* The gold rule sweeping under the mark */
.loader__rule{
  width:min(340px, 62vw);
  height:1px;
  background:var(--gold-line);
  transform:scaleX(0);
  transform-origin:left center;
  animation:rule-sweep 1.35s var(--ease) .35s forwards;
}
@keyframes rule-sweep{ to{ transform:scaleX(1); } }

/* Corner metadata */
.loader__meta{
  position:absolute;
  left:var(--gutter); right:var(--gutter); bottom:var(--s-5);
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-sans);
  font-size:var(--fs-label);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--c-gold-soft);
  opacity:0;
  animation:fade-up .7s var(--ease) .5s forwards;
  transition:opacity var(--dur-2) var(--ease);
}
.loader.is-open .loader__meta{ opacity:0; }

.loader__count{
  font-variant-numeric:tabular-nums;
  color:var(--c-ivory);
}
.loader__status{ display:inline-flex; gap:.6em; }

/* Progress hairline pinned to the very bottom */
.loader__progress{
  position:absolute; left:0; bottom:0;
  height:1px; width:100%;
  z-index:3;
  background:rgba(232,218,180,.14);
}
.loader__progress i{
  display:block;
  height:100%;
  width:0%;
  background:var(--c-gold-soft);
  transition:width .25s linear;
}

/* ==========================================================================
   PAGE TRANSITION VEIL
   Reuses the loader's panel language when navigating between pages.
   ========================================================================== */

.veil{
  position:fixed; inset:0;
  z-index:calc(var(--z-loader) - 1);
  pointer-events:none;
  display:grid;
  grid-template-rows:1fr 1fr;
}
.veil__half{
  background:var(--c-ink-deep);
  transform:scaleY(0);
  transition:transform .58s var(--ease-snap);
}
.veil__half:first-child{ transform-origin:top center; }
.veil__half:last-child{  transform-origin:bottom center; }
.veil.is-closing .veil__half{ transform:scaleY(1); }

/* ==========================================================================
   REDUCED MOTION — the theatre stands down entirely.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  .cursor-layer{ display:none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor *{ cursor:auto !important; }

  .loader{ display:none !important; }
  .veil{ display:none !important; }
}