/* ============================================================
   Course Student — Base
   Reset, body, ambient bg, container, keyframes, utilities
   Depends on: variables.css
   ============================================================ */

/* ----- Reset ----- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'Cairo', sans-serif;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
table{border-collapse:collapse;width:100%}
input,textarea,select{font-family:inherit;color:inherit}

/* Hide scrollbars where used as horizontal pill strips */
.no-scrollbar{scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}

/* ----- Ambient background ----- */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;z-index:0;
  background: var(--ambient-1), var(--ambient-2);
}

/* ----- Material grain (premium "printed" feel) -----
   Single-line SVG fractal noise, zero asset weight, blended
   into the page so flat surfaces stop looking digital. */
body::after{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:9000;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}
:root[data-theme="light"] body::after{
  opacity:.045;
  mix-blend-mode:multiply;
}

/* ----- Layout helpers ----- */
.container{
  max-width:1440px;
  margin:0 auto;
  padding:0 64px;
  position:relative;
  z-index:1;
}

@media (max-width:1100px){
  .container{padding:0 32px}
}
@media (max-width:768px){
  .container{padding:0 20px}
}

/* ----- Typography utilities ----- */
.accent-gold{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.accent-crimson-gold{
  background:linear-gradient(135deg,var(--crimson),var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Linen accent — instructor names, pull-quotes, footer microcopy.
   Reads as parchment on dark, as warm bronze on light. */
.accent-linen{
  color:var(--linen);
  font-family:var(--font-display);
  letter-spacing:.005em;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(212,160,23,.08);
  border:1px solid var(--line-strong);
  color:var(--gold-light);
  font-size:13px;font-weight:600;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px var(--gold);
}

/* Card top accent line — apply on .has-top-line elements */
.has-top-line{position:relative}
.has-top-line::before{
  content:"";position:absolute;
  top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.6;
  pointer-events:none;
}

/* Visually hidden (screen readers only) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ----- Shared keyframes ----- */
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(1.15)}
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:.2}
}

@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

@keyframes shine{
  0%{transform:translateX(100%)}
  100%{transform:translateX(-100%)}
}

@keyframes ringPulse{
  0%{opacity:.7;transform:scale(.95)}
  100%{opacity:0;transform:scale(1.15)}
}

@keyframes goldPulse{
  0%,100%{box-shadow:0 8px 22px rgba(212,160,23,.4)}
  50%{box-shadow:0 12px 30px rgba(240,192,64,.65)}
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================================
   Premium ambient layers — auto-injected by ui.js
   .cs-mesh    : slow-drifting crimson/gold mesh gradient
   .cs-stardust: floating "knowledge nodes" (14 dots)
   Both sit behind .container (z-index:1) and ignore pointer events.
   ============================================================ */
.cs-mesh,
.cs-stardust{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.cs-mesh{
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(176,32,53,.22), transparent 60%),
    radial-gradient(50% 45% at 85% 20%, rgba(212,160,23,.16), transparent 65%),
    radial-gradient(55% 50% at 70% 90%, rgba(123,13,30,.20), transparent 60%),
    radial-gradient(45% 40% at 10% 85%, rgba(240,192,64,.10), transparent 65%);
  filter: blur(20px);
  opacity:.65;
  animation: meshDrift 40s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Aurora ribbon — slow diagonal sheen of gold/crimson light that
   travels across the page. Visible motion without noise. */
.cs-mesh::after{
  content:"";
  position:absolute; inset:-30%;
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(212,160,23,.10) 46%,
    rgba(240,192,64,.16) 50%,
    rgba(176,32,53,.10) 54%,
    transparent 62%,
    transparent 100%
  );
  filter: blur(40px);
  animation: auroraDrift 38s linear infinite;
  pointer-events:none;
  will-change: transform;
}
:root[data-theme="light"] .cs-mesh::after{
  background:linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(212,160,23,.18) 46%,
    rgba(240,192,64,.22) 50%,
    rgba(123,13,30,.10) 54%,
    transparent 62%,
    transparent 100%
  );
}

@keyframes auroraDrift{
  0%   { transform: translate3d(-30%,-10%,0) rotate(0deg); }
  50%  { transform: translate3d( 10%, 5%,0)  rotate(2deg); }
  100% { transform: translate3d( 30%,10%,0)  rotate(0deg); }
}

:root[data-theme="light"] .cs-mesh{
  background:
    radial-gradient(60% 50% at 20% 30%, rgba(212,160,23,.18), transparent 60%),
    radial-gradient(50% 45% at 85% 20%, rgba(176,32,53,.10), transparent 65%),
    radial-gradient(55% 50% at 70% 90%, rgba(212,160,23,.14), transparent 60%),
    radial-gradient(45% 40% at 10% 85%, rgba(123,13,30,.06), transparent 65%);
  opacity:.9;
}

@keyframes meshDrift{
  0%   { transform: translate3d(0,0,0)      scale(1);    }
  50%  { transform: translate3d(-2%,1.5%,0) scale(1.04); }
  100% { transform: translate3d(2%,-2%,0)   scale(1.02); }
}

/* Stardust dots — JS injects ~14 <i> children with randomized
   top/left/animation-delay/animation-duration inline styles. */
.cs-stardust i{
  position:absolute;
  display:block;
  width:3px; height:3px; border-radius:50%;
  background: var(--gold-light);
  box-shadow:
    0 0 8px rgba(240,192,64,.55),
    0 0 14px rgba(212,160,23,.35);
  opacity:0;
  animation: twinkle 6s ease-in-out infinite;
  will-change: transform, opacity;
}
.cs-stardust i.crimson{
  background:#ffd6dc;
  box-shadow:
    0 0 8px rgba(176,32,53,.55),
    0 0 14px rgba(123,13,30,.35);
}
:root[data-theme="light"] .cs-stardust i{
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212,160,23,.45);
}
:root[data-theme="light"] .cs-stardust i.crimson{
  background: var(--crimson-action);
  box-shadow: 0 0 6px rgba(176,32,53,.30);
}

@keyframes twinkle{
  0%, 100% { opacity:0;   transform: translateY(0)    scale(.7); }
  50%      { opacity:.85; transform: translateY(-12px) scale(1);  }
}

/* Mobile perf — kill stardust + aurora, slow the mesh */
@media (max-width:640px){
  .cs-stardust{display:none}
  .cs-mesh{animation:none; opacity:.6}
  .cs-mesh::after{display:none}
}

/* ============================================================
   Scroll reveal — JS adds [data-reveal] then toggles .in
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity .8s cubic-bezier(.2,.8,.2,1),
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .8s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
}
[data-reveal].in{
  opacity:1;
  transform:none;
  filter:none;
}
[data-reveal][data-reveal-delay="1"]{ transition-delay:.08s }
[data-reveal][data-reveal-delay="2"]{ transition-delay:.16s }
[data-reveal][data-reveal-delay="3"]{ transition-delay:.24s }
[data-reveal][data-reveal-delay="4"]{ transition-delay:.32s }

/* ============================================================
   Editorial typography utilities
   ============================================================ */
.h-display{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.08;
  font-feature-settings:"ss01","ss02","liga";
}

/* Editorial serif — Amiri. Reserved for hero H1, course titles,
   instructor names. Keep body + UI on Cairo. */
.h-editorial{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.04;
  font-feature-settings:"liga","dlig","kern";
}
.h-eyebrow-ed{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:700;
  color:var(--gold);
}
.text-gold-white{
  background:linear-gradient(135deg, var(--gold-light) 0%, #ffffff 60%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .text-gold-white{
  background:linear-gradient(135deg, var(--crimson) 0%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}