/**
 * Boigule Tech - Professional Animations
 * assets/css/animations.css
 */

/* ─── Reduced Motion Support ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   1. FADE & SLIDE ANIMATIONS (AOS-style)
═══════════════════════════════════════════════════════════════ */
[data-anim] {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
[data-anim="fade-up"]   { transform: translateY(40px); }
[data-anim="fade-down"] { transform: translateY(-40px); }
[data-anim="fade-left"] { transform: translateX(40px); }
[data-anim="fade-right"]{ transform: translateX(-40px); }
[data-anim="zoom-in"]   { transform: scale(.85); }
[data-anim="fade"]      { transform: none; }

[data-anim].anim-visible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger delays */
[data-delay="100"] { transition-delay: .1s !important; }
[data-delay="200"] { transition-delay: .2s !important; }
[data-delay="300"] { transition-delay: .3s !important; }
[data-delay="400"] { transition-delay: .4s !important; }
[data-delay="500"] { transition-delay: .5s !important; }
[data-delay="600"] { transition-delay: .6s !important; }
[data-delay="700"] { transition-delay: .7s !important; }
[data-delay="800"] { transition-delay: .8s !important; }

/* ═══════════════════════════════════════════════════════════════
   2. NAVBAR — transparent → solid on scroll
═══════════════════════════════════════════════════════════════ */
.navbar-hero-top {
  background: transparent !important;
  box-shadow: none !important;
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.navbar-hero-top.scrolled {
  background: rgba(107, 15, 15, .92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. HERO SECTION PARTICLES CANVAS
═══════════════════════════════════════════════════════════════ */
#hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-section { position: relative; overflow: hidden; }
.hero-section .container { position: relative; z-index: 2; }

/* Cursor Glow */
#cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212,160,23,.12) 0%, transparent 70%);
  transition: opacity .3s ease;
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   4. INSTRUCTOR IMAGE — Floating + Pulse + Rotating Ring
═══════════════════════════════════════════════════════════════ */
.instructor-hero-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Floating animation */
.instructor-hero-img {
  animation: floatUpDown 4s ease-in-out infinite;
  transition: transform .4s ease, filter .4s ease;
  position: relative;
  z-index: 3;
}
.instructor-hero-img:hover {
  transform: scale(1.08) translateY(-8px) !important;
  filter: drop-shadow(0 20px 40px rgba(212,160,23,.45));
  animation-play-state: paused;
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-16px); }
}

/* Pulse ring every 4 seconds */
.instructor-hero-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,160,23,.2), transparent 70%);
  animation: pulseGlow 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%       { transform: scale(1.12); opacity: 1; }
}

/* Rotating outer ring */
.rotating-ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px dashed rgba(212,160,23,.4);
  animation: rotateSlow 12s linear infinite;
  z-index: 2;
  pointer-events: none;
}
.rotating-ring-2 {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(212,160,23,.15);
  animation: rotateSlow 20s linear infinite reverse;
  z-index: 2;
  pointer-events: none;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbiting dots */
.orbit-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #C9A84C;
  border-radius: 50%;
  box-shadow: 0 0 8px #C9A84C;
  z-index: 4;
  top: 50%;
  left: 50%;
}
.orbit-dot:nth-child(1) { animation: orbitDot 6s linear infinite; }
.orbit-dot:nth-child(2) { animation: orbitDot 6s linear infinite -3s; }
.orbit-dot:nth-child(3) { animation: orbitDot2 9s linear infinite; }

@keyframes orbitDot {
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(130px); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(130px); }
}
@keyframes orbitDot2 {
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(160px); opacity:.4; }
  50%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(160px); opacity:.4; }
}

/* Floating shadow */
.instructor-shadow {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.35) 0%, transparent 70%);
  animation: shadowPulse 4s ease-in-out infinite;
  z-index: 0;
}
@keyframes shadowPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .6; }
  50%       { transform: translateX(-50%) scale(.8); opacity: .3; }
}

/* Ripple on click */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(212,160,23,.35);
  transform: scale(0);
  animation: rippleOut .6s ease-out forwards;
  pointer-events: none;
  z-index: 10;
}
@keyframes rippleOut {
  to { transform: scale(4); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   5. BUTTONS — Shine + Bounce + Hover
═══════════════════════════════════════════════════════════════ */
.btn-animate {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .3s ease !important;
}
.btn-animate::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,.25);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.btn-animate:hover::after { left: 120%; }
.btn-animate:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,.2) !important;
}
.btn-animate:active {
  transform: scale(.94) translateY(0);
  animation: btnBounce .3s ease;
}
@keyframes btnBounce {
  0%   { transform: scale(.94); }
  50%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   6. CARDS — Stagger Reveal + Hover Lift
═══════════════════════════════════════════════════════════════ */
.card-animate {
  transition: transform .35s ease, box-shadow .35s ease !important;
}
.card-animate:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. COUNTER NUMBERS
═══════════════════════════════════════════════════════════════ */
.counter-num {
  display: inline-block;
  transition: transform .3s ease;
}
.counter-num.counting {
  animation: countPop .15s ease;
}
@keyframes countPop {
  0%   { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   8. SECTION TITLE UNDERLINE ANIMATE
═══════════════════════════════════════════════════════════════ */
.section-header h2::after {
  width: 0 !important;
  transition: width .6s ease .3s !important;
}
.section-header.anim-visible h2::after {
  width: 60px !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. HERO BADGE BOUNCE
═══════════════════════════════════════════════════════════════ */
.hero-badge-anim {
  animation: badgeBounce 2.5s ease-in-out infinite;
}
@keyframes badgeBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════════════
   10. STAT CARDS SHIMMER
═══════════════════════════════════════════════════════════════ */
.stat-card {
  transition: transform .3s ease !important;
}
.stat-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — Instructor image responsive
═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .instructor-hero-wrap {
    margin-top: 2rem;
  }
  /* Smaller orbit dots on mobile */
  .orbit-dot { width:5px; height:5px; }
  @keyframes orbitDot {
    0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(90px); }
    100% { transform: translate(-50%,-50%) rotate(360deg) translateX(90px); }
  }
  @keyframes orbitDot2 {
    0%   { transform: translate(-50%,-50%) rotate(0deg) translateX(110px); opacity:.4; }
    50%  { opacity:1; }
    100% { transform: translate(-50%,-50%) rotate(360deg) translateX(110px); opacity:.4; }
  }
  .rotating-ring   { inset:-12px; }
  .rotating-ring-2 { inset:-20px; }
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING EDUCATIONAL ICONS
═══════════════════════════════════════════════════════════════ */
.floating-icons-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.float-icon {
  position: absolute;
  font-size: 1.6rem;
  opacity: 0;
  animation: floatIcon var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
  user-select: none;
}

@keyframes floatIcon {
  0%   { opacity: 0;    transform: translateY(0)    rotate(0deg)   scale(.8); }
  15%  { opacity: .55; }
  50%  { opacity: .45;  transform: translateY(-28px) rotate(6deg)  scale(1); }
  85%  { opacity: .55; }
  100% { opacity: 0;    transform: translateY(0)    rotate(-3deg)  scale(.8); }
}

/* Each icon has its own position + timing */
.float-icon:nth-child(1)  { left:6%;  top:18%; --dur:9s;  --delay:0s;   font-size:1.8rem; }
.float-icon:nth-child(2)  { left:14%; top:65%; --dur:11s; --delay:1.5s; font-size:1.4rem; }
.float-icon:nth-child(3)  { left:25%; top:30%; --dur:8s;  --delay:3s;   font-size:1.2rem; }
.float-icon:nth-child(4)  { left:80%; top:15%; --dur:10s; --delay:.8s;  font-size:1.7rem; }
.float-icon:nth-child(5)  { left:88%; top:55%; --dur:12s; --delay:2s;   font-size:1.3rem; }
.float-icon:nth-child(6)  { left:72%; top:75%; --dur:9s;  --delay:4s;   font-size:1.5rem; }
.float-icon:nth-child(7)  { left:50%; top:10%; --dur:13s; --delay:1s;   font-size:1.1rem; }
.float-icon:nth-child(8)  { left:40%; top:80%; --dur:8s;  --delay:5s;   font-size:1.6rem; }
.float-icon:nth-child(9)  { left:60%; top:40%; --dur:10s; --delay:2.5s; font-size:1rem;   }
.float-icon:nth-child(10) { left:92%; top:30%; --dur:11s; --delay:3.5s; font-size:1.4rem; }
.float-icon:nth-child(11) { left:3%;  top:45%; --dur:9s;  --delay:6s;   font-size:1.2rem; }
.float-icon:nth-child(12) { left:33%; top:55%; --dur:14s; --delay:1.2s; font-size:.9rem;  }

/* Light dots */
.float-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(201,168,76,.7);
  animation: floatDot var(--ddur,7s) ease-in-out var(--ddelay,0s) infinite;
}
@keyframes floatDot {
  0%,100% { transform: translateY(0); opacity:.3; }
  50%      { transform: translateY(-20px); opacity:.9; }
}
.float-dot:nth-child(1) { left:20%; top:35%; --ddur:6s;  --ddelay:0s;   }
.float-dot:nth-child(2) { left:45%; top:60%; --ddur:8s;  --ddelay:1s;   width:6px; height:6px; }
.float-dot:nth-child(3) { left:70%; top:25%; --ddur:7s;  --ddelay:2s;   }
.float-dot:nth-child(4) { left:85%; top:70%; --ddur:9s;  --ddelay:3s;   width:3px; height:3px; }
.float-dot:nth-child(5) { left:10%; top:80%; --ddur:6s;  --ddelay:1.5s; }
.float-dot:nth-child(6) { left:55%; top:20%; --ddur:8s;  --ddelay:.5s;  width:5px; height:5px; }

@media (max-width: 768px) {
  .float-icon { font-size: 1rem !important; }
  .float-icon:nth-child(n+8) { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE — إيقاف كل الحركات المتحرّكة (اهتزاز الصورة والنجوم)
   حركات الظهور عند التمرير تبقى تعمل بشكل طبيعي
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #hero-particles,
  .floating-icons-wrap,
  .float-icon,
  .float-dot {
    display: none !important;
  }

  .instructor-hero-img {
    animation: none !important;
    transform: none !important;
  }
  .instructor-hero-img:hover {
    transform: none !important;
  }

  .rotating-ring,
  .rotating-ring-2,
  .orbit-dot,
  .instructor-hero-wrap::before,
  .instructor-shadow {
    animation: none !important;
    display: none !important;
  }

  #cursor-glow {
    display: none !important;
  }

  .hero-badge-anim {
    animation: none !important;
  }
}