/* =========================================================
   ZEYA E ASDAQUE FOUNDATION — motion & Instagram module
   Loaded after every other stylesheet.
   Every animation here is disabled automatically for visitors
   who have "reduce motion" enabled in their device settings.
   ========================================================= */

/* ---------- 1. Scroll reveal -------------------------------------- */
.reveal-up,
.reveal-fade,
.reveal-zoom{
  opacity:0;
  will-change:opacity,transform;
  transition:opacity .7s cubic-bezier(.22,.8,.26,1),
             transform .7s cubic-bezier(.22,.8,.26,1);
}
.reveal-up{transform:translateY(26px)}
.reveal-zoom{transform:scale(.95)}
.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-zoom.is-visible{opacity:1;transform:none}

/* ---------- 2. Hero entrance -------------------------------------- */
@keyframes zaf-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes zaf-fade{from{opacity:0}to{opacity:1}}
@keyframes zaf-line{from{width:0;opacity:0}to{opacity:1}}

.hero .welcome-script{animation:zaf-rise .8s .05s both cubic-bezier(.22,.8,.26,1)}
.hero h1{animation:zaf-rise .85s .16s both cubic-bezier(.22,.8,.26,1)}
.hero h3{animation:zaf-rise .85s .27s both cubic-bezier(.22,.8,.26,1)}
.hero .hero-rule{animation:zaf-line .9s .38s both cubic-bezier(.22,.8,.26,1)}
.hero p{animation:zaf-rise .85s .46s both cubic-bezier(.22,.8,.26,1)}
.hero .hero-buttons{animation:zaf-rise .85s .56s both cubic-bezier(.22,.8,.26,1)}
.hero-bg{animation:zaf-fade 1.1s both}

/* Gentle drift on the campus illustration */
@keyframes zaf-drift{
  0%,100%{transform:scale(1.02) translate3d(0,0,0)}
  50%{transform:scale(1.055) translate3d(-10px,-6px,0)}
}
.hero-bg{animation:zaf-fade 1.1s both, zaf-drift 22s 1.1s ease-in-out infinite alternate}

/* ---------- 3. Card / link polish --------------------------------- */
.wing-card,.home-wing-card,.news-card,.result-card,.event-item,
.value-card,.aw-card,.wings-full-card,.social-page-card,
.gallery-item,.contact-grid>div,.member-card,.sponsor-card{
  transition:transform .35s cubic-bezier(.22,.8,.26,1),
             box-shadow .35s ease,
             border-color .35s ease;
}
.wing-card:hover,.home-wing-card:hover,.news-card:hover,.result-card:hover,
.value-card:hover,.aw-card:hover,.wings-full-card:hover,.social-page-card:hover,
.contact-grid>div:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 42px rgba(0,45,32,.14);
}

/* Buttons lift slightly and settle */
.primary-btn,.outline-btn,.donate-btn,.event-btn,.ig-btn{
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.primary-btn:hover,.outline-btn:hover,.donate-btn:hover,.event-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,45,32,.20);
}
.primary-btn:active,.outline-btn:active,.donate-btn:active{transform:translateY(0)}

/* Animated gold underline on menu links */
.site-header nav a{position:relative}
@media(min-width:851px){
  .site-header nav a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:26px;
    height:3px;
    background:var(--gold,#d4a126);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .3s cubic-bezier(.22,.8,.26,1);
  }
  .site-header nav a:hover::after,
  .site-header nav a.active::after{transform:scaleX(1)}
}

/* Section headings draw their gold rule in */
@keyframes zaf-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.section-kicker{animation:zaf-fade .6s both}

/* ---------- 4. Gallery slider ------------------------------------- */
.gallery-track{transition:transform .75s cubic-bezier(.22,.8,.26,1)}
.gallery-slide img{transition:transform .9s cubic-bezier(.22,.8,.26,1)}
.gallery-slider:hover .gallery-slide img{transform:scale(1.02)}

/* Progress bar showing time until the next slide */
.gallery-progress{
  position:relative;
  height:3px;
  margin:10px auto 0;
  max-width:420px;
  border-radius:3px;
  background:rgba(0,75,54,.12);
  overflow:hidden;
}
.gallery-progress i{
  position:absolute;inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg,#d4a126,#f0cc72);
  border-radius:3px;
}

