/* ============================================================
   BORAN LOADER - branded waiting state for Botterkloof Borane
   Self-contained. Uses two brand images:
     images/brand/loader-head.png        (black ink - for LIGHT surfaces)
     images/brand/loader-head-light.png  (cream ink - for DARK surfaces)
   Colours map to the design tokens in app-tokens.css.
   Component: Components/Shared/BoranLoader.razor
   ============================================================ */

.boran-loader{
  /* ---- palette (overlay + loader colours) ---- */
  --size:180px;                          /* the one knob: scales the whole loader */
  --bl-ring:var(--ochre);                /* ochre ring (light surfaces) */
  --bl-ring-soft:rgba(42,36,30,.10);     /* faint ring track */
  --bl-shine:rgba(224,164,99,.85);       /* gold ink sweep */
  --bl-cap:var(--ink-faint);             /* caption colour */
  --bl-head-mask:url(../images/brand/loader-head.png);

  display:inline-flex;flex-direction:column;align-items:center;gap:22px;
}
.boran-loader.on-dark{
  --bl-ring:#E0A463;                     /* brass-gold ring (dark surfaces) - loader accent, no token equivalent */
  --bl-ring-soft:rgba(241,234,221,.14);
  --bl-shine:rgba(255,221,170,.95);
  --bl-cap:var(--on-dark-soft);
  --bl-head-mask:url(../images/brand/loader-head-light.png);
}

.boran-loader__medallion{position:relative;width:var(--size);height:var(--size);}

.boran-loader__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.boran-loader__ring circle{fill:none;stroke-linecap:round;transform-origin:100px 100px;}
.boran-loader .ring-track{stroke:var(--bl-ring-soft);stroke-width:3;}
.boran-loader .ring-arc{stroke:var(--bl-ring);stroke-width:4;stroke-dasharray:150 600;
  animation:boran-spin 1.5s cubic-bezier(.5,.15,.4,.85) infinite;}
.boran-loader .ring-arc2{stroke:var(--bl-ring);stroke-width:2.5;opacity:.45;stroke-dasharray:40 380;
  animation:boran-spin 2.6s linear infinite reverse;}
@keyframes boran-spin{to{transform:rotate(360deg);}}

/* breathing head */
.boran-loader__head{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  animation:boran-breathe 2.8s ease-in-out infinite;}
.boran-loader__head img{width:72%;height:auto;display:block;
  filter:drop-shadow(0 4px 10px rgba(42,36,30,.10));}
.boran-loader.on-dark .boran-loader__head img{filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));}
@keyframes boran-breathe{0%,100%{transform:scale(.97);}50%{transform:scale(1.03);}}

/* gold ink shimmer - clipped to the head silhouette */
.boran-loader__shine{position:absolute;top:0;left:50%;width:72%;height:100%;
  transform:translateX(-50%);pointer-events:none;
  -webkit-mask:var(--bl-head-mask) center/contain no-repeat;
          mask:var(--bl-head-mask) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 38%,var(--bl-shine) 50%,transparent 62%);
  background-size:260% 100%;
  animation:boran-shine 2.8s ease-in-out infinite;}
@keyframes boran-shine{0%{background-position:150% 0;}55%,100%{background-position:-60% 0;}}

/* caption */
.boran-loader__caption{margin:0;font-family:var(--serif);
  font-style:italic;font-weight:500;font-size:calc(var(--size)*.13);letter-spacing:.01em;
  color:var(--bl-cap);line-height:1;}
.boran-loader__caption .dots i{font-style:normal;opacity:0;animation:boran-dot 1.4s infinite;}
.boran-loader__caption .dots i:nth-child(2){animation-delay:.2s;}
.boran-loader__caption .dots i:nth-child(3){animation-delay:.4s;}
@keyframes boran-dot{0%,100%{opacity:0;}40%{opacity:1;}}

/* Reduce-motion: no spin/scale/sweep - keep a gentle pulse so it still reads as active */
@media (prefers-reduced-motion:reduce){
  .boran-loader__head{animation:boran-fade-soft 1.8s ease-in-out infinite;}
  .boran-loader__shine{display:none;}
  .boran-loader .ring-arc{animation:boran-fade 1.4s ease-in-out infinite;}
  .boran-loader .ring-arc2{animation:boran-fade 1.4s ease-in-out infinite;animation-delay:.7s;}
  .boran-loader__caption .dots i{opacity:1;}
}
@keyframes boran-fade{0%,100%{opacity:1;}50%{opacity:.2;}}
@keyframes boran-fade-soft{0%,100%{opacity:1;}50%{opacity:.55;}}

/* ---- full-screen overlay ---- */
.boran-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(244,239,230,.86);          /* bone scrim - light */
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;}
.boran-overlay.is-on{opacity:1;visibility:visible;}
.boran-overlay.on-dark{background:rgba(34,29,24,.9);}  /* espresso scrim - dark */

/* ---- inline block helper: centre the loader in a section while data loads ---- */
.boran-loader-block{display:flex;justify-content:center;padding:clamp(32px,6vw,72px) 0;}