@font-face {
    font-family: "Katibeh";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/katibeh/katibeh-regular.ttf") format("truetype");
}

/* Hidden until the local script runs, so pages remain usable without JavaScript. */
#sih-loader[hidden] { display: none; }


/* Every value reads the site's token first, then a literal fallback. */
#sih-loader{
  --bg:      var(--chrome-page, #f4f9f7);
  --heading: var(--chrome-heading, #0b3d31);
  --muted:   var(--chrome-muted, #687d76);
  --gold:    var(--chrome-gold, #c59b3b);
  --border:  var(--chrome-border, rgba(7,91,69,.14));
  --glass:   rgba(255,255,255,.62);
  --bar:     linear-gradient(90deg, var(--chrome-green-700, #0a8a68), var(--chrome-gold, #c59b3b));
  --o1:rgba(8,118,93,.30); --o2:rgba(74,160,216,.28); --o3:rgba(197,155,59,.22); --ring:rgba(8,118,93,.35);
  /* logo colours (sihatuna_mark_light.svg) */
  --c1:#006B57; --c2:#708D52; --ol:transparent; --ol-w:0; --hole:var(--bg);

  position:fixed; inset:0; z-index:99999; overflow:hidden; direction:ltr;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); color:var(--heading);
  font-family:Poppins,"Segoe UI",Tahoma,Arial,sans-serif;
  transition:opacity .6s ease .05s, visibility .6s ease .05s;
}
/* Dark = html[data-bs-theme="dark"] (these dark values are mine; the dark tokens weren't in the dump) */
html[data-bs-theme="dark"] #sih-loader{
  --bg:#06100e; --heading:#ecfff8; --muted:#8fb3a9; --gold:#d5b454; --border:rgba(236,255,248,.14);
  --glass:rgba(14,31,27,.6); --bar:linear-gradient(90deg,#19b895,#d5b454);
  --o1:rgba(25,184,149,.28); --o2:rgba(74,160,216,.20); --o3:rgba(213,180,84,.14); --ring:rgba(25,184,149,.45);
  --c1:#19B895; --c2:#A7C878; --ol:#ECFFF8; --ol-w:6; --hole:#ECFFF8;
}
@media (prefers-color-scheme:dark){
  html:not([data-bs-theme]) #sih-loader{
    --bg:#06100e; --heading:#ecfff8; --muted:#8fb3a9; --gold:#d5b454; --border:rgba(236,255,248,.14);
    --glass:rgba(14,31,27,.6); --bar:linear-gradient(90deg,#19b895,#d5b454);
    --o1:rgba(25,184,149,.28); --o2:rgba(74,160,216,.20); --o3:rgba(213,180,84,.14); --ring:rgba(25,184,149,.45);
    --c1:#19B895; --c2:#A7C878; --ol:#ECFFF8; --ol-w:6; --hole:#ECFFF8;
  }
}

/* soft drifting colour orbs */
#sih-loader::before,#sih-loader::after,.sih-orb{content:""; position:absolute; border-radius:50%; filter:blur(40px); pointer-events:none}
#sih-loader::before{width:60vmax; height:60vmax; left:-18vmax; top:-24vmax; background:radial-gradient(circle,var(--o1),transparent 65%); animation:sih-drift 14s ease-in-out infinite alternate}
#sih-loader::after{width:62vmax; height:62vmax; right:-22vmax; bottom:-28vmax; background:radial-gradient(circle,var(--o2),transparent 65%); animation:sih-drift 17s ease-in-out infinite alternate-reverse}
.sih-orb{width:34vmax; height:34vmax; right:4vmax; top:-6vmax; background:radial-gradient(circle,var(--o3),transparent 65%); animation:sih-drift 20s ease-in-out infinite alternate}

#sih-loader.is-done{opacity:0; visibility:hidden}

/* top progress line */
.sih-progress{position:absolute; top:0; left:0; height:3px; width:calc(var(--p,0) * 1%); background:var(--bar); border-radius:0 3px 3px 0; transition:width .35s ease}

/* centre stage */
.sih-stage{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px;
  transition:transform .55s ease, filter .55s ease, opacity .45s ease;
}
.is-done .sih-stage{transform:scale(1.06); filter:blur(6px); opacity:0}
.sih-stage > *{animation:sih-in .3s cubic-bezier(.2,.7,.2,1) both}
.sih-stage > :nth-child(2){animation-delay:.05s}
.sih-stage > :nth-child(3){animation-delay:.1s}

/* logo with sonar rings */
.sih-mark{position:relative; width:150px; height:150px}
.sih-mark::before,.sih-mark::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid var(--ring); opacity:0; animation:sih-ripple 2.6s ease-out infinite}
.sih-mark::after{animation-delay:1.3s}
.sih-logo{position:relative; width:100%; height:100%; overflow:visible; transform-origin:50% 55%; filter:drop-shadow(0 12px 28px rgba(8,118,93,.25)); animation:sih-beat 1.8s ease-in-out infinite}
.sih-logo .shape{stroke:var(--ol); stroke-width:var(--ol-w); stroke-linejoin:round}
.sih-logo .c1{fill:var(--c1)}
.sih-logo .c2{fill:var(--c2)}
.sih-logo .hole{fill:transparent; stroke:var(--hole); stroke-width:8}
.sih-logo .ecg{fill:none; stroke:var(--gold); stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.sih-logo .ecg.base{opacity:.25}
.sih-logo .ecg.live{stroke-dasharray:100; stroke-dashoffset:100; animation:sih-ecg 1.8s ease-in-out infinite}

/* Arabic name: gold diacritics via two layers (gold word with marks under, plain letters on top) */
.sih-name-ar{
  position:relative; display:inline-block; white-space:nowrap; margin:18px 0 0;
  font-family:"Katibeh","Cairo",Tahoma,serif; font-size:4rem; font-weight:400; line-height:1.6;
}
.sih-name-ar .tk{position:absolute; inset:0; color:var(--gold)}
.sih-name-ar .base{position:relative; color:var(--heading); -webkit-text-stroke:.5px var(--heading)}

.sih-sub{display:flex; align-items:center; gap:12px; margin:0; font-size:.9rem; font-weight:500; letter-spacing:.06em; color:var(--muted)}
.sih-sub i{width:22px; height:2px; border-radius:2px; background:var(--gold)}
.sih-sub span:last-child{color:var(--gold); font-weight:600}

/* glass status pill */
.sih-pill{
  display:flex; align-items:center; gap:12px; white-space:nowrap; margin-top:24px; padding:10px 18px;
  background:var(--glass); border:1px solid var(--border); border-radius:999px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  font-size:.82rem; color:var(--heading);
  animation:sih-in .3s .1s cubic-bezier(.2,.7,.2,1) both;
}
.sih-dot{width:8px; height:8px; border-radius:50%; background:var(--gold); animation:sih-blink 1.2s ease-in-out infinite}
.sih-pill span[lang="ar"]{font-family:Cairo,Tahoma,Arial,sans-serif}
.sih-pill b{width:1px; height:14px; background:var(--border)}

@keyframes sih-in{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes sih-ripple{0%{transform:scale(.85); opacity:.9} 100%{transform:scale(1.9); opacity:0}}
@keyframes sih-drift{from{transform:translate(0,0) scale(1)} to{transform:translate(6vmax,4vmax) scale(1.12)}}
@keyframes sih-ecg{0%{stroke-dashoffset:100} 55%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:-100}}
@keyframes sih-beat{0%,40%,100%{transform:scale(1)} 50%{transform:scale(1.04)}}
@keyframes sih-blink{0%,100%{opacity:1} 50%{opacity:.35}}

@media (max-width:480px){ .sih-name-ar{font-size:3.2rem} .sih-mark{width:128px; height:128px} .sih-pill{gap:10px; padding:9px 14px; font-size:.78rem} }
@media (prefers-reduced-motion:reduce){
  #sih-loader::before,#sih-loader::after,.sih-orb,.sih-mark::before,.sih-mark::after,.sih-logo,.sih-dot,.sih-stage > *,.sih-pill{animation:none}
  .sih-logo .ecg.live{animation:none; stroke-dashoffset:0}
  .sih-mark::before,.sih-mark::after{display:none}
  #sih-loader,.sih-stage{transition:none}
}

/* Keep both languages readable at narrow widths and with enlarged text. */
#sih-loader .sih-stage { max-width: 100%; }
#sih-loader .sih-pill { flex-wrap: wrap; justify-content: center; white-space: normal; }
#sih-loader .sih-sub { flex-wrap: wrap; justify-content: center; }