/* =============================================================
   Take A Chance — Global stylesheet
   Component classes layered on top of Tailwind utilities.
   Works for both RTL (Arabic) and LTR (English) via [dir].
   ============================================================= */

:root {
  --brand-blue: #0080BB;
  --brand-coral: #FC5272;
  --brand-yellow: #ECE813;
  --brand-navy: #002539;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Cairo', system-ui, sans-serif;
  color: #1d2b33;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-yellow); color: var(--brand-navy); }

/* Focus ring for accessibility (WCAG) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(0, 128, 187, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .8rem 1.5rem; border-radius: 9999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  cursor: pointer; white-space: nowrap; text-align: center;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary { background: var(--brand-coral); color: #fff; box-shadow: 0 10px 24px -10px rgba(252,82,114,.7); }
.btn-primary:hover { background: #ec3a5d; box-shadow: 0 14px 30px -10px rgba(252,82,114,.8); transform: translateY(-2px); }

.btn-blue { background: var(--brand-blue); color: #fff; box-shadow: 0 10px 24px -10px rgba(0,128,187,.7); }
.btn-blue:hover { background: #006799; transform: translateY(-2px); }

.btn-secondary { background: var(--brand-navy); color: #fff; }
.btn-secondary:hover { background: #00374f; transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--brand-navy); border: 2px solid rgba(0,37,57,.15); }
.btn-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.btn-ghost.active { background: var(--brand-blue); color:#fff; border-color: var(--brand-blue); }

.btn-white { background:#fff; color: var(--brand-navy); }
.btn-white:hover { background:#f1f5f9; transform: translateY(-2px); }

.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }

/* ---------- Cards ---------- */
.card {
  background: #fff; border-radius: 1.25rem;
  box-shadow: 0 8px 30px -8px rgba(0,37,57,.10);
  border: 1px solid rgba(0,37,57,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -16px rgba(0,37,57,.25); }

/* ---------- Section helpers ---------- */
.section { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight: 800; font-size:.8rem; letter-spacing:.06em; text-transform: uppercase;
  color: #0a6a96; background: rgba(0,128,187,.12); /* darkened for WCAG AA on tint */
  padding:.35rem .9rem; border-radius:9999px;
}
/* darker coral for small text on light backgrounds (AA) */
.text-coral-ink { color:#c8244a; }
/* story highlight pill */
.chip-stat { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:700;
  padding:.5rem 1rem; border-radius:9999px; background:#f1f5f9; color:#0f3b52; border:1px solid rgba(0,37,57,.06); }
.heading-xl { font-weight: 800; line-height: 1.12; font-size: clamp(2rem, 5vw, 3.4rem); color: var(--brand-navy); }
.heading-lg { font-weight: 800; line-height: 1.15; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--brand-navy); }

/* ---------- Navbar ---------- */
.nav-link {
  position: relative; font-weight: 600; color: #334a56; padding: .4rem .2rem;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--brand-blue); }
.nav-link.active { color: var(--brand-blue); }
.nav-link::after {
  content:''; position:absolute; bottom:-2px; inset-inline-start:0; height:2px; width:0;
  background: var(--brand-blue); transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* Mobile menu animation */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mobile-menu.open { max-height: 640px; }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Hero slider ---------- */
.hero-slide { position:absolute; inset:0; opacity:0; transition: opacity 1s ease; }
.hero-slide.active { opacity:1; }
.slider-dot { width:10px; height:10px; border-radius:9999px; background:rgba(255,255,255,.5); transition: all .3s ease; }
.slider-dot.active { background:#fff; width:28px; }

/* ---------- Stories slider ---------- */
.stories-track { display:flex; transition: transform .5s ease; }

/* ---------- Gradient utilities ---------- */
.bg-mesh {
  background:
    radial-gradient(40rem 40rem at 100% 0%, rgba(0,128,187,.10), transparent 60%),
    radial-gradient(36rem 36rem at 0% 100%, rgba(252,82,114,.10), transparent 60%);
}
.text-gradient {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-coral));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; background:rgba(0,37,57,.92); display:none; align-items:center; justify-content:center; z-index:90; padding:1.5rem; }
.lightbox.open { display:flex; animation: lbfade .3s ease; }
@keyframes lbfade { from{opacity:0} to{opacity:1} }
.lightbox img { max-width:92vw; max-height:86vh; border-radius:.75rem; box-shadow:0 20px 60px rgba(0,0,0,.5); }

/* ---------- Forms ---------- */
.field {
  width:100%; border:1.5px solid #e2e8f0; border-radius:.85rem;
  padding:.8rem 1rem; font-size:.95rem; background:#fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(0,128,187,.12); outline:none; }
.field.invalid { border-color: var(--brand-coral); box-shadow: 0 0 0 4px rgba(252,82,114,.12); }
.field-error { color: var(--brand-coral); font-size:.8rem; margin-top:.3rem; display:none; }
.field-error.show { display:block; }

/* Masonry (gallery) */
.masonry { column-gap: 1rem; }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }
@media (min-width:640px){ .masonry{ column-count:2 } }
@media (min-width:1024px){ .masonry{ column-count:3 } }

/* =============================================================
   DESIGN v2 — Premium motion layer
   ============================================================= */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-coral), var(--brand-yellow));
  z-index: 60; transition: width .1s linear;
}

/* ---------- Glass navbar + shrink ---------- */
.nav-glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: background .3s ease, box-shadow .3s ease, height .3s ease, border-color .3s ease;
}
.nav-glass.scrolled { background: rgba(255,255,255,.9); box-shadow: 0 10px 30px -12px rgba(0,37,57,.18); }
.nav-glass.scrolled .nav-bar { height: 4rem; }
.nav-bar { transition: height .3s ease; }

