/* =========================================
   SCROLL-REVEAL ANIMATION SYSTEM
   Elements start hidden/offset, then fade
   and rise into place as they enter the
   viewport (triggered via IntersectionObserver
   in script.js). If JS fails to load, the
   fallback below still shows all content.
========================================= */

.reveal{

opacity:0;
transform:translateY(45px);
transition:opacity .8s cubic-bezier(.22,.9,.32,1), transform .8s cubic-bezier(.22,.9,.32,1);
will-change:opacity, transform;

}

.reveal.reveal-active{

opacity:1;
transform:translateY(0);

}

/* Fallback: if JS never runs (blocked/slow), reveal after a short
   delay via a no-JS safety net using animation-fill-mode. This
   guarantees content is never permanently invisible. */

.no-js .reveal{

opacity:1;
transform:none;

}

/* Stagger children inside grids/rows so cards animate one after
   another rather than all at once */

.objective-container .reveal:nth-child(1){transition-delay:.05s;}
.objective-container .reveal:nth-child(2){transition-delay:.15s;}
.objective-container .reveal:nth-child(3){transition-delay:.25s;}
.objective-container .reveal:nth-child(4){transition-delay:.35s;}
.objective-container .reveal:nth-child(5){transition-delay:.45s;}
.objective-container .reveal:nth-child(6){transition-delay:.55s;}

.office-container .reveal:nth-child(1){transition-delay:.05s;}
.office-container .reveal:nth-child(2){transition-delay:.15s;}
.office-container .reveal:nth-child(3){transition-delay:.25s;}
.office-container .reveal:nth-child(4){transition-delay:.35s;}
.office-container .reveal:nth-child(5){transition-delay:.45s;}
.office-container .reveal:nth-child(6){transition-delay:.55s;}
.office-container .reveal:nth-child(7){transition-delay:.65s;}

.vision-mission .reveal:nth-child(1){transition-delay:.05s;}
.vision-mission .reveal:nth-child(2){transition-delay:.2s;}

.footer-container .reveal:nth-child(1){transition-delay:.05s;}
.footer-container .reveal:nth-child(2){transition-delay:.15s;}
.footer-container .reveal:nth-child(3){transition-delay:.25s;}

/* Directional variants for more visual variety */

.reveal-left{

opacity:0;
transform:translateX(-55px);
transition:opacity .8s cubic-bezier(.22,.9,.32,1), transform .8s cubic-bezier(.22,.9,.32,1);

}

.reveal-left.reveal-active{

opacity:1;
transform:translateX(0);

}

.reveal-right{

opacity:0;
transform:translateX(55px);
transition:opacity .8s cubic-bezier(.22,.9,.32,1), transform .8s cubic-bezier(.22,.9,.32,1);

}

.reveal-right.reveal-active{

opacity:1;
transform:translateX(0);

}

.reveal-zoom{

opacity:0;
transform:scale(.92);
transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.32,1);

}

.reveal-zoom.reveal-active{

opacity:1;
transform:scale(1);

}

/* =========================================
   NAV — condensed state on scroll (adds a
   slightly stronger shadow + tighter padding
   once the user scrolls past the hero)
========================================= */

.header.scrolled{

padding-top:12px;
padding-bottom:12px;
box-shadow:0 8px 30px rgba(0,0,0,.12);

}

/* =========================================
   BUTTON MICRO-INTERACTION
   Subtle shine sweep on hover, layered on
   top of the existing lift/scale in style.css
========================================= */

.btn{

position:relative;
overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:0;
left:-75%;

width:50%;
height:100%;

background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);

transform:skewX(-20deg);

transition:left .65s ease;

}

.btn:hover::before{

left:125%;

}

/* =========================================
   CARD / IMAGE POLISH
   Slightly refines existing hover states with
   smoother easing (non-destructive — style.css
   rules still apply, these add easing consistency)
========================================= */

.card,
.objective-card,
.office-card{

transition:transform .5s cubic-bezier(.22,.9,.32,1), box-shadow .5s cubic-bezier(.22,.9,.32,1);

}

.office-card img{

transition:transform .5s cubic-bezier(.22,.9,.32,1);

}

/* Nav underline already handled in style.css via ::after transitions */

/* =========================================
   REDUCED MOTION SUPPORT
   Respect users who've asked their OS/browser
   to minimize animation
========================================= */

@media (prefers-reduced-motion: reduce){

.reveal,
.reveal-left,
.reveal-right,
.reveal-zoom{

opacity:1 !important;
transform:none !important;
transition:none !important;

}

.hero-content,
section{

animation:none !important;

}

.btn::before{

display:none;

}

}