/* Ported from the prototype's tajarib.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — تجارب الأترجة (آراء الطلاب والمعلمين)
   ---------------------------------------------------------
   Rebuilt from the "Bento" block on aivoix-ttm.framer.website,
   measured at 1440 and read off its component code:

     · a 1050px grid, 20px gaps: a 370px column of two cards
       beside a 660×560 photo card
     · top card: three photos on a loop — one 160px square in
       front, two 120px squares behind it at ∓10°, 28px lower.
       Every 4.5s they trade places (front → start side,
       start → end, end → front) in 0.5s, ease(.44,0,.56,1)
     · photo card: 80px padding around a stack of three white
       quote cards. The front one sits flat at full size; the
       two behind are tilted ∓6° and peek out. Every 3s the stack
       turns (front → −6°, −6° → +6°, +6° → front), same 0.5s
     · white cards: 15px radius, 30px padding, an inset 5px
       lip on the bottom edge and a faint 15px drop shadow

   On top of that, per the brief: a calm scroll reveal, a slow
   zoom and a light parallax on the big photo, soft hover lift.
   ========================================================= */

.tajarib{
  --bg:      #EDF4EC;
  --ink:     #123C35;
  --ink-2:   #5F6F68;
  --gold:    #D4AF5A;
  --ivory:   #F8F5ED;
  --sage:    #A8C7B5;
  --chip:    #F2F5EF;

  --swap:  .5s cubic-bezier(.44,0,.56,1);
  --ease:  cubic-bezier(.22,.68,.32,1);

  --lip:
    inset 0 -5px 3px 0 rgba(18,60,53,.13),
    0 2px 15px 0 rgba(18,60,53,.06);
  --lip-lift:
    inset 0 -5px 3px 0 rgba(18,60,53,.13),
    0 18px 36px -12px rgba(18,60,53,.22);

  --seam:160px;
  position:relative;
  padding:clamp(100px, 11vw, 150px) 20px clamp(110px, 12vw, 160px);
  color:var(--ink);
  overflow:hidden;
}

/* =========================================================
   HEADER
   ========================================================= */

.tjr-head{
  max-width:820px;
  margin:0 auto;
  padding:0 14px clamp(48px, 6vw, 72px);
  text-align:center;
}

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

.tjr-title{
  margin:20px 0 0;
  font-size:clamp(34px, 5vw, 68px);
  line-height:1.35;
  font-weight:700;
  letter-spacing:-1px;
  color:var(--ink);
}

.tjr-desc{
  margin:34px auto 0;
  max-width:600px;
  font-size:17px;
  line-height:2.05;
  font-weight:300;
  color:var(--ink-2);
}

/* =========================================================
   THE BENTO
   ========================================================= */

.tjr-grid{
  display:grid;
  grid-template-columns:370px 660px;
  justify-content:center;
  gap:20px;
  max-width:1050px;
  margin:0 auto;
}

.tjr-col{
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
}

.tjr-card{
  position:relative;
  border-radius:15px;
  box-shadow:var(--lip);
  transition:box-shadow .5s var(--ease), translate .5s var(--ease);
}
.tjr-card:hover{ box-shadow:var(--lip-lift); translate:0 -4px; }

/* --- teachers card --- */
.tjr-teachers{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  padding:30px;
  background:#FFFFFF;
}

.tjr-loop{
  position:relative;
  width:min(310px, 100%);
  height:160px;
  margin:0 auto;
}
.tjr-shot{
  position:absolute;
  top:0;
  left:calc(50% - 80px);
  width:160px; height:160px;
  margin:0;
  border-radius:15px;
  overflow:hidden;
  background:#E6EAE6;
  transform:translateY(var(--y, 0px)) scale(var(--s, 1)) rotate(var(--r, 0deg));
  transition:left var(--swap), transform var(--swap), box-shadow var(--swap);
  will-change:transform;
}
.tjr-shot img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 16%;
}
/* the three slots. The two behind are 120px (scale .75), 28px lower,
   hugging the edges of the 310px strip */
.tjr-shot[data-slot="front"]{
  z-index:3;
  --y:0px; --s:1; --r:0deg;
  box-shadow:0 0 20px 0 rgba(18,60,53,.30);
}
.tjr-shot[data-slot="start"]{
  z-index:2;
  left:calc(100% - 140px);
  --y:8px; --s:.75; --r:10deg;
}
.tjr-shot[data-slot="end"]{
  z-index:2;
  left:-20px;
  --y:8px; --s:.75; --r:-10deg;
}

