/*
 * About page (.page-head--about, .about-sec). Loaded on the About page only; js/about.js adds the reveal, the scroll-filled rail and the pointer light.
 * Header: two slow glows and a faint moving grid behind the title, the title and lead rise in, a gold line draws under the title, a flowing line links an
 * Arabic and a Latin letter (the product is bilingual) and the four principles appear as quick links to their cards.
 * Story: a gold rail runs down the left (right in Arabic) and fills as you read; every heading gets a numbered badge, the lists get pulsing gold dots.
 * Cards: an icon tile, a large faint number, a moving gold edge, a light that follows the pointer and a small tilt (mouse only).
 * Only transform / opacity / background-position move; everything stops under prefers-reduced-motion; without the script all of it is simply visible.
 * RTL: logical properties; the directions of the flows and slides are mirrored through --dir.
 */
:root { --dir: 1; }
[dir="rtl"] { --dir: -1; }

/* ------------------------------------------------------------------ header */
.page-head--about { isolation: isolate; overflow: hidden; }
.page-head--about > .container { position: relative; z-index: 1; }
.ab-decor { position: absolute; inset-block: 0; inset-inline: 0; margin-inline: auto; max-inline-size: calc(var(--max) + var(--gutter) * 2); z-index: 0; pointer-events: none; }
.ab-orb { position: absolute; border-radius: 50%; filter: blur(64px); translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 18px); }
.ab-orb--1 { inline-size: 460px; block-size: 460px; inset-block-start: -210px; inset-inline-end: -40px; background: rgba(22, 119, 255, .42); animation: ab-float 15s ease-in-out infinite alternate; }
.ab-orb--2 { inline-size: 320px; block-size: 320px; inset-block-end: -190px; inset-inline-start: 18%; background: rgba(201, 163, 73, .3); animation: ab-float 19s ease-in-out infinite alternate-reverse; translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); }
@keyframes ab-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(calc(46px * var(--dir)), 28px, 0) scale(1.16); } }
.ab-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(143, 194, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 194, 255, .09) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(520px 260px at 82% 30%, #000, transparent 75%); mask-image: radial-gradient(520px 260px at 82% 30%, #000, transparent 75%); animation: ab-grid 14s linear infinite; }
[dir="rtl"] .ab-grid { -webkit-mask-image: radial-gradient(520px 260px at 18% 30%, #000, transparent 75%); mask-image: radial-gradient(520px 260px at 18% 30%, #000, transparent 75%); }
@keyframes ab-grid { to { background-position: 44px 44px, 44px 44px; } }
.ab-chip { position: absolute; inset-block-start: 38%; display: none; place-items: center; inline-size: 66px; block-size: 66px; border-radius: 20px; font-weight: 800; font-size: 2rem; line-height: 1; color: var(--gold); background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04)); border: 1px solid rgba(201, 163, 73, .55); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), 0 0 28px -6px rgba(201, 163, 73, .4); animation: ab-bob 5s ease-in-out infinite alternate; }
.ab-chip--ar { inset-inline-end: 188px; font-family: inherit; }
.ab-chip--ar::before { content: "\0639"; } /* the letter ain, drawn by the stylesheet so the English page holds no Arabic text */
.ab-chip--en::before { content: "A"; }
.ab-chip--en { inset-inline-end: 24px; color: var(--sky); border-color: rgba(143, 194, 255, .55); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), 0 0 28px -6px rgba(143, 194, 255, .4); animation-delay: -2.4s; }
@keyframes ab-bob { from { translate: 0 -8px; } to { translate: 0 10px; } }
.ab-link { position: absolute; inset-block-start: calc(38% + 32px); inset-inline-end: 96px; inline-size: 92px; block-size: 2px; display: none; opacity: .9; background: repeating-linear-gradient(90deg, rgba(201, 163, 73, .95) 0 7px, transparent 7px 14px); background-size: 14px 2px; animation: ab-flow 1s linear infinite; }
[dir="rtl"] .ab-link { animation-direction: reverse; }
@keyframes ab-flow { to { background-position: 14px 0; } }
@media (min-width: 1060px) { .ab-chip, .ab-link { display: grid; } .ab-link { display: block; } }

.page-head--about h1 { position: relative; padding-block-end: .28em; }
.page-head--about h1::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 84px; block-size: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--sky)); transform-origin: left center; }
[dir="rtl"] .page-head--about h1::after { transform-origin: right center; }

