/* Ported from the prototype's about.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — "عن الأترجة" (الرؤية · الرسالة · الأهداف)
   Light editorial section: heading column + staggered cards
   ========================================================= */

.about{
  /* light identity — scoped so the dark hero tokens stay untouched */
  --ivory:      #F8F5ED;
  --ink:        #123C35;   /* deep forest */
  --ink-2:      #66736D;   /* secondary */
  --gold:       #D4AF5A;
  --sage:       #A8C7B5;
  --sand:       #E8D4A5;
  --lavender:   #B9AFE8;
  --surface:    #FFFDF7;
  --hairline:   rgba(18,60,53,.10);

  --ease:       cubic-bezier(.22,.68,.32,1);

  position:relative;
  background:var(--ivory);
  color:var(--ink);
  padding:132px 0 140px;
  overflow:hidden;
}

/* Calm + academic: no colour washes here, only a faint ruled
   texture and one barely-there warm bloom. The tone stays ivory. */
.about::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background-image:linear-gradient(to bottom, rgba(18,60,53,.055) 1px, transparent 1px);
  background-size:100% 42px;
  -webkit-mask-image:radial-gradient(80% 65% at 50% 40%, #000 0%, transparent 82%);
          mask-image:radial-gradient(80% 65% at 50% 40%, #000 0%, transparent 82%);
}
.about::after{
  content:"";
  position:absolute;
  width:700px; height:520px;
  top:-200px; right:-180px;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  filter:blur(130px);
  background:radial-gradient(closest-side, rgba(232,212,165,.34), transparent 74%);
}

.about-inner{
  position:relative;
  z-index:1;
  max-width:1300px;
  margin:0 auto;
  padding:0 34px;
  display:grid;
  grid-template-columns:minmax(0,490fr) minmax(0,610fr);
  gap:0 120px;
  align-items:start;
}

/* =========================================================
   EDITORIAL COLUMN
   ========================================================= */

.sec-label{
  display:inline-flex; align-items:center; gap:10px;
  margin:0;
  font-size:14px; font-weight:600;
  letter-spacing:.14em;
  color:var(--ink-2);
}
.sec-label .spark{
  color:var(--gold);
  font-size:15px;
  line-height:1;
  animation:spark-turn 9s linear infinite;
}
@keyframes spark-turn{ to{ transform:rotate(360deg); } }

.sec-title{
  margin:22px 0 0;
  font-size:clamp(32px, 3.5vw, 54px);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.8px;
  color:var(--ink);
}
/* the ringed word is styled by shared.css (.circled) */

.sec-desc{
  margin:26px 0 0;
  max-width:500px;
  font-size:17px;
  line-height:2.1;
  font-weight:300;
  color:var(--ink-2);
}

.pill{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:34px;
  /* text side roomy, icon side snug — logical, so it follows RTL */
  padding-block:9px;
  padding-inline:26px 9px;
  border-radius:100px;
  background:var(--ink);
  color:var(--ivory);
  font-size:16px; font-weight:600;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 14px 30px -18px rgba(18,60,53,.85);
}
.pill-ico{
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--ivory);
  color:var(--ink);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.pill-ico svg{ width:17px; height:17px; }
.pill:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 40px -18px rgba(18,60,53,.9);
}
.pill:hover .pill-ico{
  transform:translateX(-5px);
  background:var(--gold);
}

/* --- the image --- */
.about-figure{
  margin:64px 0 0;
  position:relative;
}
.about-figure img{
  display:block;
  width:100%;
  aspect-ratio:49/30;
  object-fit:cover;
  /* organic, asymmetric mask — soft but not blobby */
  border-radius:150px 34px 150px 34px;
  box-shadow:0 34px 70px -34px rgba(18,60,53,.45);
}
/* thin gold outline echoing the mask */
.about-figure::after{
  content:"";
  position:absolute; inset:12px -12px -12px 12px;
  border:1px solid rgba(212,175,90,.55);
  border-radius:150px 34px 150px 34px;
  pointer-events:none;
  z-index:-1;
}

/* =========================================================
   CARD CASCADE
   ========================================================= */

.about-cards{
  position:relative;
  perspective:1400px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:40px;
  align-items:start;
}

/* the second column rides ~100px lower, as in the reference */
.col{ display:flex; flex-direction:column; gap:40px; }
.col-b{ padding-top:100px; }

.vcard{
  position:relative;
  z-index:1;
  padding:30px 28px 32px;
  border-radius:28px;
  background:var(--surface);
  border:1px solid var(--hairline);
  box-shadow:0 22px 46px -30px rgba(18,60,53,.55);
  transform:translate3d(0, var(--y,0px), 0);
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease);
}

.vcard-ico{
  width:52px; height:52px;
  border-radius:16px;
  display:grid; place-items:center;
  color:var(--ink);
  background:var(--tint, var(--sand));
  box-shadow:inset 0 0 0 1px rgba(18,60,53,.06);
}
.vcard-ico svg{ width:25px; height:25px; }

