/* Ported from the prototype's hero3.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — Hero
   Dark premium Islamic EdTech: forest green, charcoal, gold
   ========================================================= */

:root{
  /* --- surface --- */
  --bg:            #071F1A;   /* deep forest */
  --bg-mid:        #0B2923;   /* charcoal green */
  --bg-lift:       #103A32;   /* top-of-hero lift */

  /* --- ink --- */
  --ink:           #F8F3E7;   /* warm white */
  --ink-soft:      rgba(248,243,231,.66);
  --ink-faint:     rgba(248,243,231,.36);
  --line:          rgba(248,243,231,.10);

  /* --- accent: أترجة gold --- */
  --gold:          #D4AF5A;
  --gold-light:    #E6D0A0;
  --gold-deep:     #B08F3E;

  /* --- card palette --- */
  --c-ivory:       #F4EFE3;
  --c-sage:        #9DBFA8;
  --c-gold:        #C8A85A;
  --c-olive:       #B8B58A;
  --c-teal:        #174A43;
  --c-sand:        #D8C39A;

  --card-ink:      #0E2721;   /* text on light cards */

  --radius-card:   26px;
  --nav-h:         92px;
  --max:           1240px;

  --ease:      cubic-bezier(.22,.68,.32,1);
  --ease-drop: cubic-bezier(.17,.78,.30,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: overflow-x:hidden makes the page a scroll
     container and silently breaks position:sticky further down
     (the pinned 3D scene in معلمو الأترجة). clip guards the same
     horizontal overflow without that side effect. */
  overflow-x:clip;
}

a{ text-decoration:none; color:inherit; }

/* =========================================================
   HERO SHELL + BACKGROUND
   ========================================================= */

.hero{
  position:relative;
  min-height:100svh;
  padding-bottom:60px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--bg-lift) 0%, var(--bg-mid) 44%, var(--bg) 100%);
}

/* fine dotted matrix */
.bg-dots{
  position:absolute; inset:-10% -10% 0 -10%;
  background-image:radial-gradient(rgba(248,243,231,.14) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 34%, #000 0%, rgba(0,0,0,.45) 55%, transparent 82%);
          mask-image:radial-gradient(75% 60% at 50% 34%, #000 0%, rgba(0,0,0,.45) 55%, transparent 82%);
  opacity:.5;
  z-index:0;
  animation:dots-drift 40s linear infinite;
}
@keyframes dots-drift{ to{ background-position:26px 26px; } }

/* the canvas matrix replaces the static pattern once JS takes over */
.has-matrix .bg-dots{ display:none; }

.bg-matrix{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(85% 70% at 50% 34%, #000 0%, rgba(0,0,0,.55) 58%, transparent 88%);
          mask-image:radial-gradient(85% 70% at 50% 34%, #000 0%, rgba(0,0,0,.55) 58%, transparent 88%);
}

/* very soft structural grid */
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to left, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:110px 110px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 70%);
          mask-image:linear-gradient(to bottom, #000 0%, transparent 70%);
  opacity:.32;
  z-index:0;
}

.bg-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(130px);
  z-index:0;
  pointer-events:none;
}
.glow-a{
  width:780px; height:520px;
  top:-210px; left:50%; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(212,175,90,.24), transparent 70%);
  animation:breathe 12s var(--ease) infinite;
}
.glow-b{
  width:920px; height:640px;
  bottom:-330px; left:50%; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(157,191,168,.15), transparent 72%);
  animation:breathe 15s var(--ease) infinite reverse;
}
@keyframes breathe{
  0%,100%{ opacity:.72; }
  50%    { opacity:1; }
}

.bg-vignette{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 45%, rgba(3,16,13,.55) 100%);
}

/* =========================================================
   NAVBAR
   ========================================================= */

.nav{
  position:relative;
  z-index:10;
  height:var(--nav-h);
  max-width:var(--max);
  margin:0 auto;
  padding:0 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  animation:nav-in .9s var(--ease) both;
}
@keyframes nav-in{ from{ opacity:0; transform:translateY(-14px); } }

