
/* Scroll Reveal Animations Created by Hunter Adkins via Claude March 2026 */

 /* Base: all animatable elements start invisible */
  .reveal {opacity: 0;transition: opacity 0.6s ease, transform 0.6s ease;}
 
  /* When JS adds .visible, element animates in */
  .reveal.visible {color: inherit; opacity: 1; transform: none !important;}
  
  .reveal.visible, .reveal-left.visible, .reveal-right.visible,
  .reveal-scale.visible, .reveal-rotate.visible {opacity:1; transform:none;}

/* Animations */
@keyframes float {
0%,100% {transform:translateY(0);} 
50% {transform:translateY(-6px);}
}
.float {animation: float 3s ease-in-out infinite;}

/* Fades */
.fadeIn {-webkit-animation:fadeIn 1.5s ease forwards; animation:fadeIn 1.5s ease forwards;}
@-webkit-keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
	}
@keyframes fadeIn {
	from {opacity:0;}
	to {opacity:1;}
	}
	

.fadeInUp {-webkit-animation:fadeInUp 0.7s ease forwards; animation:fadeInUp 0.7s ease forwards;}
@-webkit-keyframes fadeInUp {
	from {opacity:0; transform:translateY(30px);}
	to {opacity:1; transform:translateY(0);}
	}
@keyframes fadeInUp {
	from {opacity:0; transform:translateY(30px);}
	to {opacity:1; transform:translateY(0);}
	}


.fadeInDown {-webkit-animation:fadeInDown 0.7s ease forwards; animation:fadeInDown 0.7s ease forwards;}
@-webkit-keyframes fadeInDown {
	from {opacity:0; transform:translateY(-30px);}
	to {opacity:1; transform:translateY(0);}
	}
@keyframes fadeInDown {
	from {opacity:0; transform:translateY(-30px);}
	to {opacity:1; transform:translateY(0);}
	}


.fadeInLeft {-webkit-animation:fadeInLeft 0.7s ease forwards; animation:fadeInLeft 0.7s ease forwards;}
@-webkit-keyframes fadeInLeft {
	from {opacity:0; transform:translateX(-30px);}
	to {opacity:1; transform:translateX(0);}
	}
@keyframes fadeInLeft {
	from {opacity:0; transform:translateX(-30px);}
	to {opacity:1; transform:translateX(0);}
	}


.fadeInRight {-webkit-animation:fadeInRight 0.7s ease forwards; animation:fadeInRight 0.7s ease forwards;}
@-webkit-keyframes fadeInRight {
	from {opacity:0; transform:translateX(30px);}
	to {opacity:1; transform:translateX(0);}
	}
@keyframes fadeInRight {
	from {opacity:0; transform:translateX(30px);}
	to {opacity:1; transform:translateX(0);}
	}



/* Slides */
.slideUp {-webkit-animation:slideUp 0.6s ease forwards; animation:slideUp 0.6s ease forwards;}
@-webkit-keyframes slideUp {
	from {transform:translateY(60px); opacity:0;}
	to {transform:translateY(0); opacity:1;}
	}
@keyframes slideUp {
	from {transform:translateY(60px); opacity:0;}
	to {transform:translateY(0); opacity:1;}
	}


.slideDown {-webkit-animation:slideDown 0.7s ease forwards; animation:slideDown 0.7s ease forwards;}
@-webkit-keyframes slideDown {
	from {transform:translateY(-60px); opacity:0;} 
	to {transform:translateY(0); opacity:1;}
	}
@keyframes slideDown {
	from {transform:translateY(-60px); opacity:0;} 
	to {transform:translateY(0); opacity:1;}
	}



.slideInRight {-webkit-animation: slideInRight 0.6s ease forwards; animation: slideInRight 0.6s ease forwards;}
@-webkit-keyframes slideInRight {
	from {transform:translateX(60px); opacity:0;} 
	to {transform:translateX(0); opacity:1;}
	}
@keyframes slideInRight {
	from {transform:translateX(60px); opacity:0;} 
	to {transform:translateX(0); opacity:1;}
	}



.slideInLeft {-webkit-animation: slideInLeft 0.6s ease forwards; animation: slideInLeft 0.6s ease forwards;}
@-webkit-keyframes slideInLeft {
	from {transform:translateX(-60px); opacity:0;} 
	to {transform:translateX(0); opacity:1;}
	}
@keyframes slideInLeft {
	from {transform:translateX(-60px); opacity:0;} 
	to {transform:translateX(0); opacity:1;}
	}


.delay-1 {transition-delay: 1s;}
.delay-2 {transition-delay: 2s;}
.delay-3 {transition-delay: 4s;}


/* CSS — children inherit transition-delay from CSS variable --i */
.reveal        {opacity:0; transform:translateY(40px);  transition:opacity .7s ease, transform .7s ease;}
.reveal-left   {opacity:0; transform:translateX(-60px); transition:opacity .7s ease, transform .7s ease;}
.reveal-right  {opacity:0; transform:translateX(60px);  transition:opacity .7s ease, transform .7s ease;}
.reveal-scale  {opacity:0; transform:scale(.8);         transition:opacity .7s ease, transform .7s ease;}
.reveal-rotate {opacity:0; transform:rotate(-10deg) scale(.9); transition:opacity .7s ease, transform .7s ease;}


  .para-stagger p {opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease;}
  .para-stagger.visible p:nth-child(1) {opacity:1; transform:none; transition-delay:0s;}
  .para-stagger.visible p:nth-child(2) {opacity:1; transform:none; transition-delay:.15s;}
  .para-stagger.visible p:nth-child(3) {opacity:1; transform:none; transition-delay:.3s;}

  /* Stagger: each child delays a little more */
  .stagger .reveal:nth-child(1) {transition-delay: 0s;}
  .stagger .reveal:nth-child(2) {transition-delay: 0.1s;}
  .stagger .reveal:nth-child(3) {transition-delay: 0.2s;}
  .stagger .reveal:nth-child(4) {transition-delay: 0.3s;}
  
  /* <div class="reveal" style="transition-delay: 0.4s"> */
  
  /* Custom duration via CSS var */
  .slow {transition-duration: 1.2s;}
  .fast {transition-duration: 0.25s;}
  .bounce-ease {transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);}
  
  h2 span {display: inline-block;} /*  margin-right: 0.25em; */