/* ==========================================================
   ANIMATIONS — Afghan Community Theme
   - Utility animation classes used across pages/components
   ========================================================== */

/* ==========================================================
   OPTION 1 — STRICT TEACHER MODE (Minimal motion)
   - Disable scroll-reveal and decorative motion site-wide
   - Keep functional UI transitions (menu, header) as-is
   ========================================================== */
.fade-in,
.fade-in-left,
.fade-in-right,
.fade-in-up,
.hero-fade,
.reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  will-change:auto !important;
}
.fade-in.visible,
.fade-in-left.visible,
.fade-in-right.visible,
.fade-in-up.visible,
.hero-fade.visible{
  opacity:1 !important;
  transform:none !important;
}



  /* ==========================================================
     Reduced motion
     ========================================================== */
  @media (prefers-reduced-motion: reduce){
    .fade-in,
    .fade-in-left,
    .fade-in-right,
    .fade-in-up,
    .hover-lift,
    .zoom-soft,
    .btn-pulse,
    .hero-fade,
    .header-anim,
    #mobile-menu{
      animation:none !important;
      transition:none !important;
      transform:none !important;
      opacity:1 !important;
    }
  }

  /* ==========================================================
     Fade-in (generic)
     ========================================================== */
  .fade-in{
    opacity:0;
    transform:translateY(10px);
    transition:
      opacity var(--anim-speed-normal,420ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms),
      transform var(--anim-speed-normal,420ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms);
  }
  .fade-in.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ==========================================================
     Fade-in from left
     ========================================================== */
  .fade-in-left{
    opacity:0;
    transform:translateX(-40px);
    transition:
      opacity var(--anim-speed-normal,420ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms),
      transform var(--anim-speed-normal,420ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms);
  }
  .fade-in-left.visible{
    opacity:1;
    transform:translateX(0);
  }

  /* ==========================================================
     Fade-in from right
     ========================================================== */
  .fade-in-right{
    opacity:0;
    transform:translateX(40px);
    transition:
      opacity var(--anim-speed-normal,420ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms),
      transform var(--anim-speed-normal,420ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms);
  }
  .fade-in-right.visible{
    opacity:1;
    transform:translateX(0);
  }

  /* ==========================================================
     Fade-in upwards (common)
     ========================================================== */
  .fade-in-up{
    opacity:0;
    transform:translateY(40px);
    transition:
      opacity var(--anim-speed-slow,600ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms),
      transform var(--anim-speed-slow,600ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,0ms);
  }
  .fade-in-up.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ==========================================================
     ONE MOTION SYSTEM (LIFT)
     - Cards: stronger lift + shadow
     - Buttons/Images: micro lift (no scale)
     ========================================================== */

  /* Hover lift (cards) */
  .hover-lift{
    transition:
      transform var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      box-shadow var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
  }
  .hover-lift:hover,
  .hover-lift:focus-visible{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.14);
  }

  /* Zoom soft (images) — keep class name, but use LIFT (no scale) */
  .zoom-soft{
    transition:transform var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
  }
  .zoom-soft:hover,
  .zoom-soft:focus-visible{
    transform:translateY(-2px);
  }

  /* Button pulse (optional) — keep class name, but use LIFT (no scale) */
  .btn-pulse{
    transition:
      transform var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      box-shadow var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
  }
  .btn-pulse:hover,
  .btn-pulse:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.16);
  }

  /* ==========================================================
     Slow fade for hero elements (with delay variable)
     ========================================================== */
  .hero-fade{
    opacity:0;
    transform:translateY(20px);
    transition:
      opacity var(--anim-speed-slow,600ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,180ms),
      transform var(--anim-speed-slow,600ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)) var(--reveal-delay,180ms);
  }
  .hero-fade.visible{
    opacity:1;
    transform:translateY(0);
  }

  /* ==========================================================
     Mobile (KEEP REVEAL, DISABLE HOVER)
     ========================================================== */
  @media (max-width:768px){

    .fade-in{transform:translateY(6px)}
    .fade-in-left{transform:translateX(-18px)}
    .fade-in-right{transform:translateX(18px)}
    .fade-in-up{transform:translateY(22px)}
    .hero-fade{transform:translateY(14px)}

    .hover-lift,
    .zoom-soft,
    .btn-pulse{
      transition:none !important;
      transform:none !important;
      box-shadow:none !important;
    }
    .hover-lift:hover,
    .zoom-soft:hover,
    .btn-pulse:hover{
      transform:none !important;
      box-shadow:none !important;
    }
  }

  /* ==========================================================
     Performance hint (safe)
     ========================================================== */
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-up,
  .hero-fade{
    will-change:opacity,transform;
  }

  /* ==========================================================
     Hero image zoom (desktop only)
     - Subtle zoom-out when hero becomes visible
     ========================================================== */
  @media (min-width:769px){
    .hero-zoom .hero-bg img,
    .hero-zoom .home-hero-bg img,
    .hero-zoom .resources-hero-bg img,
    .hero-zoom .about-hero-bg img,
    .hero-zoom .community-hero-bg img,
    .hero-zoom .contact-hero-bg img{
      transform:scale(1.02);
      transition:transform var(--anim-speed-slow,900ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
    }

    .hero-zoom.hero-zoom-active .hero-bg img,
    .hero-zoom.hero-zoom-active .home-hero-bg img,
    .hero-zoom.hero-zoom-active .resources-hero-bg img,
    .hero-zoom.hero-zoom-active .about-hero-bg img,
    .hero-zoom.hero-zoom-active .community-hero-bg img,
    .hero-zoom.hero-zoom-active .contact-hero-bg img{
      transform:scale(1);
    }
  }

  /* ==========================================================
     Header hide/show (JS adds .header-hidden)
     ========================================================== */
  .header-anim{
    transition:
      transform var(--anim-speed-normal,320ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      background-color var(--anim-speed-normal,320ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      box-shadow var(--anim-speed-normal,320ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
    will-change:transform;
  }
  .header-anim.header-hidden{
    transform:translateY(-110%);
  }

  /* ==========================================================
     Mobile menu overlay animation
     ========================================================== */
  #mobile-menu{
    opacity:0;
    transform:translateY(-10px);
    transition:
      opacity var(--anim-speed-normal,260ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      transform var(--anim-speed-normal,260ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
    will-change:opacity,transform;
  }
  #mobile-menu.active{
    opacity:1;
    transform:translateY(0);
  }
  #mobile-menu.closing{
    opacity:0;
    transform:translateY(-10px);
  }


/* ==========================================================
   COMPONENTS LAYER — LIGHTBOX OVERLAYS (KEEP FUNCTIONAL)
   ========================================================== */


  .lightbox-overlay{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.85);
    z-index:9999;
    cursor:zoom-out;
  }
  .lightbox-overlay img{
    max-width:min(1100px,92vw);
    max-height:86vh;
    width:auto;
    height:auto;
    border-radius:14px;
    box-shadow:0 16px 50px rgba(0,0,0,.45);
  }

  #lightbox-overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.85);
    z-index:9999;
    cursor:zoom-out;
  }

  #lightbox-overlay[aria-hidden="false"]{
    display:flex !important;
  }

  #lightbox-img{
    max-width:min(1100px,92vw);
    max-height:86vh;
    width:auto;
    height:auto;
    border-radius:14px;
    box-shadow:0 16px 50px rgba(0,0,0,.45);
  }