/* Animated logo mark */
.logo-mark { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
a:hover > .logo-mark { transform: rotate(-6deg) scale(1.06); }
.logo-mark .roof { transition: transform .4s ease; }
a:hover > .logo-mark .roof { transform: translateY(-3px); }

/* Donate button — shine + pulse */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content:''; position:absolute; top:0; inset-inline-start:-120%;
  width:60%; height:100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.btn-shine:hover::after { animation: shine 0.9s ease; }
@keyframes shine { from{ inset-inline-start:-120% } to{ inset-inline-start:140% } }
.pulse-soft { animation: pulseSoft 2.6s ease-in-out infinite; }
@keyframes pulseSoft {
  0%,100% { box-shadow: 0 10px 24px -10px rgba(252,82,114,.7), 0 0 0 0 rgba(252,82,114,.45); }
  50%     { box-shadow: 0 14px 30px -10px rgba(252,82,114,.8), 0 0 0 12px rgba(252,82,114,0); }
}

/* ---------- Reveal variants + stagger ---------- */
[data-reveal][data-from="left"]  { transform: translateX(-40px); }
[data-reveal][data-from="right"] { transform: translateX(40px); }
[data-reveal][data-from="zoom"]  { transform: scale(.92); }
[data-reveal].in { transform: none !important; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }
[data-reveal-delay="7"] { transition-delay: .56s; }

/* ---------- Floating blobs / shapes ---------- */
.blob { position:absolute; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(2px); opacity:.5; animation: blobMove 16s ease-in-out infinite; }
@keyframes blobMove {
  0%,100% { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0,0) rotate(0); }
  50%     { border-radius:58% 42% 37% 63% / 56% 59% 41% 44%; transform: translate(14px,-18px) rotate(12deg); }
}
.floaty   { animation: floaty 6s ease-in-out infinite; }
.floaty-2 { animation: floaty 8s ease-in-out infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-16px) } }

/* ---------- Ken Burns on hero slides ---------- */
.hero-slide.active img { animation: kenburns 7s ease-out both; }
@keyframes kenburns { from{ transform: scale(1.12) } to{ transform: scale(1) } }

/* ---------- Hero headline word reveal ---------- */
.word { display:inline-block; opacity:0; transform: translateY(120%); }
.word.in { animation: wordUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordUp { to{ opacity:1; transform: translateY(0) } }

/* ---------- Animated gradient text ---------- */
.text-gradient-anim {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-coral), var(--brand-yellow), var(--brand-blue));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s linear infinite;
}
@keyframes gradShift { to{ background-position: 300% 0 } }

