/* SK Arabians — the shared design language of the website and the Management System (both load it right after
   tokens.css). One place for: the type scale, spacing, radius, shadows, glass, motion extras, the metallic gold and the
   brand motifs, plus the few utilities and keyframes both use. Colours come only from tokens.css (the website brand
   family, which the staff system now shares); each product then sets its own colour roles (site.css / portal.css).
   Glass tokens below are tuned for dark surfaces; a light surface redefines --glass-* (portal.css, .section-light). */

:root {
  /* metallic gold: a brushed gradient of the three golds (key words, rules, primary buttons, the preloader) */
  --metal: linear-gradient(100deg, var(--c-gold-soft) 0%, var(--c-gold-2) 28%, var(--c-gold) 52%, var(--c-gold-soft) 74%, var(--c-gold-2) 100%);
  --metal-line: linear-gradient(90deg, transparent, var(--c-gold) 20%, var(--c-gold-soft) 50%, var(--c-gold) 80%, transparent);

  /* type scale (fluid). Display = hero; h1 = page titles; h2 = sections; h3 = blocks */
  --t-display: clamp(3.25rem, 1.4rem + 7.2vw, 9rem);
  --t-h1: clamp(2.75rem, 1.5rem + 5vw, 6.25rem);
  --t-h2: clamp(2.25rem, 1.4rem + 3.3vw, 4.5rem);
  --t-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  --t-h4: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --t-lead: clamp(1.125rem, 1.02rem + .4vw, 1.375rem);
  --t-body: 1rem;
  --t-small: .875rem;
  --t-caps: .75rem;
  --lh-display: .98;
  --lh-head: 1.06;
  --track-display: -.022em;
  --track-caps: .2em;

  /* spacing (8px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 192px;

  /* radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px;

  /* shadows and glows (deep navy, never black) */
  --sh-1: 0 2px 8px -2px color-mix(in srgb, var(--c-navy-deep) 50%, transparent);
  --sh-2: 0 18px 40px -18px color-mix(in srgb, var(--c-navy-deep) 80%, transparent);
  --sh-3: 0 40px 90px -30px color-mix(in srgb, var(--c-navy-deep) 95%, transparent);
  --sh-gold: 0 0 0 1px color-mix(in srgb, var(--c-gold-2) 40%, transparent), 0 18px 50px -14px color-mix(in srgb, var(--c-gold-2) 40%, transparent);

  /* glass (dark surfaces) */
  --glass-bg: color-mix(in srgb, var(--c-ivory) 8%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--c-navy-ink) 62%, transparent);
  --glass-bg-light: color-mix(in srgb, var(--c-white) 55%, transparent);
  --glass-solid: var(--c-navy-ink);
  --glass-edge: color-mix(in srgb, var(--c-gold-soft) 22%, transparent);
  --glass-edge-hot: color-mix(in srgb, var(--c-gold-2) 70%, transparent);
  --glass-highlight: inset 0 1px 0 color-mix(in srgb, var(--c-white) 14%, transparent);
  --glass-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c-navy-deep) 90%, transparent);
  --glass-blur: blur(20px) saturate(160%);

  /* light fields */
  --aurora-gold: color-mix(in srgb, var(--c-gold-2) 34%, transparent);
  --aurora-navy: color-mix(in srgb, var(--c-navy-2) 70%, transparent);
  --shimmer: linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--c-gold-soft) 80%, transparent) 46%, var(--c-gold-2) 50%, color-mix(in srgb, var(--c-gold-soft) 80%, transparent) 54%, transparent 70%);

  /* motion: tokens.css has --dur-xs … --dur-xl, --dur-ambient, --ease-out-expo, --ease-in-out-quint, --ease-spring, --stagger */
  --dur-2xl: 1800ms;

  /* motifs: the eight-pointed star lattice (a mask, painted in gold at low opacity), the SK mark, film grain */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Crect x='25' y='25' width='22' height='22'/%3E%3Crect x='25' y='25' width='22' height='22' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='4'/%3E%3Cpath d='M0 0l9 9M72 0l-9 9M0 72l9-9M72 72l-9-9'/%3E%3C/g%3E%3C/svg%3E");
  --mark-img: url("../img/sk-mark-white.png"); /* not "--mark": the portal uses that name for a colour */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Arabic: the display faces run larger, so the scale steps down; generous line height for the joined letters */
html[dir="rtl"] {
  --t-display: clamp(2.75rem, 1.3rem + 5.6vw, 7rem);
  --t-h1: clamp(2.4rem, 1.4rem + 4vw, 5rem);
  --t-h2: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  --lh-display: 1.28; --lh-head: 1.3; --track-display: 0; --track-caps: 0;
}

/* ---- Utilities ---- */
/* metallic gold words: a brushed gradient clipped to the letters (solid gold where clipping is unsupported) */
.gold-text { color: var(--c-gold-2); background: var(--metal); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .gold-text { -webkit-text-fill-color: currentColor; background: none; } }
.rule-gold { display: block; height: 1px; border: 0; margin: 0; background: var(--metal-line); }
/* Glass: frosted panels. .glass follows the surface's --glass-* tokens, .glass-dark is a deeper navy tint, .glass-light
   is for light surfaces. Text contrast is checked against the solid fallback used where blur is unsupported. */
.glass, .glass-dark { background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-highlight), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.glass-dark { background: var(--glass-bg-strong); }
.glass-light { background: var(--glass-bg-light); border: 1px solid color-mix(in srgb, var(--c-gold) 28%, transparent);
  box-shadow: inset 0 1px 0 var(--c-white), 0 24px 60px -30px color-mix(in srgb, var(--c-navy) 45%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-dark { background: var(--glass-solid); }
  .glass-light { background: var(--c-white); }
}
/* masked headlines (split_title()): every word in a mask; a page decides when they rise */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .06em .14em; margin-block: -.06em -.14em; }
.split .w > span { display: inline-block; }
html[dir="rtl"] .split .w { padding-block: .16em .24em; margin-block: -.16em -.24em; }
/* the cursor ring (computers with a mouse, motion allowed): trails the pointer, opens over links; the system pointer stays */
.cursor { position: fixed; top: 0; left: 0; z-index: var(--z-tooltip); width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0;
  transition: opacity var(--dur-md) var(--ease-out); will-change: transform; }
.cursor::before { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--c-gold-soft) 70%, transparent); border-radius: 50%; transform: scale(.52);
  transition: transform var(--dur-md) var(--ease-out-expo), background-color var(--dur-md) var(--ease-out), border-color var(--dur-md) var(--ease-out); }
.cursor.on { opacity: 1; }
.cursor.hot::before { transform: none; background: color-mix(in srgb, var(--c-gold-soft) 10%, transparent); border-color: var(--c-gold-2); }
.cursor.down::before { transform: scale(.4); }
@media (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }

/* ---- Keyframes ---- */
@keyframes word-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vw, 6vh, 0) scale(1.15); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(10vw, -8vh, 0) scale(.95); } }
@keyframes ken-burns { from { transform: scale(1.12) translate3d(-1.5%, 1%, 0); } to { transform: scale(1.02) translate3d(1%, -1%, 0); } }
@keyframes ken-burns-2 { from { transform: scale(1.02) translate3d(1.5%, -1%, 0); } to { transform: scale(1.12) translate3d(-1%, 1%, 0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes light-pass { to { transform: translateX(100%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }