/* ============================================================
   S.SADAF — PREMIUM ENHANCEMENT LAYER
   Loaded AFTER main.css. Adds depth, motion, and craft without
   changing brand colours (amber #F5A300 / navy #16203A / warm #FAF9F6).
   Every effect is GPU-friendly (transform/opacity only) and
   respects prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Layered depth background ---------- */
body{position:relative}
.aura{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.aura .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  will-change:transform}
.aura .orb.a{width:46vw;height:46vw;left:-10vw;top:-12vw;
  background:radial-gradient(circle at 30% 30%,rgba(245,163,0,.30),transparent 65%)}
.aura .orb.b{width:40vw;height:40vw;right:-12vw;top:18vh;
  background:radial-gradient(circle at 60% 40%,rgba(22,32,58,.22),transparent 65%)}
.aura .orb.c{width:38vw;height:38vw;left:20vw;bottom:-14vw;
  background:radial-gradient(circle at 50% 50%,rgba(14,124,107,.16),transparent 65%)}
/* fine grain texture — premium tactile feel */
.grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 2. Motion system (scroll reveals) ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-rv="left"]{transform:translateX(-30px)}
.reveal[data-rv="right"]{transform:translateX(30px)}
.reveal[data-rv="scale"]{transform:scale(.94)}
.reveal[data-rv="left"].in,.reveal[data-rv="right"].in,.reveal[data-rv="scale"].in{transform:none}

/* stagger children */
.stagger>*{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.12s}
.stagger.in>*:nth-child(3){transition-delay:.19s}
.stagger.in>*:nth-child(4){transition-delay:.26s}
.stagger.in>*:nth-child(5){transition-delay:.33s}
.stagger.in>*:nth-child(6){transition-delay:.40s}
.stagger.in>*:nth-child(7){transition-delay:.47s}
.stagger.in>*:nth-child(8){transition-delay:.54s}
.stagger.in>*:nth-child(9){transition-delay:.61s}

/* ---------- 3. Premium buttons (glow + magnetic) ---------- */
.btn-primary{position:relative;overflow:hidden;
  box-shadow:0 10px 30px -10px rgba(245,163,0,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .65s ease}
.btn-primary:hover::after{left:130%}
.btn-primary:hover{transform:translateY(-2px);
  box-shadow:0 18px 44px -12px rgba(245,163,0,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-glass{transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-glass:hover{transform:translateY(-2px);border-color:rgba(245,163,0,.5);
  box-shadow:0 14px 34px -14px rgba(22,32,58,.4)}
.mag{will-change:transform}

/* ---------- 4. Card tilt + depth (courses, why, notes) ---------- */
.tilt{will-change:transform;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.tilt:hover{box-shadow:0 30px 60px -28px rgba(22,32,58,.45)}

/* refined card surfaces — subtle gradient + border glow on hover */
.course-card,.why-card,.note-card{position:relative;transition:transform .3s,box-shadow .3s,border-color .3s}
.course-card::before,.why-card::before,.note-card::before{content:'';position:absolute;inset:0;
  border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(135deg,rgba(245,163,0,.6),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.course-card:hover::before,.why-card:hover::before,.note-card:hover::before{opacity:1}

/* ---------- 5. Why-section premium icons ---------- */
.why-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,rgba(245,163,0,.16),rgba(245,163,0,.04));
  border:1px solid rgba(245,163,0,.2)}
.why-ic svg{width:26px;height:26px;stroke:var(--amber-deep,#C97E00);fill:none;stroke-width:1.7}
.why-card:hover .why-ic{transform:scale(1.08) rotate(-3deg);transition:transform .3s}

/* ---------- 6. Hero polish ---------- */
/* asymmetric hero: copy left, signature proof card right */
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero-copy{text-align:left}
.hero-copy .hero-badge{margin-left:0}
.hero-copy .hero-cta,.hero-copy .hero-trust{justify-content:flex-start}
.hero-visual{display:flex;justify-content:center}
.hero-visual .proof-card{max-width:380px;width:100%}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.2rem;text-align:center}
  .hero-copy{text-align:center}
  .hero-copy .hero-cta,.hero-copy .hero-trust{justify-content:center}
  .hero-visual .proof-card{max-width:440px}
}
.hero-badge{position:relative;backdrop-filter:blur(8px)}
.hero-title .grad{background:linear-gradient(120deg,#F5A300,#FFB845 60%,#C97E00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* floating proof card (the signature) */
.proof-card{position:relative;border-radius:24px;overflow:hidden;
  background:linear-gradient(155deg,rgba(22,32,58,.97),rgba(22,32,58,.86));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -30px rgba(22,32,58,.6),inset 0 1px 0 rgba(255,255,255,.12);
  padding:1.6rem 1.6rem 1.4rem;color:#fff}
.proof-card .pc-shine{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 0%,rgba(245,163,0,.22),transparent 60%)}
.proof-card .pc-row{display:flex;align-items:center;gap:.7rem;position:relative;z-index:1}
.proof-card .pc-dot{width:9px;height:9px;border-radius:50%;background:#34D399;
  box-shadow:0 0 0 4px rgba(52,211,153,.18);animation:pcpulse 2.4s ease-in-out infinite}
@keyframes pcpulse{0%,100%{box-shadow:0 0 0 4px rgba(52,211,153,.18)}50%{box-shadow:0 0 0 8px rgba(52,211,153,.05)}}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.2rem;position:relative;z-index:1}
.proof-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:.9rem 1rem}
.proof-stat b{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:600;display:block;line-height:1;color:#fff}
.proof-stat span{font-size:.74rem;color:rgba(234,240,250,.6);margin-top:.25rem;display:block}
.proof-stat .amber{color:var(--amber-soft,#FFC247)}

/* floating animation for ambient elements */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.floaty{animation:floaty 6s ease-in-out infinite}

/* ---------- 7. Section eyebrow refinement ---------- */
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:.5rem}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--amber,#F5A300);display:inline-block}

/* ---------- 8. Marquee polish ---------- */
.marquee,.topbar-ticker,.ticker{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* ---------- 9. Scroll progress bar ---------- */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,#F5A300,#FFB845);box-shadow:0 0 10px rgba(245,163,0,.6);
  transition:width .1s linear}

/* ---------- 10. Section reveal dividers ---------- */
.divider-glow{height:1px;background:linear-gradient(90deg,transparent,rgba(245,163,0,.4),transparent);
  margin:0 auto;max-width:200px}

/* No-JS / safety fallback: if premium.js never runs, content must still show */
.no-premium-js .stagger>*,
.no-premium-js .reveal{opacity:1!important;transform:none!important}

/* ---------- Mobile + reduced-motion guards ---------- */
@media(max-width:760px){
  .aura .orb{filter:blur(45px);opacity:.4}
  .proof-grid{grid-template-columns:1fr 1fr}
}
/* STABILITY on phones: kill the heaviest GPU effects (blur, grain, parallax,
   infinite animations) so it stays smooth — but KEEP the background video,
   which now uses a proper 16:9 cover (no pixel stretching). */
@media(max-width:680px){
  .aura,.grain{display:none!important}   /* these sit behind the video anyway */
  /* video STAYS on mobile — text stays light over the dark veil */
  *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .floaty,.pc-dot,.login-box::before{animation:none!important}
  .proof-card{box-shadow:0 16px 40px -20px rgba(22,32,58,.4)}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .orb,.floaty,.pc-dot{animation:none!important}
  .btn-primary::after{display:none}
}