/* Branded loading screen, ported from NAVRYA-web's src/components/loader/Loader.tsx +
 * Loader.module.css (the compass-ring mark drawn like a bow while the page loads, a tracer that
 * leaves through the ring's gap on exit). CSS Modules' scoped class names become plain
 * `.navrya-loader-*` classes here - there is no CSS Modules tooling in this repo, so uniqueness
 * is by naming convention instead.
 *
 * Shown/hidden by navrya-loader.js toggling `data-navrya-loading` on <html> (mirrors the
 * source's `html[data-loading]` gate) rather than a React conditional render.
 */
.navrya-loader {
  --S: min(72vw, 46vh, 460px);
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  overflow: hidden;
  color: #f4ead7;
  font-family: "Satoshi", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  contain: strict;
}

html[data-navrya-loading] .navrya-loader {
  display: block;
}

/* Clicks pass through once it has let go. */
.navrya-loader[data-leaving] {
  pointer-events: none;
}

.navrya-loader-ground {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 62% at 50% 44%, #0a100f 0%, #060b0a 52%, #030807 100%);
}

.navrya-loader-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 4vh;
}

.navrya-loader-wrap {
  position: relative;
  inline-size: var(--S);
  block-size: var(--S);
  flex: none;
  /* The mark is a mark: it does not mirror in a right-to-left page. */
  direction: ltr;
}

/* The exit's aperture: dark everywhere but a soft hole at the gap's mouth. Only ever scaled and
 * faded. */
.navrya-loader-aperture {
  position: absolute;
  left: 84.167%;
  top: 14.225%;
  inline-size: 170vmax;
  block-size: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle closest-side,
    rgba(3, 8, 7, 0) 0%,
    rgba(3, 8, 7, 0) 1.6%,
    rgba(3, 8, 7, 0.55) 5.5%,
    rgba(3, 8, 7, 0.9) 9%,
    #030807 13%
  );
}

.navrya-loader-mark,
.navrya-loader-fx {
  position: absolute;
  inset: 0;
}

.navrya-loader-mark {
  transform-origin: 84.167% 14.225%;
}

.navrya-loader-layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  display: block;
}

/* A slow warmth behind the ring. */
.navrya-loader-amb {
  position: absolute;
  left: -28%;
  top: -24%;
  inline-size: 150%;
  block-size: 150%;
  border-radius: 50%;
  background: radial-gradient(
    circle closest-side,
    rgba(214, 175, 107, 0.085) 0%,
    rgba(214, 175, 107, 0.035) 42%,
    rgba(214, 175, 107, 0) 100%
  );
  animation: navrya-loader-breathe 7s ease-in-out infinite alternate;
}

@keyframes navrya-loader-breathe {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* The string, from both tips of the ring to the needle's tail: two 1px lines placed with
 * transforms, and a glint that runs down them. */
.navrya-loader-strings {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.navrya-loader-strings i {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 50%;
  will-change: transform;
}

.navrya-loader-str {
  inline-size: 100px;
  block-size: 1px;
  margin-top: -0.5px;
  background: rgba(247, 230, 196, 0.78);
}

.navrya-loader-gl {
  inline-size: 26px;
  block-size: 2px;
  margin-top: -1px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 246, 224, 0), rgba(255, 248, 232, 0.95) 55%, rgba(255, 246, 224, 0));
}

.navrya-loader-wedge {
  will-change: transform;
}

/* The light riding the drawn ring: a trail behind its head, clipped to the ring's band and kept
 * off the gap. */