.tjr-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.tjr-badge{
  display:inline-flex; align-items:center; gap:12px;
  margin:0;
  padding:5px 18px;
  border-radius:40px;
  background:var(--chip);
  border:1px solid rgba(18,60,53,.08);
  font-size:15px;
  line-height:26px;
  color:var(--ink-2);
}
.tjr-dot{
  position:relative;
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(63,160,106,.14);
  box-shadow:0 1px 2px 0 rgba(212,175,90,.9);
}
.tjr-dot::after{
  content:"";
  position:absolute; inset:2.5px;
  border-radius:50%;
  background:#3FA06A;
  animation:tjr-pulse 2.4s ease-in-out infinite;
}
@keyframes tjr-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(.6); opacity:.55; }
}

.tjr-info h3{
  margin:0;
  font-size:26px;
  line-height:1.45;
  font-weight:600;
  color:var(--ink);
}
.tjr-info p{
  margin:0;
  max-width:290px;
  font-size:15px;
  line-height:1.85;
  color:var(--ink-2);
}

.tjr-link{
  position:relative;
  margin-top:10px;
  font-size:15px;
  line-height:28px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.tjr-link::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:1px;
  background:currentColor;
  transform-origin:100% 50%;
  transition:transform .45s var(--ease), background-color .3s ease;
}
.tjr-link:hover{ color:#0B2923; }
.tjr-link:hover::after{ transform:scaleX(.35); background:var(--gold); }

/* --- students card --- */
.tjr-students{
  display:flex;
  align-items:center;
  gap:20px;
  padding:30px;
  background:var(--gold);
  overflow:hidden;
}

.tjr-faces{
  display:flex;
  flex:none;
  padding:12px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.22);
  box-shadow:inset 0 -2px 2px 0 rgba(18,60,53,.14), 0 2px 15px 0 rgba(18,60,53,.05);
}
.tjr-faces img{
  display:block;
  width:36px; height:36px;
  border-radius:50%;
  border:2px solid #FFFFFF;
  object-fit:cover;
  transition:transform .45s var(--ease);
}
.tjr-faces img + img{ margin-inline-start:-13px; }
.tjr-students:hover .tjr-faces img{ transform:translateY(-3px); }
.tjr-students:hover .tjr-faces img:nth-child(2){ transition-delay:.05s; }
.tjr-students:hover .tjr-faces img:nth-child(3){ transition-delay:.1s; }

.tjr-students h3{
  margin:0;
  white-space:nowrap;
  font-size:19px;
  line-height:28px;
  font-weight:600;
  color:var(--ink);
}
.tjr-students p{
  margin:4px 0 0;
  font-size:15px;
  line-height:1.6;
  color:rgba(18,60,53,.78);
}
.tjr-students strong{
  font-weight:700;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* --- the photo card with the quote stack --- */
.tjr-stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:560px;
  margin:0;
  padding:80px;
  border-radius:15px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 4px 4px 0 rgba(18,60,53,.18), 0 30px 60px -30px rgba(18,60,53,.35);
}

.tjr-bg{
  position:absolute; inset:0;
  z-index:-1;
  overflow:hidden;
  transform:scale(var(--zoom, 1.14));
  transition:transform 2.2s var(--ease);
}
.tajarib.is-seen .tjr-bg{ --zoom:1.06; }
.tjr-stage:hover .tjr-bg{ --zoom:1.1; transition-duration:1.4s; }
.tjr-bg img{
  display:block;
  width:100%;
  height:calc(100% + 60px);
  margin-top:-30px;
  object-fit:cover;
  object-position:50% 60%;
  transform:translate3d(0, var(--py, 0px), 0);
  will-change:transform;
}
/* a whisper of the brand green over the photo so the white cards
   sit on it rather than float off it */
.tjr-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,60,53,.04) 0%, rgba(18,60,53,.16) 100%);
}