/* ---------- Marquee slogan strip ---------- */
.marquee { overflow:hidden; white-space:nowrap; }
.marquee__track { display:inline-flex; gap:3rem; padding-inline:1.5rem; animation: marquee 26s linear infinite; will-change: transform; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
[dir="ltr"] .marquee__track { animation-name: marqueeLtr; }
@keyframes marqueeLtr { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

/* ---------- Card glow / tilt ---------- */
.card-glow { position:relative; }
.card-glow::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background: linear-gradient(130deg, var(--brand-blue), var(--brand-coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s ease;
}
.card-glow:hover::before { opacity:1; }
[data-tilt] { transition: transform .2s ease; transform-style: preserve-3d; will-change: transform; }

/* ---------- Scroll-down indicator ---------- */
.scroll-cue span { display:block; width:24px; height:38px; border:2px solid rgba(255,255,255,.6); border-radius:14px; position:relative; }
.scroll-cue span::after { content:''; position:absolute; top:7px; inset-inline-start:50%; width:4px; height:8px; margin-inline-start:-2px; background:#fff; border-radius:2px; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0%{ opacity:0; transform: translateY(-4px) } 50%{ opacity:1 } 100%{ opacity:0; transform: translateY(10px) } }

/* ---------- Underline grow links (footer) ---------- */
.flink { position:relative; }
.flink::after { content:''; position:absolute; bottom:-2px; inset-inline-start:0; width:0; height:1.5px; background: var(--brand-yellow); transition: width .25s ease; }
.flink:hover::after { width:100%; }

/* ---------- Social icon pop ---------- */
.soc { transition: transform .25s cubic-bezier(.34,1.56,.64,1), background-color .25s ease; }
.soc:hover { transform: translateY(-4px) scale(1.08); }

/* ---------- Stat number underline sweep ---------- */
.stat-line { position:relative; }
.stat-line::after { content:''; position:absolute; bottom:-8px; inset-inline-start:50%; transform:translateX(-50%); width:0; height:3px; border-radius:3px; background: var(--brand-yellow); transition: width .6s ease; }
[data-reveal].in .stat-line::after { width:40px; }

/* ---------- Tabs (stage explorer) ---------- */
.tab-btn { transition: all .25s ease; color:#475569; }
.tab-btn.tab-active { color:#fff; background: var(--brand-navy); box-shadow:0 10px 24px -10px rgba(0,37,57,.5); }
.tab-anim { animation: tabIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tabIn { from{ opacity:0; transform: translateY(16px) } to{ opacity:1; transform:none } }

/* ---------- Scrollspy pills ---------- */
.spy { transition: all .25s ease; }
.spy.spy-active { background: var(--brand-navy); color:#fff; }
.spy.spy-active .spy-dot { background: var(--brand-yellow); }

/* ---------- Program card hover-expand ---------- */
.prog-card .prog-more { max-height:0; opacity:0; overflow:hidden; transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.prog-card:hover .prog-more, .prog-card:focus-within .prog-more { max-height:340px; opacity:1; margin-top:.85rem; }

/* ---------- Number ghost ---------- */
.ghost-num { font-weight:900; line-height:1; color:transparent; -webkit-text-stroke:2px rgba(0,37,57,.12); }
.ghost-num-light { -webkit-text-stroke:2px rgba(255,255,255,.18); }

/* ---------- Home programs accordion (تمكين·تدريب·تشبيك) ---------- */
.pacc-row {
  --accent: #0080BB;
  position: relative; display: block; overflow: hidden;
  border-radius: 1.5rem; padding: 1.4rem 1.6rem;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: background .4s ease, transform .35s ease, box-shadow .4s ease, border-color .4s ease;
}
.pacc-row::before {
  content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:6px;
  background: var(--accent); transition: width .4s ease;
}
.pacc-row:hover, .pacc-row:focus-visible {
  background: rgba(255,255,255,.09); transform: translateY(-3px);
  box-shadow: 0 26px 50px -24px rgba(0,0,0,.6); border-color: rgba(255,255,255,.18); outline: none;
}
.pacc-row:hover::before, .pacc-row:focus-visible::before { width: 12px; }
.pacc-row .pacc-body {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .55s ease, opacity .45s ease, margin-top .45s ease;
}
.pacc-row:hover .pacc-body, .pacc-row:focus-visible .pacc-body { max-height: 240px; opacity: 1; margin-top: 1.1rem; }
.pacc-row .pacc-arrow { transition: transform .4s cubic-bezier(.34,1.56,.64,1), background-color .3s ease; }
.pacc-row:hover .pacc-arrow, .pacc-row:focus-visible .pacc-arrow { transform: translateX(-8px); }
.pacc-ghost { font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.22); }
.pacc-tag { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:700;
  padding:.4rem .8rem; border-radius:9999px; background:rgba(255,255,255,.12); color:#fff; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.active img, .floaty, .floaty-2, .blob, .pulse-soft, .marquee__track, .text-gradient-anim, .scroll-cue span::after { animation: none !important; }
  .word { opacity:1 !important; transform:none !important; }
  .tab-anim { animation: none !important; }
  .pacc-row, .pacc-row .pacc-body, .pacc-row .pacc-arrow, .pacc-row::before { transition: none !important; }
}