/* Scroll & Loading Animations */
[data-animate]{opacity:0;transition:all .9s cubic-bezier(.22,.61,.36,1)}
[data-animate="fade-up"]{transform:translateY(40px)}
[data-animate="fade-down"]{transform:translateY(-40px)}
[data-animate="fade-left"]{transform:translateX(-40px)}
[data-animate="fade-right"]{transform:translateX(40px)}
[data-animate="zoom-in"]{transform:scale(.9)}
[data-animate].in-view{opacity:1;transform:translate(0) scale(1)}

/* Page loader */
.page-loader{
  position:fixed;inset:0;background:#fff;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s,visibility .6s;
}
.page-loader.hide{opacity:0;visibility:hidden}
.loader-spinner{
  width:60px;height:60px;border:4px solid var(--green-light);
  border-top-color:var(--green-dark);border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Top scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--green-dark),var(--gold));
  z-index:1200;transition:width .1s;
}

/* Pulse effect */
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(201,169,97,.6)}
  70%{box-shadow:0 0 0 18px rgba(201,169,97,0)}
  100%{box-shadow:0 0 0 0 rgba(201,169,97,0)}
}
.pulse{animation:pulse-ring 2s infinite}

/* Reveal text */
.reveal-text{
  display:inline-block;overflow:hidden;
}
.reveal-text span{
  display:inline-block;transform:translateY(100%);
  animation:revealUp 1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes revealUp{to{transform:translateY(0)}}

/* Hero parallax shapes already in style.css */

/* Counter */
.counter{display:inline-block;transition:all .5s}

/* Hover lift */
.hover-lift{transition:transform .4s,box-shadow .4s}
.hover-lift:hover{transform:translateY(-6px)}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;animation:marquee 25s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Card flip subtle */
.tilt{transition:transform .4s}
.tilt:hover{transform:perspective(800px) rotateY(-3deg) rotateX(2deg)}

/* Gradient text animation */
.gradient-text{
  background:linear-gradient(90deg,var(--green-dark),var(--gold),var(--green-dark));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradient-move 4s linear infinite;
}
@keyframes gradient-move{to{background-position:200% 0}}