/* Autoplay pause / play control */
.gallery-autoplay-btn{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:12px;padding:8px 15px;
  border:1px solid rgba(0,75,54,.22);
  border-radius:999px;
  background:#fff;color:#004b36;
  font-size:12px;font-weight:800;cursor:pointer;
  transition:background .25s ease,border-color .25s ease;
}
.gallery-autoplay-btn:hover{background:#f6f2e6;border-color:#d4a126}

/* ---------- 5. Instagram feature block ---------------------------- */
.ig-section{
  padding:58px 8vw;
  background:linear-gradient(140deg,#fbf7ec,#ffffff 55%,#f7f1e2);
  text-align:center;
}
.ig-inner{max-width:760px;margin:0 auto}
.ig-section h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(26px,3.4vw,36px);
  color:#18201b;margin:6px 0 10px;
}
.ig-section h2 span{color:#004b36}
.ig-section>.ig-inner>p{color:#5c6b64;font-size:15px;margin:0 0 22px}

.ig-embed-card{
  position:relative;
  margin:0 auto;
  max-width:540px;
  border:1px solid rgba(212,161,38,.35);
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,45,32,.10);
  overflow:hidden;
}
.ig-embed-card blockquote.instagram-media{margin:0!important;border:0!important;box-shadow:none!important}

/* Shown until Instagram's script swaps in the real post */
.ig-fallback{padding:38px 26px}
.ig-logo{
  width:60px;height:60px;margin:0 auto 14px;
  border-radius:17px;
  background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
  display:grid;place-items:center;color:#fff;font-size:26px;
  box-shadow:0 8px 20px rgba(188,24,136,.28);
}
.ig-fallback strong{display:block;font-size:17px;color:#18201b;margin-bottom:6px}
.ig-fallback p{margin:0 0 18px;color:#5c6b64;font-size:13.5px;line-height:1.6}

.ig-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:12px;
  background:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888);
  color:#fff!important;font-weight:800;font-size:14px;
  box-shadow:0 12px 26px rgba(188,24,136,.26);
}
.ig-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ig-btn .ig-ico{font-size:17px;line-height:1}

.ig-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.ig-follow{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;border-radius:12px;
  border:1px solid rgba(0,75,54,.25);
  background:#fff;color:#004b36!important;
  font-weight:800;font-size:14px;
  transition:background .25s ease,border-color .25s ease,transform .22s ease;
}
.ig-follow:hover{background:#f6f2e6;border-color:#d4a126;transform:translateY(-2px)}

@media(max-width:600px){
  .ig-section{padding:46px 5vw}
  .ig-actions{flex-direction:column}
  .ig-btn,.ig-follow{justify-content:center}
}

/* ---------- 6. Respect reduced-motion ----------------------------- */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal-up,.reveal-fade,.reveal-zoom{opacity:1!important;transform:none!important}
  .hero-bg{animation:none!important}
}

/* =========================================================
   7. Hero layout corrections
   - A generic "main > section:first-child > div" rule was capping
     the hero background at 850px, leaving dead space on the right.
   - The hero was pinned to a fixed height shorter than its own
     content, which clipped the buttons on large screens.
   ========================================================= */
.hero .hero-bg,
.hero .hero-overlay,
.hero .gold-curve{
  max-width:none!important;
  width:auto!important;
  left:0!important;
  right:0!important;
}
.hero{
  height:auto!important;
  min-height:clamp(470px,58vh,620px)!important;
  max-height:none!important;
  overflow:hidden!important;
}
.hero .hero-content{
  min-height:clamp(470px,58vh,620px)!important;
  height:auto!important;
  padding-top:clamp(38px,5vh,64px)!important;
  padding-bottom:clamp(38px,5vh,64px)!important;
}
/* Keep the campus illustration clear of the headline text */
@media(min-width:851px){
  .hero-bg{
    background-size:100% 100%, auto 96%!important;
    background-position:center, right bottom!important;
  }
}
@media(min-width:1280px){
  .hero{min-height:560px!important}
  .hero .hero-content{min-height:560px!important}
}
/* The drift animation must win over the inline "animation:none" */
.hero-bg{
  animation:zaf-fade 1.1s both, zaf-drift 22s 1.1s ease-in-out infinite alternate!important;
}
@media(prefers-reduced-motion: reduce){
  .hero-bg{animation:none!important}
}

/* Mobile hero: show the whole building as a band along the bottom,
   with the text sitting on clean cream above it. */
@media(max-width:850px){
  .hero-bg{
    background-image:
      linear-gradient(180deg,#fbfaf5 0%,#fbfaf5 52%,rgba(251,250,245,.72) 64%,rgba(251,250,245,0) 78%),
      url('images/hero-campus.svg')!important;
    background-repeat:no-repeat,no-repeat!important;
    background-size:100% 100%, auto 54%!important;
    background-position:center, center bottom!important;
  }
  .hero .hero-content{
    padding-bottom:clamp(170px,32vh,250px)!important;
    justify-content:flex-start!important;
  }
}