.vcard h3{
  margin:26px 0 0;
  font-size:23px;
  font-weight:700;
  letter-spacing:-.3px;
  color:var(--ink);
}
.vcard p{
  margin:14px 0 0;
  font-size:15px;
  line-height:2.05;
  font-weight:300;
  color:var(--ink-2);
}
.vcard ul{
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.vcard li{
  position:relative;
  padding-right:20px;
  font-size:15px;
  line-height:1.95;
  font-weight:300;
  color:var(--ink-2);
}
.vcard li + li{ margin-top:8px; }
.vcard li::before{
  content:"";
  position:absolute; right:0; top:.72em;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--tint, var(--gold));
  box-shadow:0 0 0 3px rgba(212,175,90,.14);
}

.vcard--vision  { --tint:var(--sage); }
.vcard--mission { --tint:var(--sand); }
.vcard--goals   { --tint:var(--lavender); }

.vcard:hover{
  box-shadow:0 34px 60px -30px rgba(18,60,53,.62);
  border-color:rgba(212,175,90,.45);
}

/* the thread that links the cluster */
.thread{
  position:absolute;
  inset:-40px -30px -10px -30px;
  width:calc(100% + 60px);
  height:calc(100% + 50px);
  z-index:0;
  pointer-events:none;
  overflow:visible;
}
/* a drawn line, not a plotted one: the turbulence filter roughens the
   edges and makes the width waver, the same character as the brush stroke
   on the مناهج rail — in gold here. */
.thread path{
  fill:none;
  stroke:var(--gold);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#thread-rough);
  stroke-dasharray:var(--len, 2400);
  stroke-dashoffset:var(--len, 2400);
}
.about.is-seen .thread path{
  transition:stroke-dashoffset 2.2s var(--ease) .25s;
  stroke-dashoffset:0;
}

/* =========================================================
   ENTRANCE + FLOAT
   ========================================================= */

@property --y{ syntax:'<length>'; inherits:false; initial-value:0px; }

/* text block: rise one after another */
.r-up{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0s);
}
.about.is-seen .r-up{ opacity:1; transform:none; }

/* image: the site-wide blob dissolve, settling out of a slight zoom */
.about-figure{
  opacity:0;
  transition:opacity .5s var(--ease) .2s;
}
.about-figure img{
  transform:scale(1.05);
  transition:transform 1.4s var(--ease) .25s;
  --dissolve-delay:.28s;
}
.about.is-seen .about-figure{ opacity:1; }
.about.is-seen .about-figure img{ transform:none; }

/* cards: each one flies in as it reaches the viewport.
   The start matrices are lifted from the reference section — the card
   arrives small and rotated in 3D, then settles with a slight overshoot. */
.vcard{
  opacity:0;
  transform:matrix3d(
     0.192014,  0.019613, 0.262003, 0,
    -0.049880,  0.144862, 0.642788, 0,
    -0.025347, -0.136493, 0.719846, 0,
    71, 106, 0, 1);
  transition:opacity .72s var(--ease),
             transform 1.05s cubic-bezier(.18,.89,.32,1.05),
             box-shadow .45s var(--ease), border-color .45s var(--ease);
  transition-delay:calc(var(--i, 0) * .09s), calc(var(--i, 0) * .09s), 0s, 0s;
}
/* the middle card comes in on the other axis, as in the reference */
.vcard--mission{
  transform:matrix3d(
     0.099558, -0.024823, 0.939693, 0,
     0.072577,  0.291089, 0,        0,
    -0.273534,  0.068200, 0.342020, 0,
    -112, 0, 0, 1);
}
.vcard.is-in{
  opacity:1;
  transform:translate3d(0, var(--y,0px), 0);
}

/* once settled, drift gently — durations differ so they de-sync */
.vcard.is-adrift{
  animation:card-drift calc(7s + var(--i, 0) * .6s) var(--ease) infinite;
}
@keyframes card-drift{
  0%,100%{ --y:0px;   }
  50%    { --y:-14px; }
}
.vcard.is-adrift:hover{
  animation-play-state:paused;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1180px){
  .about-inner{ gap:0 64px; }
  .vcard{ padding:26px 22px 28px; border-radius:24px; }
  .vcard h3{ font-size:21px; margin-top:22px; }
  .col, .about-cards{ gap:28px; }
  .col-b{ padding-top:70px; }
}

@media (max-width:940px){
  .about{ padding:96px 0 104px; }
  .about-inner{
    grid-template-columns:minmax(0,1fr);
    gap:64px 0;
  }
  .about-figure{ margin-top:48px; max-width:560px; }
  .col-b{ padding-top:0; }
  .thread{ display:none; }
}

@media (max-width:640px){
  .about{ padding:76px 0 86px; }
  .about-inner{ padding:0 20px; }
  .sec-title{ line-height:1.45; letter-spacing:-.2px; }
  .sec-desc{ font-size:16px; line-height:2; }
  .about-cards{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .col{ gap:18px; }
  .about-figure img,
  .about-figure::after{ border-radius:90px 26px 90px 26px; }

}

@media (prefers-reduced-motion:reduce){
  .about *,
  .about *::before,
  .about *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .r-up, .vcard, .vcard--mission, .about-figure, .about-figure img{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}

}