/* the four principles as quick links */
.ab-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 1.6rem; }
.ab-pills a { display: inline-flex; align-items: center; gap: .5em; min-block-size: 40px; padding: .45em 1em .45em .8em; border-radius: 99px; font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--on-dark); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease, border-color .25s ease, color .25s ease; }
.ab-pills .ico { inline-size: 18px; block-size: 18px; color: var(--gold); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .ab-pills a:hover { transform: translateY(-3px); background: rgba(201, 163, 73, .18); border-color: rgba(201, 163, 73, .7); color: #fff; }
  .ab-pills a:hover .ico { transform: scale(1.2) rotate(-8deg); }
}

/* ------------------------------------------------------------------ story */
.about-sec { position: relative; isolation: isolate; overflow: hidden; }
.about-sec::before, .about-sec::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); }
.about-sec::before { inline-size: 420px; block-size: 420px; inset-block-start: -120px; inset-inline-end: -120px; background: rgba(22, 119, 255, .12); animation: ab-float 18s ease-in-out infinite alternate; }
.about-sec::after { inline-size: 360px; block-size: 360px; inset-block-end: -140px; inset-inline-start: -100px; background: rgba(201, 163, 73, .14); animation: ab-float 22s ease-in-out infinite alternate-reverse; }

.about-story { position: relative; padding-inline-start: 62px; --p: 1; }
.about-story::before { content: ""; position: absolute; inset-inline-start: 19px; inset-block: 6px 0; inline-size: 3px; border-radius: 3px; background: linear-gradient(var(--gold), var(--sky)) top / 100% calc(var(--p) * 100%) no-repeat, rgba(11, 29, 58, .1); }
.about-story { counter-reset: ab; }
.about-story h2 { position: relative; counter-increment: ab; font-size: 1.7rem; letter-spacing: -.01em; }
.about-story h2::before { content: counter(ab, decimal-leading-zero); position: absolute; inset-inline-start: -62px; inset-block-start: 50%; translate: 0 -50%; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; font-size: .95rem; font-weight: 800; letter-spacing: 0; color: var(--navy-950); background: linear-gradient(145deg, #f3d98b, var(--gold)); box-shadow: 0 0 0 5px var(--surface, #fff), 0 6px 16px rgba(201, 163, 73, .5); }
.about-story h2::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -.18em; inline-size: 46px; block-size: 3px; border-radius: 3px; background: var(--gold); transition: inline-size .5s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .about-story h2:hover::after { inline-size: 120px; } }
.about-story ul { list-style: none; padding-inline-start: 0; }
.about-story li { position: relative; padding-inline-start: 30px; transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .3s ease; }
.about-story li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: .62em; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201, 163, 73, .55); animation: ab-dot 2.6s ease-out infinite; }
.about-story li:nth-child(2)::before { animation-delay: .8s; } .about-story li:nth-child(3)::before { animation-delay: 1.6s; }
@keyframes ab-dot { 0% { box-shadow: 0 0 0 0 rgba(201, 163, 73, .55); } 70%, 100% { box-shadow: 0 0 0 11px rgba(201, 163, 73, 0); } }
@media (hover: hover) { .about-story li:hover { transform: translateX(calc(6px * var(--dir))); color: var(--navy-950); } }

