/* ==========================================================================
   AR Technology — About Us page styles
   Loaded only on the About Us page template.
   ========================================================================== */

@keyframes arAurora { 0%,100% { transform: translateX(-8%) rotate(8deg); opacity:.5; } 50% { transform: translateX(8%) rotate(12deg); opacity:.95; } }
@keyframes arShimmer { to { background-position: 300% center; } }
@keyframes arStoryGlow { 0%,100% { transform: scaleX(.35); opacity:.55; } 50% { transform: scaleX(1); opacity:1; } }
@keyframes arBadgePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(56,225,255,.35); } 50% { box-shadow: 0 0 0 8px rgba(56,225,255,0); } }
@keyframes arTeamPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(56,225,255,.4); } 50% { box-shadow: 0 0 0 12px rgba(56,225,255,0); } }
@keyframes arSheen { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes arValueFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes arMvScan { 0% { top:-30%; } 100% { top:130%; } }

/* ---------- Hero ---------- */
.ar-about-hero { position:relative; min-height:64vh; display:flex; align-items:center; overflow:hidden;
  background: radial-gradient(1200px 700px at 70% 20%, #0A1B33 0%, #050B18 45%, #030712 100%); }
.ar-about-hero .ar-hero-canvas { position:absolute; inset:0; width:100%; height:100%; }
.ar-about-hero-inner { position:relative; z-index:2; max-width:900px; margin:0 auto; padding:170px 28px 90px; text-align:center; }
.ar-about-hero h1 { font-family:var(--font-head); font-weight:700; font-size:clamp(34px,5vw,58px); line-height:1.08; letter-spacing:-.02em; margin:26px 0 0; }
.ar-about-aurora { position:absolute; top:-40%; height:95%; filter:blur(34px); pointer-events:none; }
.ar-aur-1 { left:14%; width:300px; background:linear-gradient(180deg, transparent, rgba(56,225,255,.20), transparent); animation:arAurora 12s ease-in-out infinite; }
.ar-aur-2 { right:14%; width:270px; background:linear-gradient(180deg, transparent, rgba(167,139,250,.17), transparent); animation:arAurora 15s ease-in-out infinite reverse; }
.ar-aur-3 { left:48%; width:220px; background:linear-gradient(180deg, transparent, rgba(45,212,191,.14), transparent); animation:arAurora 18s ease-in-out infinite 3s; }
.ar-about-grid { position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(56,225,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56,225,255,.06) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(1000px 600px at 50% 40%, black, transparent);
  mask-image:radial-gradient(1000px 600px at 50% 40%, black, transparent); animation:arGrid 10s linear infinite; }
.ar-about-ripple { position:absolute; border-radius:50%; pointer-events:none; }
.ar-rip-1 { left:26%; top:44%; width:260px; height:260px; margin:-130px; border:1.5px solid rgba(56,225,255,.5); animation:arRing 5s ease-out infinite; }
.ar-rip-2 { left:74%; top:60%; width:300px; height:300px; margin:-150px; border:1.5px solid rgba(45,212,191,.45); animation:arRing 6s ease-out infinite 2s; }
.ar-about-veil { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(3,7,18,.35) 0%, rgba(3,7,18,.1) 40%, rgba(3,7,18,.92) 100%); }
.ar-shimmer-text { background:linear-gradient(120deg, #EEF4FB, #38E1FF, #2E9BFF, #EEF4FB); background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:arShimmer 7s linear infinite; }
.ar-pill { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(56,225,255,.3); background:rgba(56,225,255,.06);
  border-radius:100px; padding:7px 16px; font-family:var(--font-mono); font-size:12px; letter-spacing:1.6px; color:var(--cyan); }
.ar-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); animation:arBlink 2.2s ease-in-out infinite; }

/* ---------- Milestones ---------- */
.ar-about-milestones { padding:70px 28px; background:var(--bg2); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.ar-milestone { padding:24px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.ar-milestone-value { font-family:var(--font-mono); font-size:clamp(26px,3vw,38px); color:var(--cyan); text-shadow:0 0 24px rgba(56,225,255,.3); }
.ar-milestone-label { font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.8px; color:var(--text3); margin-top:10px; }

/* ---------- Split layout ---------- */
.ar-about-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:56px; align-items:center; }

/* ---------- Story ---------- */
.ar-story-underline { display:inline-block; position:relative; color:var(--cyan); }
.ar-story-underline::after { content:''; position:absolute; inset-inline-start:0; bottom:-6px; width:100%; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--blue), transparent); box-shadow:0 0 12px rgba(56,225,255,.8);
  transform-origin:left; animation:arStoryGlow 2.4s ease-in-out infinite; }
[dir="rtl"] .ar-story-underline::after { transform-origin:right; }
.ar-story-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ar-story-badge { font-family:var(--font-mono); font-size:11.5px; color:var(--text); border:1px solid rgba(56,225,255,.5);
  background:rgba(56,225,255,.1); border-radius:8px; padding:8px 13px; animation:arBadgePulse 2.8s ease-in-out infinite; }
.ar-story-badge b { color:var(--cyan); }
.ar-story-badge.ar-sb-2 { border-color:rgba(46,155,255,.5); background:rgba(46,155,255,.1); animation-delay:.5s; }
.ar-story-badge.ar-sb-2 b { color:var(--blue); }
.ar-story-badge.ar-sb-3 { animation-delay:1s; }

/* ---------- Timeline ---------- */
.ar-timeline { position:relative; padding-inline-start:34px; display:flex; flex-direction:column; gap:26px; }
.ar-timeline-track { position:absolute; inset-inline-start:11px; top:8px; bottom:8px; width:2px; background:rgba(255,255,255,.09); border-radius:2px; }
.ar-timeline-fill { position:absolute; inset-inline-start:11px; top:8px; width:2px; height:0;
  background:linear-gradient(180deg, var(--cyan), var(--teal), var(--violet)); box-shadow:0 0 12px rgba(56,225,255,.7);
  border-radius:2px; transition:height .9s cubic-bezier(.3,.9,.3,1); }
.ar-tl-item { position:relative; opacity:.35; transform:translateX(14px); transition:opacity .6s ease, transform .6s ease; }
[dir="rtl"] .ar-tl-item { transform:translateX(-14px); }
.ar-tl-item.is-active { opacity:1; transform:translateX(0); }
.ar-tl-node { position:absolute; inset-inline-start:-34px; top:4px; width:24px; height:24px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.16); background:var(--bg); display:grid; place-items:center;
  transition:border-color .5s ease, box-shadow .5s ease; }
