/* WebCraft Pro - animations (CSS only) */
@keyframes wc-gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes wc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes wc-bounce{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(6px,6px)}}
@keyframes wc-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wc-fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* Hero text entrance */
.fade-in-up{animation:wc-fade-up .6s ease both}
.hero__subtitle.fade-in-up{animation-delay:.12s}
.hero__cta.fade-in-up{animation-delay:.24s}

/* Scroll-triggered reveal (toggled by IntersectionObserver in main.js) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}

/* Scroll Zoom Section Animation (Option B) */
.scroll-zoom-section {
  opacity: 0.35;
  transform: scale(0.93) translateY(35px);
  border-radius: 40px;
  overflow: hidden;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
              border-radius 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, border-radius;
}
.scroll-zoom-section.is-in-view {
  opacity: 1;
  transform: scale(1) translateY(0);
  border-radius: 0px;
}

/* On mobile, use less aggressive transform scaling for readability */
@media (max-width: 768px) {
  .scroll-zoom-section {
    transform: scale(0.96) translateY(20px);
    border-radius: 20px;
  }
}

/* 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{opacity:1;transform:none}
  .scroll-zoom-section {opacity:1;transform:none;border-radius:0px}
}