/* Gloria live hero (ported from the gloria-c.com project): Signature mode, royal-blue depth, metallic gold, glow.
   Layers, back to front: gradient → grid → fibre canvas → copy + HUD. The five pillars orbit the mark as real links.
   Root class is .ghero (not .hero) so it never collides with other site styles. Tokens are scoped to the hero.
   Motion is opt-in: nothing moves under prefers-reduced-motion, and looping motion pauses off-screen. */

.ghero {
  /* ---- scoped tokens (original Gloria tokens.css values) ---- */
  --navy: #001B4D; --royal: #003B83; --deep: #00102F; --gold: #D89512; --gold-hi: #F3B62C;
  --sky: #5AB0FF; --sky-soft: #9CCBFF; --white: #FFFFFF;
  --on-dark: #FFFFFF; --on-dark-2: rgba(255, 255, 255, .84); --line-dark: rgba(255, 255, 255, .16);
  --glow-gold: 0 0 24px rgba(243, 182, 44, .35);
  --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --grid-gap: clamp(16px, 2vw, 24px); --header-h: 125px; --tap: 44px;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-lg: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  --fs-display: clamp(2.5rem, 1.1rem + 5vw, 4.75rem);
  --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --bw: 1px; --bw-strong: 2px;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 150ms; --dur-2: 250ms; --dur-3: 450ms; --dur-4: 800ms;
  --font-display: 'Poppins', 'Tajawal', system-ui, sans-serif;
  --font-mono: 'Share Tech Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --to-end: right; --origin-start: left;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(600px, calc(100svh - var(--header-h) - 3px), 900px);
  overflow: hidden;
  background:
    radial-gradient(70% 90% at var(--visual-x, 75%) 46%, #0B3F8E 0%, #062B6E 34%, transparent 72%),
    linear-gradient(180deg, var(--navy) 0%, var(--deep) 100%);
  color: var(--on-dark-2);
}
[dir="rtl"] .ghero { --visual-x: 25%; --to-end: left; --origin-start: right; --font-display: 'Tajawal', 'Poppins', system-ui, sans-serif; }
.ghero h1 { color: var(--on-dark); }
.ghero :focus-visible { outline-color: var(--gold-hi); }
.hero__fiber {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to var(--to-end), rgba(0, 0, 0, .28) 0, #000 58%);
  mask-image: linear-gradient(to var(--to-end), rgba(0, 0, 0, .28) 0, #000 58%);
}
.hero__grid-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(124, 200, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 200, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at var(--visual-x, 75%) 46%, #000 0, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 80% at var(--visual-x, 75%) 46%, #000 0, transparent 78%);
}
/* bottom edge: hairline with gold centre */
.ghero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: linear-gradient(to var(--to-end), transparent, rgba(243, 182, 44, .8) 50%, transparent);
}

.hero__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap);
  align-items: center; padding-block: var(--s-8) var(--s-6);
}
.hero__copy { grid-column: span 6; }
.hero__inner > .hud { grid-column: span 6; }

/* eyebrow (gold diamond + label) */
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; color: var(--gold-hi);
}
.hero__eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--gold-hi); transform: rotate(45deg); box-shadow: 0 0 12px rgba(243, 182, 44, .8); }
html[lang="en"] .hero__eyebrow { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }

.hero__title { margin: 0 0 var(--s-5); font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; line-height: 1.18; }
html[lang="en"] .hero__title { font-size: clamp(2.25rem, 1rem + 4.8vw, 4.5rem); line-height: 1.05; text-transform: uppercase; }
.hero__line { display: block; }
.hero__line--accent { position: relative; display: inline-block; color: var(--gold-hi); }
.hero__line--accent::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -.02em; height: .07em; border-radius: 2px;
  background: linear-gradient(to var(--to-end), var(--gold-hi), var(--gold)); box-shadow: var(--glow-gold);
}
.ghero .lead { max-width: 62ch; margin: 0; font-size: var(--fs-lg); line-height: 1.85; color: var(--on-dark-2); }

/* buttons (original Gloria .btn) */
.ghero .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.ghero .btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: var(--s-3) var(--s-5); overflow: hidden;
  border: var(--bw-strong) solid transparent; border-radius: var(--r-md);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; box-shadow: none;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1), translate var(--dur-2);
}
.ghero .btn:active { transform: scale(.97); }
.ghero .btn--gold { background: var(--gold-hi); color: var(--navy); }
.ghero .btn--gold:hover { background: #FFC845; box-shadow: var(--glow-gold); }
.ghero .btn--ghost-light { border-color: rgba(255, 255, 255, .55); background: transparent; color: var(--white); }
.ghero .btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .1); }

.hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap);
  margin: 0 0 var(--s-7); padding: 0; list-style: none;
}
.hero__facts li {
  position: relative; display: flex; align-items: center;
  padding: var(--s-4); padding-inline-start: var(--s-6);
  border: var(--bw) solid var(--line-dark); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--on-dark); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 400;
}
.hero__facts li::before { content: ""; position: absolute; inset-inline-start: var(--s-4); top: 50%; margin-top: -3.5px; width: 7px; height: 7px; background: var(--gold-hi); transform: rotate(45deg); }

/* ---------- HUD ---------- */
.hud { position: relative; isolation: isolate; container-type: inline-size; width: min(100%, 640px); aspect-ratio: 1; margin-inline: auto; }
.hud > * { position: absolute; }
.hud__rings { inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring { transform-box: view-box; transform-origin: center; fill: none; }
.ring--dots { stroke: var(--sky); stroke-opacity: .32; stroke-width: 1.4; stroke-dasharray: 1 9; }
.ring--arcs { stroke: var(--gold-hi); stroke-width: 2.2; stroke-dasharray: 230 70 110 50 60 90; stroke-opacity: .9; }
.ring--ticks { stroke: var(--sky-soft); stroke-opacity: .38; stroke-width: 10; stroke-dasharray: 2 12.965; }
.ring--bold { stroke: url(#hud-grad); stroke-width: 5; stroke-dasharray: 300 100 150 80; }
.ring--dash { stroke: var(--gold-hi); stroke-opacity: .6; stroke-width: 1.5; stroke-dasharray: 6 6; }
.ring--static { stroke: var(--sky); stroke-opacity: .2; stroke-width: 1; }
.ring--orbit { stroke: var(--sky-soft); stroke-opacity: .36; stroke-width: 1.2; stroke-dasharray: 3 7; }
.ring--notch { stroke: var(--gold-hi); stroke-width: 3; stroke-opacity: .9; }

.hud__glow {
  left: 50%; top: 50%; z-index: 0; width: 74%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 150, 255, .62) 0, rgba(0, 70, 160, .38) 42%, transparent 70%);
  filter: blur(12px);
}
.hud__sweep {
  inset: 6%; z-index: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 240deg, rgba(90, 176, 255, .30) 350deg, rgba(180, 225, 255, .55) 359deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 34%, #000 35%);
  mask-image: radial-gradient(circle, transparent 0 34%, #000 35%);
}
.hud__pulse { left: 50%; top: 50%; z-index: 0; width: 56%; aspect-ratio: 1; translate: -50% -50%; border: 1px solid rgba(124, 200, 255, .55); border-radius: 50%; opacity: 0; }

.hud__core { left: 50%; top: 50%; z-index: 2; width: 52%; aspect-ratio: 900 / 865; translate: -50% -50%; pointer-events: none; will-change: transform; }
.hud__core picture, .hud__core img { display: block; }
.hud__icon {
  width: 100%; height: 100%; object-fit: contain;
  /* rim light: the navy head would vanish on navy, so a thin sky-blue edge and a soft halo outline it */
  filter: drop-shadow(0 0 1.5px rgba(150, 210, 255, .95)) drop-shadow(0 0 16px rgba(60, 140, 255, .55));
}
.hud__scan {
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(190, 232, 255, .95) 50%, transparent) 0 -43% / 100% 30% no-repeat;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
}

/* no z-index on the list itself: it must not form a stacking context, so far-side nodes can sit behind the mark */
.hud__orbit { inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.hud__orbit li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.hud__orbit li:nth-child(1) { --x: 31cqw; --y: -6cqw; }
.hud__orbit li:nth-child(2) { --x: 14cqw; --y: -12cqw; }
.hud__orbit li:nth-child(3) { --x: -26cqw; --y: -10cqw; }
.hud__orbit li:nth-child(4) { --x: -30cqw; --y: 8cqw; }
.hud__orbit li:nth-child(5) { --x: 8cqw; --y: 14cqw; }
.hud__orbit li { transform: translate(var(--x, 0), var(--y, 0)) scale(var(--sc, 1)); opacity: var(--o, 1); }
.hud__node {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  translate: -50% -50%; pointer-events: auto; color: var(--on-dark); text-decoration: none;
}
.hud__dot {
  display: grid; place-items: center; width: max(var(--tap), 9cqw); height: max(var(--tap), 9cqw);
  border: 1px solid rgba(150, 210, 255, .6); border-radius: 50%; background: rgba(0, 27, 77, .72);
  box-shadow: 0 0 20px rgba(90, 176, 255, .45), inset 0 0 14px rgba(90, 176, 255, .25);
  color: var(--gold-hi); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform var(--dur-3) var(--ease-spring), background-color var(--dur-2), box-shadow var(--dur-2);
}
.hud__dot .icon { width: clamp(18px, 4cqw, 26px); height: clamp(18px, 4cqw, 26px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hud__tag {
  padding: .25em .75em; border: 1px solid var(--line-dark); border-radius: var(--r-pill); background: rgba(0, 16, 47, .78);
  font-family: var(--font-display); font-size: clamp(.7rem, 2.3cqw, .9rem); white-space: nowrap;
}
@media (hover: hover) {
  .hud__node:hover .hud__dot, .hud__node:focus-visible .hud__dot { transform: scale(1.14); background: var(--navy); box-shadow: 0 0 30px rgba(243, 182, 44, .6), inset 0 0 14px rgba(243, 182, 44, .3); }
  .hud__node:hover .hud__tag, .hud__node:focus-visible .hud__tag { border-color: var(--gold-hi); color: var(--gold-hi); }
}

.hud__readout {
  z-index: 3; margin: 0; font-family: var(--font-mono); font-size: clamp(.6rem, 1.9cqw, .78rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--sky-soft); direction: ltr;
}
.hud__readout::after { content: "_"; margin-inline-start: .15em; color: var(--gold-hi); }
.hud__readout--tl { top: 1%; left: 1%; }
.hud__readout--br { bottom: 1%; right: 1%; }
.hud__bracket { z-index: 3; width: 8cqw; height: 8cqw; border: 0 solid rgba(124, 200, 255, .55); }
.hud__bracket--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.hud__bracket--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.hud__bracket--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.hud__bracket--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes glow-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes sonar { 0% { opacity: .7; scale: .9; } 100% { opacity: 0; scale: 1.55; } }
@keyframes scan { 0% { background-position: 0 -43%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { background-position: 0 143%; opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .82; } 50% { opacity: 1; } 78% { opacity: .9; } 79% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes boot-ring { from { opacity: 0; scale: .84; } }
@keyframes boot-wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes boot-fade { from { opacity: 0; } }
@keyframes boot-pop { from { opacity: 0; scale: .5; } }
@keyframes boot-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes rule { from { transform: scaleX(0); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes word-in { from { opacity: 0; transform: translateY(.55em) rotateX(-55deg); filter: blur(8px); } }
@keyframes force-show { to { opacity: 1; transform: none; filter: none; } }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }

.hx { perspective: 700px; }
.hx .w { display: inline-block; }
.hx .w:nth-child(2) { --i: 1; } .hx .w:nth-child(3) { --i: 2; } .hx .w:nth-child(4) { --i: 3; }
.hx .w:nth-child(5) { --i: 4; } .hx .w:nth-child(n + 6) { --i: 5; }
.hero__title { --hd: 120ms; }

@media (prefers-reduced-motion: no-preference) {
  /* each ring: [boot, loop]. The boot always runs; the loop waits for .is-live (set by JS while visible). */
  .ring--dots { animation: boot-ring 1.4s var(--ease-out) 0ms backwards, spin 120s linear infinite; }
  .ring--arcs { animation: boot-ring 1.4s var(--ease-out) 120ms backwards, spin-rev 46s linear infinite; }
  .ring--ticks { animation: boot-ring 1.4s var(--ease-out) 240ms backwards, spin 90s linear infinite; }
  .ring--bold { animation: boot-ring 1.4s var(--ease-out) 360ms backwards, spin 30s linear infinite; }
  .ring--dash { animation: boot-ring 1.4s var(--ease-out) 480ms backwards, spin-rev 70s linear infinite; }
  .ring--static, .ring--orbit, .ring--notch { animation: boot-ring 1.4s var(--ease-out) 600ms backwards; }

  .hud__sweep { animation: spin 7s linear infinite; }
  .hud__glow { animation: glow-breathe 5s ease-in-out infinite; }
  .hud__pulse { animation: sonar 4.4s ease-out infinite; }
  .hud__pulse--b { animation-delay: 2.2s; }
  .hud__scan { animation: scan 4.2s ease-in-out 2.2s infinite; }
  .hud__icon { animation: flicker 7s steps(1, end) infinite; }
  .hud__readout::after { animation: blink 1s steps(1, end) infinite; }

  .hud__core { animation: boot-wipe .6s var(--ease-out) backwards; } /* short: the mark is the LCP element */
  .hud__node { animation: boot-pop .9s var(--ease-spring) calc(1.1s + var(--n, 0) * 120ms) backwards; }
  .hud__orbit li:nth-child(2) .hud__node { --n: 1; } .hud__orbit li:nth-child(3) .hud__node { --n: 2; }
  .hud__orbit li:nth-child(4) .hud__node { --n: 3; } .hud__orbit li:nth-child(5) .hud__node { --n: 4; }
  .hud__readout, .hud__bracket { animation: boot-fade .8s ease 1.3s backwards; }
  .hero__line--accent::after { transform-origin: var(--origin-start); animation: rule 1.1s var(--ease-out) 1.1s backwards; }
  .hero__facts li { animation: boot-up .9s var(--ease-out) calc(1.3s + var(--n, 0) * 90ms) backwards; }
  .hero__facts li:nth-child(2) { --n: 1; } .hero__facts li:nth-child(3) { --n: 2; } .hero__facts li:nth-child(4) { --n: 3; }

  /* Play-state comes LAST: an `animation` shorthand resets it, so these must follow every shorthand above. */
  .ring { animation-play-state: running, paused; }
  .ring--static, .ring--orbit, .ring--notch { animation-play-state: running; }
  .hud__sweep, .hud__glow, .hud__pulse, .hud__scan, .hud__icon, .hud__readout::after { animation-play-state: paused; }
  .is-live .ring { animation-play-state: running, running; }
  .is-live .ring--static, .is-live .ring--orbit, .is-live .ring--notch { animation-play-state: running; }
  .is-live .hud__sweep, .is-live .hud__glow, .is-live .hud__pulse, .is-live .hud__scan, .is-live .hud__icon, .is-live .hud__readout::after { animation-play-state: running; }
}

/* Word and fade reveals — only when scripting is on (a JS failure can never hide the copy). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ghero [data-reveal]:not(.is-in), .hx:not(.is-in) .w { opacity: 0; animation: force-show 0s 2.5s forwards; }
  .ghero [data-reveal].is-in { animation: rise var(--dur-4) var(--ease-out) var(--d, 0ms) backwards; }
  .ghero [data-reveal="fade"].is-in { animation-name: fade-in; }
  .hx.is-in .w { animation: word-in .85s var(--ease-out) calc(var(--i, 0) * 70ms + var(--hd, 0ms)) backwards; }
  .hx:not(.is-in) .hero__line--accent .w { -webkit-text-fill-color: transparent; }

  /* hero accent line: light sweeps across the gold words (paused while off-screen) */
  .hero__line--accent .w {
    background: linear-gradient(100deg, var(--gold-hi) 42%, #FFF6DA 50%, var(--gold-hi) 58%) 130% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  .hx.is-in .hero__line--accent .w {
    animation: word-in 1s var(--ease-out) calc(var(--i, 0) * 70ms + var(--hd, 0ms)) backwards, shine 6s linear 2.4s infinite;
    animation-play-state: running, paused;
  }
  .ghero.is-live .hx.is-in .hero__line--accent .w { animation-play-state: running, running; }
}

/* ---------- responsive: lg 1024 · md 768 · sm 640 ---------- */
@media (max-width: 1023px) {
  .ghero { min-height: 0; }
  .hero__inner { padding-block: var(--s-7) var(--s-5); }
  .hero__copy, .hero__inner > .hud { grid-column: 1 / -1; }
  .hero__inner > .hud { width: min(100%, 480px); margin-top: var(--s-4); }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero__inner > .hud { width: min(100%, 420px); margin-top: var(--s-2); }
  .hero__title { font-size: clamp(2.5rem, 1rem + 8vw, 3.75rem); }
}
@media (max-width: 639px) {
  .hero__facts { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .hero__facts li { padding: var(--s-3); padding-inline-start: var(--s-5); font-size: var(--fs-xs); }
  .hero__facts li::before { inset-inline-start: var(--s-3); }
  .hud__tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; }
}
@media (min-width: 1920px) {
  .ghero { min-height: min(900px, calc(100svh - var(--header-h))); }
}