.ar-tl-node::after { content:''; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.18); transition:background .5s ease, box-shadow .5s ease; }
.ar-tl-item.is-active .ar-tl-node { border-color:var(--cyan); box-shadow:0 0 22px rgba(56,225,255,.45); }
.ar-tl-item.is-active .ar-tl-node::after { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.ar-tl-ring { position:absolute; inset:-6px; border:1px solid var(--cyan); border-radius:50%; opacity:0; }
.ar-tl-item.is-active .ar-tl-ring { opacity:1; animation:arRing 2.4s ease-out infinite; }
.ar-tl-body { display:flex; flex-direction:column; gap:5px; }
.ar-tl-year { font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px; color:var(--cyan); }
.ar-tl-title { font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--text); }
.ar-tl-desc { color:var(--text3); font-size:13.5px; line-height:1.6; }

/* ---------- Mission / Vision ---------- */
.ar-mv-card { position:relative; border-radius:20px; padding:34px; overflow:hidden; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.09); background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.ar-mv-card:hover { transform:translateY(-6px); }
.ar-mv-mission:hover { border-color:rgba(56,225,255,.5); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 34px rgba(56,225,255,.14); }
.ar-mv-vision:hover { border-color:rgba(167,139,250,.5); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 34px rgba(167,139,250,.14); }
.ar-mv-scan { position:absolute; left:0; right:0; height:56px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(56,225,255,.09), transparent); animation:arMvScan 7s linear infinite; }
.ar-mv-vision .ar-mv-scan { background:linear-gradient(180deg, transparent, rgba(167,139,250,.09), transparent); animation-delay:2s; }
.ar-mv-icon { position:relative; font-size:30px; }
.ar-mv-card h3 { position:relative; font-family:var(--font-head); font-size:24px; font-weight:700; margin:16px 0 0; }
.ar-mv-card p { position:relative; color:var(--text2); margin-top:14px; line-height:1.7; }

/* ---------- Leadership ---------- */
.ar-team-card { position:relative; overflow:hidden; text-align:center; border-radius:18px; padding:28px 22px;
  border:1px solid rgba(255,255,255,.09); background:linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease; }