.navrya-loader-band {
  position: absolute;
  left: 0.651%;
  top: 4.112%;
  inline-size: 93.629%;
  block-size: 93.629%;
  -webkit-mask-image:
    radial-gradient(circle closest-side, transparent 75.3%, #000 76.1%, #000 96.2%, transparent 97%),
    conic-gradient(#000 0deg 14.5deg, transparent 14.5deg 78.5deg, #000 78.5deg);
  mask-image:
    radial-gradient(circle closest-side, transparent 75.3%, #000 76.1%, #000 96.2%, transparent 97%),
    conic-gradient(#000 0deg 14.5deg, transparent 14.5deg 78.5deg, #000 78.5deg);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.navrya-loader-trail {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: transform;
  background: conic-gradient(
    rgba(255, 238, 205, 0) 0deg 46deg,
    rgba(255, 238, 205, 0.1) 62deg,
    rgba(255, 240, 212, 0.3) 78deg,
    rgba(255, 243, 220, 0.62) 89.6deg,
    rgba(255, 243, 220, 0) 90.1deg 360deg
  );
}

.navrya-loader-thrum {
  opacity: 0;
  background: rgba(255, 238, 206, 0.55);
}

/* The head of the light. */
.navrya-loader-ember-rot {
  position: absolute;
  inset: 0;
  transform-origin: 47.466% 50.926%;
  will-change: transform;
}

.navrya-loader-ember {
  position: absolute;
  left: 87.767%;
  top: 50.926%;
  inline-size: 34%;
  block-size: 34%;
  transform: translate(-50%, -50%);
}

.navrya-loader-ember b {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.navrya-loader-halo {
  inset: 0;
  background: radial-gradient(
    circle closest-side,
    rgba(236, 196, 120, 0.34) 0%,
    rgba(216, 166, 75, 0.13) 38%,
    rgba(216, 166, 75, 0) 100%
  );
  animation: navrya-loader-ember-pulse 2.6s ease-in-out infinite alternate;
}

.navrya-loader-flare {
  left: 47.6%;
  top: 6%;
  inline-size: 4.8%;
  block-size: 88%;
  background: radial-gradient(closest-side, rgba(255, 240, 214, 0.6), rgba(255, 236, 200, 0.18) 55%, rgba(255, 236, 200, 0));
}

.navrya-loader-core {
  left: 38.5%;
  top: 38.5%;
  inline-size: 23%;
  block-size: 23%;
  background: radial-gradient(
    circle closest-side,
    #fffdf6 0%,
    #fff2d4 30%,
    rgba(246, 212, 150, 0.5) 62%,
    rgba(226, 180, 100, 0) 100%
  );
}

@keyframes navrya-loader-ember-pulse {
  from { opacity: 0.6; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1.06); }
}

/* The release. */
.navrya-loader-flash {
  position: absolute;
  left: 81.703%;
  top: 19.152%;
  inline-size: 56%;
  block-size: 56%;
  margin: -28% 0 0 -28%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle closest-side,
    rgba(255, 244, 222, 0.6) 0%,
    rgba(236, 196, 120, 0.26) 30%,
    rgba(216, 166, 75, 0.07) 60%,
    rgba(216, 166, 75, 0) 100%
  );
}

.navrya-loader-shot {
  position: absolute;
  left: 81.703%;
  top: 19.152%;
  inline-size: 0;
  block-size: 0;
  transform: rotate(-45deg);
}

.navrya-loader-shot-line {
  position: absolute;
  right: 0;
  top: -1px;
  block-size: 2px;
  inline-size: 600px;
  transform-origin: 100% 50%;
  opacity: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(214, 175, 107, 0) 0%, rgba(236, 200, 140, 0.5) 9%, rgba(255, 234, 196, 0.88) 55%, #fffcf3 100%);
  box-shadow: 0 0 7px 1px rgba(255, 214, 150, 0.28);
}

.navrya-loader-shot-head {
  position: absolute;
  left: -9px;
  top: -9px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle closest-side, #fffdf6 0%, rgba(255, 236, 196, 0.7) 35%, rgba(236, 196, 120, 0) 100%);
}

/* The number and the word under it. */
.navrya-loader-readout {
  margin-top: calc(var(--S) * 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--S) * 0.02 + 5px);
}

.navrya-loader-num {
  display: flex;
  align-items: flex-start;
  direction: ltr;
  font: 300 calc(var(--S) * 0.11 + 8px) / 1 "Satoshi", system-ui, sans-serif;
  color: #f4ead7;
}

.navrya-loader-digits {
  display: flex;
}

/* Fixed cells over proportional figures, so the number never shifts sideways. */
.navrya-loader-digits span {
  display: block;
  inline-size: 0.565em;
  text-align: center;
}

.navrya-loader-digits span::before {
  content: attr(data-d);
}

.navrya-loader-digits span[data-d=""] {
  display: none;
}

.navrya-loader-pct {
  font-size: 0.4em;
  line-height: 1;
  color: #d6af6b;
  margin: 0.13em 0 0 0.12em;
}

.navrya-loader-cap {
  font: 400 clamp(9.5px, calc(var(--S) * 0.012 + 7px), 12px) / 1.2 "Cinzel", serif;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgba(244, 234, 215, 0.56);
  white-space: nowrap;
}

/* Persian and Arabic: Peyda draws the figures in the script's own digits. Its figures are
 * proportional (۱ narrow, ۳ wide), so the cells are wider. */
html[dir="rtl"] .navrya-loader-num {
  font-family: "Peyda", system-ui, sans-serif;
  font-weight: 400;
  font-size: calc((var(--S) * 0.11 + 8px) * 0.92);
}

html[dir="rtl"] .navrya-loader-digits span {
  inline-size: 0.65em;
}

html[dir="rtl"] .navrya-loader-pct {
  font-size: 0.44em;
  margin: 0.1em 0 0 0.2em;
}

/* For a line that will not come: a way in without the rest of the page. */
.navrya-loader-enter {
  all: unset;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 9px 18px;
  border: 1px solid rgba(214, 175, 107, 0.34);
  border-radius: 999px;
  font: 500 12px / 1 "Satoshi", "Peyda", system-ui, sans-serif;
  letter-spacing: 0.06em;
  color: rgba(244, 234, 215, 0.82);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.navrya-loader-enter[hidden] {
  display: none;
}

.navrya-loader-enter[data-shown] {
  opacity: 1;
}

.navrya-loader-enter:hover {
  border-color: #d6af6b;
  background: rgba(214, 175, 107, 0.08);
}

.navrya-loader-enter:focus-visible {
  outline: 2px solid #d6af6b;
  outline-offset: 3px;
}

/* Reduced motion: the same idea, nothing travels. The ring still fills and the needle brightens;
 * the exit is a cross-fade. */
.navrya-loader[data-calm] .navrya-loader-strings,
.navrya-loader[data-calm] .navrya-loader-ember-rot,
.navrya-loader[data-calm] .navrya-loader-band {
  display: none;
}

.navrya-loader[data-calm] .navrya-loader-amb {
  animation: none;
  opacity: 0.8;
}

.navrya-loader[data-calm] .navrya-loader-cap {
  animation: navrya-loader-pulse 3.6s ease-in-out infinite alternate;
}

@keyframes navrya-loader-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}