/* ====================================================
   base.css
   Design tokens, animations, layout & decorative elements
   ==================================================== */

:root{
  --ink:#0a0d12;
  --ink-2:#11151d;
  --ink-3:#171c26;
  --parchment:#ece4d3;
  --parchment-dim:#a79d8c;
  --parchment-faint:#6b6457;
  --accent:#3E7BFA;
  --accent-bright:#8FB8FF;
  --accent-dim:#1E3A66;
  --teal:#2f9088;
  --teal-bright:#5fc4ba;
  --teal-dim:#1c4f4a;
  --line:rgba(62,123,250,0.16);
  --line-soft:rgba(62,123,250,0.08);
  --shadow:0 30px 80px -30px rgba(0,0,0,0.7);
  --radius:2px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  background:var(--ink);
  color:var(--parchment);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
::selection{background:var(--accent-dim);color:var(--parchment);}
.ar{font-family:'Cairo','Tajawal',sans-serif;direction:rtl;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- decorative background ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, black 10%, transparent 75%);
  opacity:0.55;
  animation:gridDrift 60s linear infinite;
}
@keyframes gridDrift{
  0%{background-position:0 0,0 0;}
  100%{background-position:64px 128px,128px 64px;}
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(700px 500px at 12% -5%, rgba(62,123,250,0.10), transparent 60%),
    radial-gradient(800px 600px at 95% 15%, rgba(47,144,136,0.10), transparent 60%),
    radial-gradient(900px 700px at 50% 100%, rgba(62,123,250,0.06), transparent 60%);
}
.vignette{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,0.65);
}
.particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent);opacity:0.35;
  animation:drift linear infinite;
  box-shadow:0 0 6px 1px rgba(62,123,250,0.5);
}
.particle.teal{background:var(--teal-bright);box-shadow:0 0 6px 1px rgba(95,196,186,0.5);}
@keyframes drift{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:.45;}
  90%{opacity:.3;}
  100%{transform:translateY(-110vh) translateX(40px);opacity:0;}
}

/* ---------- layout helpers ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2;}
section{position:relative;z-index:2;padding:140px 0;border-bottom:1px solid var(--line-soft);}
.sheet-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:28px;
}
.sheet-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line) 0%, transparent 100%);}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.25em;
  text-transform:uppercase;color:var(--teal-bright);
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--parchment);letter-spacing:-0.01em;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in-view{opacity:1;transform:translateY(0);}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}
.reveal-d4{transition-delay:.32s;}


/* ---------- hero grid (photo + text) ---------- */
.hero-grid{
  display:block;
}
.hero-text{
  display:block;
  position:relative;
}
/* On desktop: float photo to the right */
.hero-photo{
  float:right;
  width:340px;
  margin:0 0 24px 48px;
  display:flex;justify-content:center;
}
/* clearfix */
.hero-text::after{content:"";display:table;clear:both;}

@media (max-width:1000px){
  .hero-photo{
    float:none;
    width:100%;
    margin:28px 0 36px;
    display:flex;justify-content:center;
  }
  .avatar-frame{width:230px;height:230px;}
  .avatar-badge{font-size:10px;padding:6px 12px;bottom:16px;right:0;}
}

/* ---------- avatar frame ---------- */
.avatar-frame{
  position:relative;
  width:320px;height:320px;
  margin:0 auto;
  flex-shrink:0;
}
@media (max-width:480px){
  .avatar-frame{width:200px;height:200px;}
}
.avatar-img-wrap{
  position:absolute;inset:18px;
  border-radius:50%;overflow:hidden;
  z-index:4;
  box-shadow:0 0 0 2px rgba(62,123,250,0.5), 0 24px 60px -16px rgba(0,0,0,0.7);
}
.avatar-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
  display:block;
  filter:contrast(1.04) brightness(1.02);
  transition:transform 6s ease;
}
.avatar-frame:hover .avatar-img-wrap img{transform:scale(1.04);}