.ar-team-card:hover { border-color:rgba(56,225,255,.5); transform:translateY(-8px); box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 34px rgba(56,225,255,.13); }
.ar-team-sheen { position:absolute; top:0; bottom:0; width:60px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, transparent, rgba(56,225,255,.14), transparent); }
.ar-team-card:hover .ar-team-sheen { opacity:1; animation:arSheen 1.1s ease forwards; }
.ar-team-avatar { position:relative; display:grid; place-items:center; width:74px; height:74px; margin:0 auto; border-radius:50%;
  border:1px solid rgba(56,225,255,.45); background:radial-gradient(circle at 35% 30%, #0E3A52, #050B18 75%);
  font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--cyan); }
.ar-team-card:hover .ar-team-avatar { animation:arTeamPulse 1.4s ease-in-out infinite; }
.ar-team-ring { position:absolute; inset:-7px; border:1px solid rgba(56,225,255,.5); border-radius:50%; animation:arRing 3s ease-out infinite; }
.ar-team-name { font-family:var(--font-head); font-size:17px; font-weight:600; margin-top:18px; }
.ar-team-role { font-family:var(--font-mono); font-size:11px; color:var(--text3); margin-top:4px; }
.ar-team-divider { display:block; height:1px; background:rgba(255,255,255,.08); margin:14px 0; }
.ar-team-bio { font-size:12.5px; color:var(--text3); line-height:1.6; min-height:40px; }
.ar-team-social { display:grid; place-items:center; width:30px; height:30px; margin:12px auto 0; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); color:var(--text3); font-size:12px; text-decoration:none; transition:color .25s ease, border-color .25s ease; }
.ar-team-social:hover { color:var(--cyan); border-color:rgba(56,225,255,.5); }

/* ---------- Values ---------- */
.ar-values-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.ar-value-card { position:relative; border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:8px;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03);
  transition:border-color .5s ease, background .5s ease, box-shadow .5s ease, transform .5s ease; }
.ar-value-card.is-active { border-color:rgba(167,139,250,.6); background:rgba(167,139,250,.07);
  box-shadow:0 0 30px rgba(167,139,250,.16); animation:arValueFloat 3.4s ease-in-out infinite; }
.ar-value-icon { font-size:24px; }
.ar-value-num { font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.6px; color:var(--violet); }
.ar-value-title { font-family:var(--font-head); font-size:15.5px; font-weight:600; line-height:1.35; }
.ar-value-desc { color:var(--text3); font-size:13px; line-height:1.6; }

/* ---------- Partners ---------- */
.ar-partner-card { position:relative; overflow:hidden; }
.ar-partner-glow { position:absolute; inset-inline-end:-40px; top:-40px; width:150px; height:150px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(56,225,255,.14), transparent 70%); }

/* ---------- Recognition marquee ---------- */
.ar-marquee-mask { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.ar-marquee-track { display:flex; gap:14px; width:max-content; animation:arMarquee 28s linear infinite; }
.ar-marquee-track span { flex:none; font-family:var(--font-head); font-size:13px; font-weight:600; letter-spacing:1px; color:var(--text3);
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); border-radius:10px; padding:12px 22px;
  transition:color .25s ease, border-color .25s ease; }
.ar-marquee-track span:hover { color:var(--cyan); border-color:rgba(56,225,255,.4); }
.ar-marquee-mask:hover .ar-marquee-track { animation-play-state:paused; }

/* ---------- About CTA ---------- */
.ar-about-cta { position:relative; overflow:hidden; }
.ar-about-cta-border { position:absolute; inset:-1px; border-radius:27px; padding:1px; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 25%, rgba(56,225,255,.9), rgba(46,155,255,.9), transparent 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask-composite:exclude; animation:arSpin 6s linear infinite; opacity:.85; }

@media (prefers-reduced-motion: reduce) {
  .ar-about-hero *, .ar-marquee-track, .ar-value-card, .ar-team-card *, .ar-mv-scan, .ar-about-cta-border,
  .ar-story-badge, .ar-story-underline::after, .ar-tl-ring { animation:none !important; }
  .ar-timeline-fill, .ar-tl-item { transition:none !important; }
  .ar-tl-item { opacity:1 !important; transform:none !important; }
}