/* ------------------------------------------------------------------ the four cards */
.values--cards { gap: 18px; }
.values--cards li {
  --i: 0; --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; animation: none; scroll-margin-block-start: 110px;
  padding-block: 24px; padding-inline: 28px 24px; border-radius: 20px; border: 1px solid var(--line); border-inline-start: 1px solid var(--line); background: linear-gradient(160deg, #fff, var(--bg)); box-shadow: 0 10px 28px -20px rgba(11, 29, 58, .4);
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease, opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1);
}
.values--cards li:nth-child(2) { --i: 1; } .values--cards li:nth-child(3) { --i: 2; } .values--cards li:nth-child(4) { --i: 3; } .values--cards li:nth-child(5) { --i: 4; }
/* the moving gold edge */
.values--cards li::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 5px; background: linear-gradient(180deg, var(--gold), #f3d98b 35%, var(--gold) 55%, var(--blue) 100%); background-size: 100% 220%; animation: ab-edge 5s ease-in-out infinite alternate; }
@keyframes ab-edge { from { background-position: 0 0; } to { background-position: 0 100%; } }
/* the light that follows the pointer */
.values--cards li::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(201, 163, 73, .22), transparent 70%); transition: opacity .3s ease; }
.val-ico { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; color: var(--gold); background: var(--navy-900); box-shadow: 0 10px 22px -10px rgba(11, 29, 58, .7); animation: ab-bob 4.6s ease-in-out infinite alternate; }
.values--cards li:nth-child(2) .val-ico { animation-delay: -1.2s; } .values--cards li:nth-child(3) .val-ico { animation-delay: -2.4s; } .values--cards li:nth-child(4) .val-ico { animation-delay: -3.4s; }
.val-ico .ico { inline-size: 26px; block-size: 26px; }
.val-body { min-inline-size: 0; }
.values--cards h3 { margin-block-end: .3em; transition: color .3s ease; }
.val-ghost { position: absolute; z-index: -1; inset-inline-end: 14px; inset-block-end: -14px; font-size: 5rem; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: rgba(11, 29, 58, .05); pointer-events: none; transition: color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .values--cards li:hover { border-color: rgba(201, 163, 73, .7); box-shadow: 0 24px 44px -22px rgba(11, 29, 58, .5), 0 0 34px -10px rgba(201, 163, 73, .45); }
  .values--cards li:hover::after { opacity: 1; }
  .values--cards li:hover .val-ghost { color: rgba(201, 163, 73, .2); transform: translateY(-6px) scale(1.05); }
  .values--cards li:hover h3 { color: var(--blue-700); }
}
/* arriving from a header link: the card lights up once */
.values--cards li:target { animation: ab-target 1.8s ease-out 1; }
@keyframes ab-target { 0% { box-shadow: 0 0 0 0 rgba(201, 163, 73, .8); } 60% { box-shadow: 0 0 0 14px rgba(201, 163, 73, 0); } 100% { box-shadow: 0 10px 28px -20px rgba(11, 29, 58, .4); } }
@media (max-width: 939px) { .about-story h2 { font-size: 1.5rem; } }
@media (max-width: 520px) {
  .about-story { padding-inline-start: 50px; }
  .about-story::before { inset-inline-start: 14px; }
  .about-story h2::before { inset-inline-start: -50px; inline-size: 34px; block-size: 34px; font-size: .85rem; }
  .values--cards li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-block: 20px; padding-inline: 24px 18px; }
  .val-ico { inline-size: 44px; block-size: 44px; border-radius: 14px; } .val-ico .ico { inline-size: 22px; block-size: 22px; }
}

/* ------------------------------------------------------------------ motion on arrival (CSS only: the header) and on scroll (js/about.js sets .ab-wait, then removes it) */
@media (prefers-reduced-motion: no-preference) {
  .page-head--about .crumbs, .page-head--about h1, .page-head--about .lead { animation: ab-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .page-head--about h1 { animation-delay: .1s; } .page-head--about .lead { animation-delay: .25s; }
  .page-head--about h1::after { animation: ab-draw 1s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .ab-pills li { animation: ab-pop .6s cubic-bezier(.2, .8, .3, 1.2) both; }
  .ab-pills li:nth-child(1) { animation-delay: .5s; } .ab-pills li:nth-child(2) { animation-delay: .62s; } .ab-pills li:nth-child(3) { animation-delay: .74s; } .ab-pills li:nth-child(4) { animation-delay: .86s; } .ab-pills li:nth-child(n+5) { animation-delay: .98s; }
  .ab-chip { animation: ab-pop .7s cubic-bezier(.2, .8, .3, 1.2) .6s both, ab-bob 5s ease-in-out 1.3s infinite alternate; }
  .ab-chip--en { animation-delay: .8s, 1.5s; }
  .ab-wait { opacity: 0; transform: translateY(26px); }
  .values--cards li.ab-wait { opacity: 0; translate: calc(46px * var(--dir)) 0; transform: perspective(800px); }
  .about-story > * { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .values--cards li:not(.ab-wait) { transition-delay: 0s, 0s, 0s, calc(var(--i) * 90ms), calc(var(--i) * 90ms); }
}
@keyframes ab-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ab-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ab-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ab-orb, .ab-grid, .ab-chip, .ab-link, .about-sec::before, .about-sec::after, .about-story li::before, .values--cards li::before, .val-ico, .values--cards li:target { animation: none; }
  .ab-pills a, .ab-pills .ico, .about-story li, .about-story h2::after, .values--cards li, .val-ghost { transition: none; }
}