.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  color:#0E2721;
  background:linear-gradient(145deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  box-shadow:0 8px 22px -10px rgba(212,175,90,.9);
}
.brand-mark svg{ width:23px; height:23px; }
.brand-text{ font-size:23px; font-weight:700; letter-spacing:-.2px; }
.brand-logo{ display:block; width:auto; height:44px; }

.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  position:relative;
  font-size:15.5px;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute; inset:auto 0 -9px 0;
  height:2px; border-radius:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:transform .3s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after,
.nav-links a.is-active::after{ transform:scaleX(1); }
.nav-links a.is-active{ color:var(--ink); }

.nav-actions{ display:flex; align-items:center; gap:16px; }
.link-login{
  font-size:15.5px; font-weight:500; color:var(--ink-soft);
  transition:color .25s var(--ease);
}
.link-login:hover{ color:var(--ink); }

/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-weight:600; font-size:17px;
  padding:17px 34px;
  border-radius:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease);
}
.btn-sm{ font-size:15px; padding:11px 22px; border-radius:11px; }

.btn-primary{
  color:#0E2721;
  background:linear-gradient(140deg, var(--gold-light) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:0 14px 34px -16px rgba(212,175,90,.85);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px -16px rgba(212,175,90,.95);
}

.btn-ghost{
  color:var(--ink);
  background:rgba(248,243,231,.04);
  border-color:rgba(248,243,231,.20);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  transform:translateY(-2px);
  background:rgba(248,243,231,.08);
  border-color:rgba(212,175,90,.5);
}

.nav-toggle{
  display:none;
  width:42px; height:42px; border-radius:11px;
  background:rgba(248,243,231,.06);
  border:1px solid var(--line);
  cursor:pointer;
  padding:0;
  place-items:center; gap:5px;
}
.nav-toggle span{
  display:block; width:17px; height:1.8px; border-radius:2px; background:var(--ink);
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-inner{
  position:relative; z-index:5;
  max-width:var(--max);
  margin:0 auto;
  padding:34px 34px 0;
  text-align:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500;
  color:var(--ink-soft);
  padding:9px 18px;
  border-radius:100px;
  border:1px solid var(--line);
  background:rgba(248,243,231,.035);
  backdrop-filter:blur(10px);
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--c-sage);
  box-shadow:0 0 0 4px rgba(157,191,168,.14);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(157,191,168,0); } }

.headline{
  margin:24px 0 0;
  font-size:clamp(38px, 6.6vw, 88px);
  line-height:1.16;
  font-weight:700;
  letter-spacing:-1.4px;
}
.headline .line{ display:block; }