.tjr-stack{
  position:relative;
  display:grid;
  width:min(390px, 100%);
}
.tjr-quote{
  grid-area:1 / 1;
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:30px;
  margin:0;
  padding:30px;
  border-radius:15px;
  background:#FFFFFF;
  box-shadow:var(--lip);
  transform:scale(var(--s, 1)) rotate(var(--r, 0deg));
  transition:transform var(--swap), opacity var(--swap);
  will-change:transform;
}
.tjr-quote[data-slot="front"]{ z-index:3; --s:1;  --r:0deg; }
.tjr-quote[data-slot="prev"] { z-index:1; --s:.98; --r:6deg; }
.tjr-quote[data-slot="next"] { z-index:2; --s:.98; --r:-6deg; }
/* the reference code has the two behind at scale .9 / ±5°, but at that
   size they hide completely behind the front card; your screenshot shows
   them peeking out on both sides, which needs ~.98 / ±6° */
.tjr-quote:not([data-slot="front"]) > *{ opacity:.9; }

.tjr-qmark{
  display:grid;
  place-items:center;
  width:60px; height:60px;
  border-radius:15px;
  background:var(--chip);
  box-shadow:inset 0 -2px 1px rgba(18,60,53,.14), 0 2px 8px rgba(18,60,53,.08);
}
.tjr-qmark svg{
  width:34px; height:28px;
  transform:scaleX(-1);          /* the opening mark faces the text in RTL */
}

.tjr-quote blockquote{ margin:0; }
.tjr-quote blockquote p{
  margin:0;
  font-size:19px;
  line-height:1.75;
  font-weight:500;
  color:#16211D;
}

.tjr-who{
  display:flex;
  align-items:center;
  gap:20px;
}
.tjr-who img{
  flex:none;
  width:80px; height:80px;
  border-radius:10px;
  object-fit:cover;
  object-position:50% 20%;
  background:#E6EAE6;
}
.tjr-who strong{
  display:block;
  font-size:20px;
  line-height:28px;
  font-weight:600;
  color:#16211D;
}
.tjr-who span{
  display:block;
  font-size:15px;
  line-height:26px;
  color:#7D7C7C;
}

/* =========================================================
   REVEAL — calm rise, one card after another
   ========================================================= */

.tjr-up{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d, 0s);
}
.tajarib.is-seen .tjr-up{ opacity:1; transform:none; }

.tjr-rise{
  opacity:0;
  translate:0 44px;
  transition:opacity .95s var(--ease), translate .95s var(--ease), box-shadow .5s var(--ease);
  transition-delay:var(--d, 0s);
}
.tajarib.is-seen .tjr-rise{ opacity:1; translate:0 0; }
.tajarib.is-seen .tjr-card.tjr-rise:hover{ translate:0 -4px; transition-delay:0s; }

/* the quote stack fans out from a single card once the photo has landed */
.tajarib:not(.is-seen) .tjr-quote:not([data-slot="front"]){ --s:.9; --r:0deg; opacity:0; }
.tajarib.is-seen .tjr-quote{ transition-delay:.75s; }
.tajarib.is-live .tjr-quote{ transition-delay:0s; }

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

@media (max-width:1100px){
  .tjr-grid{ grid-template-columns:minmax(0, 370fr) minmax(0, 660fr); }
  .tjr-stage{ padding:60px 40px; }
}

@media (max-width:900px){
  .tajarib{ padding-inline:16px; }
  .tjr-grid{
    grid-template-columns:1fr;
    max-width:560px;
  }
  .tjr-stage{ order:-1; min-height:0; padding:64px 28px; }
  .tjr-col{ gap:16px; }
  .tjr-teachers{ gap:32px; }
}

@media (max-width:480px){
  .tjr-stage{ padding:48px 18px; }
  .tjr-quote{ gap:22px; padding:24px; }
  .tjr-quote blockquote p{ font-size:17px; }
  .tjr-who{ gap:14px; }
  .tjr-who img{ width:60px; height:60px; }
  .tjr-who strong{ font-size:18px; }
  .tjr-teachers{ padding:26px 20px; }
  .tjr-info h3{ font-size:23px; }
  .tjr-students{ padding:22px 20px; gap:16px; }
  .tjr-students h3{ font-size:18px; }
}

@media (prefers-reduced-motion:reduce){
  .tajarib .spark,
  .tjr-dot::after{ animation:none; }
  .tjr-up, .tjr-rise{ opacity:1 !important; transform:none !important; translate:none !important; transition:none !important; }
  .tjr-bg, .tjr-bg img, .tjr-shot, .tjr-quote{ transition:none !important; }
  .tjr-bg img{ transform:none !important; }
}


}