/* spinning rings */
.avatar-ring{
  position:absolute;inset:0;
  border-radius:50%;border:1.5px solid transparent;
}
.avatar-ring-1{
  border-top-color:var(--accent);
  border-right-color:var(--accent);
  animation:spin1 8s linear infinite;
  box-shadow:0 0 18px 2px rgba(62,123,250,0.25);
}
.avatar-ring-2{
  inset:6px;
  border-bottom-color:var(--teal-bright);
  border-left-color:var(--teal-bright);
  animation:spin1 12s linear infinite reverse;
  opacity:0.7;
}
.avatar-ring-3{
  inset:12px;
  border-top-color:rgba(143,184,255,0.4);
  border-right-color:rgba(143,184,255,0.4);
  animation:spin1 20s linear infinite;
  opacity:0.5;
}
@keyframes spin1{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* dot track */
.avatar-dots{
  position:absolute;inset:-6px;
  border-radius:50%;
  background:
    radial-gradient(3px 3px at 50% 0%, var(--accent-bright) 100%, transparent),
    radial-gradient(2.5px 2.5px at 100% 50%, var(--teal-bright) 100%, transparent),
    radial-gradient(2px 2px at 50% 100%, var(--accent) 100%, transparent),
    radial-gradient(2px 2px at 0% 50%, var(--accent-bright) 100%, transparent);
  animation:spin1 10s linear infinite;
  z-index:3;
}

/* glow behind photo */
.avatar-frame::before{
  content:"";position:absolute;
  inset:-30px;border-radius:50%;z-index:0;
  background:radial-gradient(circle, rgba(62,123,250,0.18) 0%, transparent 70%);
  animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{opacity:0.7;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}

/* available badge */
.avatar-badge{
  position:absolute;bottom:28px;right:-8px;z-index:6;
  background:rgba(10,13,18,0.92);
  border:1px solid var(--accent);
  backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:20px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.08em;
  color:var(--accent-bright);
  display:flex;align-items:center;gap:7px;
  box-shadow:0 8px 24px -8px rgba(62,123,250,0.4);
}
.avatar-badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:#34d399;
  box-shadow:0 0 8px 2px rgba(52,211,153,0.6);
  animation:pulse 2s ease-in-out infinite;
}

/* ---------- logo frame ---------- */
.logo-frame{
  position:relative;width:180px;height:180px;margin:0 auto 0;flex-shrink:0;
}
.logo-ring{
  position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;
}
.logo-ring-1{
  border-top-color:var(--accent);border-right-color:var(--accent);
  animation:spin1 10s linear infinite;
  box-shadow:0 0 16px 2px rgba(62,123,250,0.2);
}
.logo-ring-2{
  inset:8px;border-bottom-color:var(--teal-bright);border-left-color:var(--teal-bright);
  animation:spin1 15s linear infinite reverse;opacity:0.7;
}
.logo-ring-3{
  inset:16px;border-top-color:rgba(143,184,255,0.35);border-right-color:rgba(143,184,255,0.35);
  animation:spin1 25s linear infinite;opacity:0.5;
}
.logo-img-wrap{
  position:absolute;inset:22px;border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;z-index:4;
  box-shadow:0 0 0 1px rgba(62,123,250,0.3),0 16px 40px -12px rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
}
.logo-img-wrap img{
  width:72%;height:72%;object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(62,123,250,0.4));
  transition:transform .5s ease;
}
.logo-frame:hover .logo-img-wrap img{transform:scale(1.08);}
.logo-frame::before{
  content:"";position:absolute;inset:-20px;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(62,123,250,0.12) 0%,transparent 70%);
  animation:glowPulse 5s ease-in-out infinite;
}
.logo-dots{
  position:absolute;inset:-4px;border-radius:50%;
  background:
    radial-gradient(2.5px 2.5px at 50% 0%,var(--accent-bright) 100%,transparent),
    radial-gradient(2px 2px at 100% 50%,var(--teal-bright) 100%,transparent),
    radial-gradient(2px 2px at 50% 100%,var(--accent) 100%,transparent),
    radial-gradient(2px 2px at 0% 50%,var(--accent-bright) 100%,transparent);
  animation:spin1 12s linear infinite;z-index:3;
}
.logo-label{
  text-align:center;margin-top:18px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-bright);
}

/* ========== LANGUAGE SWITCHER ========== */
.lang-switcher{
  position:fixed;bottom:24px;left:24px;z-index:60;
  display:flex;flex-direction:column;gap:0;
  background:rgba(10,13,18,0.92);
  border:1px solid var(--line);
  backdrop-filter:blur(12px);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 20px 50px -16px rgba(0,0,0,0.8);
}
.lang-sw-header{
  font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--parchment-faint);padding:10px 16px 6px;
  border-bottom:1px solid var(--line-soft);
}
.lang-sw-btn{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.1em;padding:11px 20px;
  display:flex;align-items:center;gap:10px;
  cursor:pointer;border:none;background:transparent;
  color:var(--parchment-dim);transition:all .22s;
  text-align:left;border-bottom:1px solid var(--line-soft);
  position:relative;
}
.lang-sw-btn:last-child{border-bottom:none;}
.lang-sw-btn:hover{background:rgba(255,255,255,0.04);color:var(--parchment);}
.lang-sw-btn.active{color:var(--parchment);}
.lang-sw-btn.active::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;border-radius:0 2px 2px 0;
  background:var(--lang-accent, var(--accent));
}
.lang-sw-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--lang-accent,var(--accent));
  box-shadow:0 0 6px 1px var(--lang-accent,var(--accent));
  opacity:0.4;
  transition:opacity .22s;
}
.lang-sw-btn.active .lang-sw-dot{opacity:1;}
.lang-sw-flag{font-size:14px;}

/* per-language accent colors */
:root{--lang-accent-en:#3E7BFA;--lang-accent-fr:#8B5CF6;--lang-accent-es:#F59E0B;--lang-accent-sw:#10B981;}
body.lang-en{--accent:#3E7BFA;--accent-bright:#8FB8FF;--accent-dim:#1E3A66;}
body.lang-fr{--accent:#8B5CF6;--accent-bright:#C4B5FD;--accent-dim:#3B1B8C;}
body.lang-es{--accent:#D97706;--accent-bright:#FDE68A;--accent-dim:#7C3300;}
body.lang-sw{--accent:#059669;--accent-bright:#6EE7B7;--accent-dim:#064E3B;}

/* language transition */
[data-i18n]{transition:opacity .18s ease;}
.lang-changing [data-i18n]{opacity:0;}

@media (max-width:600px){
  .lang-switcher{
    left:12px;bottom:12px;
    flex-direction:row;border-radius:30px;
    align-items:center;
  }
  .lang-sw-header{display:none;}
  .lang-sw-btn{padding:10px 14px;border-bottom:none;border-right:1px solid var(--line-soft);}
  .lang-sw-btn:last-child{border-right:none;}
  .lang-sw-btn.active::before{left:0;top:auto;bottom:0;right:0;height:2px;width:auto;border-radius:2px 2px 0 0;}
}