.accent{
  font-style:normal;
  position:relative;
  background:linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 48%, var(--gold-deep) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.accent::after{
  content:"";
  position:absolute; inset:auto 2% -.12em 2%;
  height:.07em; border-radius:99px;
  background:linear-gradient(to left, transparent, rgba(212,175,90,.55), transparent);
}

.sub{
  max-width:640px;
  margin:20px auto 0;
  font-size:clamp(16px, 1.35vw, 19px);
  line-height:1.95;
  font-weight:300;
  color:var(--ink-soft);
}

.cta{
  margin-top:30px;
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}

/* =========================================================
   FLOATING CARDS
   ========================================================= */

.cards{
  position:relative;
  height:380px;
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card{
  position:absolute;
  width:190px;
  aspect-ratio:1/1;
  border-radius:var(--radius-card);
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:2px;
  text-align:right;
  color:var(--card-ink);
  box-shadow:
    0 26px 60px -22px rgba(3,16,13,.85),
    0 2px 0 0 rgba(255,255,255,.22) inset;
  will-change:transform;
  cursor:default;
  opacity:0;

  /* entrance + float + parallax + hover all compose here */
  transform:
    translate3d(var(--px,0px), calc(var(--y,0px) + var(--py,0px)), 0)
    rotate(calc(var(--rot,0deg) + var(--rz,0deg)))
    scale(var(--s,1));
  transition:box-shadow .4s var(--ease), filter .4s var(--ease), --s .35s var(--ease);
}

.card-ico{
  width:38px; height:38px;
  margin-bottom:auto;
  border-radius:11px;
  display:grid; place-items:center;
  background:rgba(14,39,33,.10);
  color:var(--card-ink);
}
.card-ico svg{ width:21px; height:21px; }

.card-num{
  font-size:38px; font-weight:700; line-height:1;
  letter-spacing:-1px;
  direction:ltr;
  unicode-bidi:isolate;
}
.card-label{
  font-size:13.5px; font-weight:500;
  opacity:.68;
  margin-top:6px;
}

.card:hover{
  filter:brightness(1.04);
  box-shadow:
    0 34px 74px -20px rgba(3,16,13,.9),
    0 0 0 1px rgba(248,243,231,.18),
    0 0 44px -8px var(--halo, rgba(212,175,90,.35)),
    0 2px 0 0 rgba(255,255,255,.26) inset;
}

/* --- palette --- */
.card--ivory{ background:linear-gradient(162deg,var(--c-ivory) 0%, #E6DDCA 100%); --halo:rgba(244,239,227,.38); }
.card--sage { background:linear-gradient(162deg,var(--c-sage) 0%, #84AA90 100%);  --halo:rgba(157,191,168,.45); }
.card--gold { background:linear-gradient(162deg,var(--c-gold) 0%, #AE8E44 100%);  --halo:rgba(200,168,90,.50); }
.card--olive{ background:linear-gradient(162deg,var(--c-olive) 0%, #9F9C72 100%); --halo:rgba(184,181,138,.45); }
.card--sand { background:linear-gradient(162deg,var(--c-sand) 0%, #C0A97F 100%);  --halo:rgba(216,195,154,.45); }

.card--teal {
  background:linear-gradient(162deg,#1C574E 0%, #113A34 100%);
  color:var(--ink);
  --halo:rgba(212,175,90,.42);
  box-shadow:
    0 26px 60px -22px rgba(3,16,13,.9),
    0 0 0 1px rgba(212,175,90,.22) inset;
}
.card--teal .card-ico{ background:rgba(212,175,90,.16); color:var(--gold); }
.card--teal .card-num{ color:var(--gold-light); }

/* --- layout: wave of six --- */
.c1{ right:2%;    top:86px;  width:196px; --rot:-9deg;   }
.c2{ right:17%;   top:132px; width:206px; --rot:-4deg;   }
.c3{ right:32%;   top:34px;  width:214px; --rot:-1.5deg; }
.c4{ left:32%;    top:78px;  width:214px; --rot:3deg;    }
.c5{ left:17%;    top:26px;  width:206px; --rot:6deg;    }
.c6{ left:2%;     top:112px; width:196px; --rot:10deg;   }

/* animatable custom props (so drop + float interpolate) */
@property --y  { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --rz { syntax:'<angle>';  inherits:false; initial-value:0deg; }
@property --s  { syntax:'<number>'; inherits:false; initial-value:1; }

/* --- 1. drop in from above, staggered --- */
/* Nuxt: [data-in] is set by an inline script right after parsing (as hero3.js did), before hydration */
.cards.is-in .card, .cards[data-in] .card{
  animation:drop 1.1s linear both;
  animation-delay:calc(var(--i) * .13s);
}
/* gravity on the way down, then a short settle — per-segment easing */
@keyframes drop{
  0%   { opacity:0; --y:-560px; --rz:-15deg;
         animation-timing-function:cubic-bezier(.55,.06,.68,.19); }
  14%  { opacity:1; }
  56%  { --y:26px; --rz:3.6deg;
         animation-timing-function:cubic-bezier(.33,0,.18,1); }
  76%  { --y:-11px; --rz:-2deg;
         animation-timing-function:cubic-bezier(.36,0,.22,1); }
  89%  { --y:4px;  --rz:.6deg;
         animation-timing-function:var(--ease); }
  100% { opacity:1; --y:0px; --rz:0deg; }
}

/* --- 2. hand over to the endless float --- */
.card.is-settled{
  opacity:1;
  /* no negative delay: the loop must start at --y:0, exactly where the drop ended.
     cards de-sync through slightly different durations instead. */
  animation:float calc(6.2s + var(--i) * .38s) var(--ease) infinite;
}
@keyframes float{
  0%,100%{ --y:0px;    --rz:0deg;    }
  50%    { --y:-22px;  --rz:-1.6deg; }
}

/* =========================================================
   ENTRANCE REVEALS
   ========================================================= */

.reveal{
  opacity:0;
  transform:translateY(26px);
  animation:reveal .95s var(--ease) both;
  animation-delay:var(--d, 0s);
}
@keyframes reveal{ to{ opacity:1; transform:none; } }

.headline .line{
  opacity:0;
  transform:translateY(34px);
  animation:reveal 1.05s var(--ease) both;
  animation-delay:var(--d, 0s);
}

.scroll-hint{
  position:absolute;
  bottom:26px; left:50%;
  transform:translateX(-50%);
  width:24px; height:38px;
  border:1.5px solid rgba(248,243,231,.20);
  border-radius:99px;
  z-index:6;
}
.scroll-hint span{
  position:absolute; top:8px; left:50%;
  width:3px; height:7px; border-radius:99px;
  background:var(--gold);
  animation:scroll-dot 2s var(--ease) infinite;
}
@keyframes scroll-dot{
  0%    { transform:translate(-50%,0);    opacity:0; }
  30%   { opacity:1; }
  100%  { transform:translate(-50%,16px); opacity:0; }
}

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

@media (max-width:1180px){
  .cards{ height:360px; }
  .card{ padding:18px; }
  .card-num{ font-size:32px; }
  .c1,.c6{ width:170px; }
  .c2,.c5{ width:178px; }
  .c3,.c4{ width:186px; }
}

/* laptop band: keep the wave from colliding */
@media (min-width:861px) and (max-width:1100px){
  .nav{ padding:0 24px; gap:18px; }
  .nav-links{ gap:20px; }
  .nav-links a, .link-login{ font-size:14.5px; }
  .cards{ height:320px; margin-top:0; }
  .card{ padding:15px; border-radius:22px; }
  .card-ico{ width:32px; height:32px; border-radius:9px; }
  .card-ico svg{ width:18px; height:18px; }
  .card-num{ font-size:26px; }
  .card-label{ font-size:12px; margin-top:4px; }
  .c1{ right:0;   top:74px;  width:144px; }
  .c2{ right:16%; top:110px; width:150px; }
  .c3{ right:32%; top:30px;  width:156px; }
  .c4{ left:32%;  top:66px;  width:156px; }
  .c5{ left:16%;  top:24px;  width:150px; }
  .c6{ left:0;    top:96px;  width:144px; }
}

@media (max-width:940px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
  .link-login{ display:none; }
  .hero-inner{ padding-top:30px; }

  /* mobile nav panel */
  .nav-links.is-open{
    display:flex;
    position:absolute;
    top:calc(var(--nav-h) - 8px);
    right:20px; left:20px;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    border-radius:18px;
    border:1px solid var(--line);
    background:rgba(11,41,35,.94);
    backdrop-filter:blur(18px);
    box-shadow:0 30px 60px -24px rgba(3,16,13,.9);
    animation:reveal .4s var(--ease) both;
  }
  .nav-links.is-open a{ padding:12px 10px; font-size:16px; }
  .nav-links.is-open a::after{ display:none; }
}

@media (max-width:860px){
  :root{ --nav-h:76px; }
  .nav{ padding:0 20px; }
  .hero-inner{ padding:30px 20px 0; }
  .headline{ letter-spacing:-.6px; }
  .sub{ line-height:1.85; }

  /* calm 2-column grid — cards still drop in, no overlap */
  .cards{
    position:static;
    height:auto;
    margin-top:46px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
  .card{
    position:static;
    width:auto !important;
    aspect-ratio:1/1.02;
    --rot:0deg !important;
    padding:18px;
  }
  .card-num{ font-size:30px; }
  .card-label{ font-size:12.5px; }
  .scroll-hint{ display:none; }
}

@media (max-width:420px){
  .btn{ width:100%; }
  .cta{ flex-direction:column; }
  .card{ border-radius:20px; padding:15px; }
  .card-ico{ width:32px; height:32px; border-radius:9px; }
  .card-num{ font-size:26px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.headline .line,.card{ opacity:1 !important; transform:none !important; }
}

}