/* =====================================================================
   Girls Power Academy — نظام الألوان والحركة
   الألوان مأخوذة من اللوجو نفسه:
     الوردي  #DE66B0   (خلفية اللوجو)
     الأصفر  #FAD008   (البرق)
   الوردي فاتح، فالنصوص تستخدم درجات أعمق من نفس اللون لضمان الوضوح.
   ===================================================================== */
:root{
  /* --- هوية اللوجو --- */
  --brand:#DE66B0;          /* وردي اللوجو — للأسطح والتعبئة */
  --brand-lift:#EC8AC6;     /* أفتح — للتوهج */
  --brand-mid:#C2478F;      /* متوسط — للحدود النشطة */
  --brand-deep:#9B2E6C; --brand-2:#C2478F;     /* عميق — لنصوص التمييز */
  --brand-dark:#6E1B4A;     /* أعمق — لنهاية التدرّج */
  --brand-ink:#FFFFFF;
  --brand-soft:#FCE9F4;
  --brand-mist:#FDF3F9;

  --bolt:#FAD008;           /* أصفر البرق */
  --bolt-lift:#FFE614;
  --bolt-deep:#B88F00;
  --bolt-ink:#4A3800;

  /* --- محايدات بميل وردي --- */
  --bg:#FFF8FC; --surface:#FFFFFF; --surface-2:#FDF2F8; --surface-3:#FAE7F2;
  --ink:#2A1526; --ink-2:#6B4A5E; --ink-3:#9C7A8B;
  --line:#F4DCEA; --line-2:#E9C4DC;

  --ok:#0E9C74; --ok-soft:#DFF5EE;
  --crit:#D92D4E; --crit-soft:#FCE3E8;

  --shadow-sm:0 1px 2px rgba(42,21,38,.05), 0 6px 18px -10px rgba(42,21,38,.18);
  --shadow:0 1px 2px rgba(42,21,38,.06), 0 12px 32px -14px rgba(42,21,38,.26);
  --glow:0 0 0 4px rgba(222,102,176,.18);

  --r:14px; --r-lg:22px; --r-xl:30px;
  --f-display:"Alexandria","Segoe UI",system-ui,sans-serif;
  --f-body:"Readex Pro","Segoe UI",system-ui,sans-serif;

  /* --- منحنيات الحركة --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.18s; --t:.34s; --t-slow:.6s;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#EC8AC6; --brand-lift:#F5A9D6; --brand-mid:#DE66B0;
    --brand-deep:#F7C2E1; --brand-2:#DE66B0; --brand-dark:#4A1233; --brand-ink:#2A0A1C;
    --brand-soft:#3C1730; --brand-mist:#2A1024;
    --bolt:#FFDE3D; --bolt-lift:#FFEA7A; --bolt-deep:#C9A200; --bolt-ink:#3A2C00;

    --bg:#160A11; --surface:#20101A; --surface-2:#2B1624; --surface-3:#361C2D;
    --ink:#FDEFF7; --ink-2:#CDA3BC; --ink-3:#9C7A8B;
    --line:#3A1E30; --line-2:#4E2A40;

    --ok:#34D3A3; --ok-soft:#0F2C24;
    --crit:#FF6B84; --crit-soft:#3A1620;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
    --glow:0 0 0 4px rgba(236,138,198,.22);
  }
}
:root[data-theme="dark"]{
  --brand:#EC8AC6; --brand-lift:#F5A9D6; --brand-mid:#DE66B0;
  --brand-deep:#F7C2E1; --brand-2:#DE66B0; --brand-dark:#4A1233; --brand-ink:#2A0A1C;
  --brand-soft:#3C1730; --brand-mist:#2A1024;
  --bolt:#FFDE3D; --bolt-lift:#FFEA7A; --bolt-deep:#C9A200; --bolt-ink:#3A2C00;

  --bg:#160A11; --surface:#20101A; --surface-2:#2B1624; --surface-3:#361C2D;
  --ink:#FDEFF7; --ink-2:#CDA3BC; --ink-3:#9C7A8B;
  --line:#3A1E30; --line-2:#4E2A40;

  --ok:#34D3A3; --ok-soft:#0F2C24;
  --crit:#FF6B84; --crit-soft:#3A1620;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -14px rgba(0,0,0,.8);
  --glow:0 0 0 4px rgba(236,138,198,.22);
}

/* =====================================================================
   الحركات المشتركة
   ===================================================================== */
@keyframes gp-rise      {from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes gp-in-next   {from{opacity:0; transform:translateX(-34px)} to{opacity:1; transform:none}}
@keyframes gp-in-back   {from{opacity:0; transform:translateX(34px)}  to{opacity:1; transform:none}}
@keyframes gp-drop      {from{opacity:0; transform:translateY(-18px) scale(.88)} to{opacity:1; transform:none}}
@keyframes gp-pop       {from{opacity:0; transform:scale(.4)} to{opacity:1; transform:scale(1)}}
@keyframes gp-shake     {10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-5px)}}
@keyframes gp-sweep     {from{transform:translateX(-120%)} to{transform:translateX(320%)}}
@keyframes gp-flicker   {0%,100%{opacity:.5; transform:translateY(0) scale(1)} 50%{opacity:1; transform:translateY(-3px) scale(1.08)}}
@keyframes gp-charge    {0%{box-shadow:0 0 0 0 rgba(250,208,8,.55)} 70%{box-shadow:0 0 0 14px rgba(250,208,8,0)} 100%{box-shadow:0 0 0 0 rgba(250,208,8,0)}}
@keyframes gp-breathe   {0%,100%{opacity:.5} 50%{opacity:.95}}
@keyframes gp-spin      {to{transform:rotate(360deg)}}
@keyframes gp-mask-up   {from{opacity:0; transform:translateY(100%)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}