.home header{/*position: static;*/ z-index: auto;}


html{height: auto;}
body.home{ }
body.home:before{}
.home-wrap{background-color:#020202; background-image: linear-gradient(160deg, #1a1c4e 40%, #77c16b 60%);}
.home-wrap:before{ position:absolute; top:0px; left:0px; right:0px; margin:auto; width:1807px; height: 979px; display: block; content:''; z-index: auto; max-height: none; display: none;}


.home #horse{ background-image: url(../images/homepage/2025-10/horse.webp); background-size: contain; background-repeat: no-repeat; background-position: top right; margin:0px;   position: absolute;   content:''; display: block; width:75%; aspect-ratio: 959/494; top:0px; right:-220px;}
.home.on .contactInfo:after{}
#mainNav{position: relative; z-index: 1;}
#mainNav .content-wrap:before{}

#mainNav nav a{position: relative;}
.home #Content{ background:none; padding-top:0px; margin:0px;}
.home #Content .policy{text-align: center; display: block; color:#fff; font-family: 'Hank BT W01 Roman'; padding:0px 16px;}
.home .home-wrap:after{}

.home.on .home-wrap:before{}
.home.on .home-wrap:after{}

.home #Content a{}
.home #Content a{ background-image: url(../images/homepage/2025-10/Riding-Time-Again.webp); width:42%; top:15px; aspect-ratio: 520/501;   height: auto; display: block; margin:auto;  background-size: contain; background-repeat: no-repeat; background-position:center;  position: relative; transform: translateX(-278px); position: relative; z-index: 1;}

.home-wrap{min-height: 100vh; }
.home-wrap:after{display: none;}


.home header h1 > span{position: relative;}
.home header h1:before{width:250px; height: 250px; position: absolute; left:490px; top:-58px; background-image: url(../images/homepage/Pony-Head.png); background-size: contain; background-repeat: no-repeat; background-position: center; content:''; display: block;}

.home #butterfly .flap{display: block; background-image: url(../images/homepage/2025-10/butterfly.webp); background-size: contain; background-repeat: no-repeat; aspect-ratio: 165/121; width:165px;}

#butterfly {
    z-index: 1;
    right:26vw;
    top:10vh;
  position: absolute;            /* set top/left/right/bottom in your layout */
  opacity: 0;                    /* fade in during swoop */
  transform: translateX(40vw) rotate(8deg) scale(0.95); /* start off-screen right */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;          /* optional */
}

/* The inner element handles the flutter so it won't fight the swoop transform */
#butterfly .flap {
  display: inline-block;
  transform-origin: 50% 50%;
}

/* 1) On load: swoop the wrapper into place */
body.on #butterfly {
  animation: swoop-in 6000ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* 2) After 1s: keep swoop’s final state and start the flutter on the inner span */
body.on #butterfly .flap {
  animation: flutter 1200ms ease-in-out 0ms infinite alternate;
}

/* --- Keyframes --- */

@keyframes swoop-in {
  0% {
    opacity: 0;
    transform: translate(26vw, -10vh) rotate(8deg) scale(0.95);
  }
  60% {
    opacity: 1;
    transform: translateX(10vw) translateY(5vh) rotate(-6deg) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes flutter {
  0%   { transform: translateY(-1px) rotate(-3deg); }
  50%  { transform: translateY(-12px) rotate(3deg); }
  100% { transform: translateY(1px) rotate(-2deg); }
}

/* Optional: pause flutter on hover */
#butterfly:hover .flap {
  animation-play-state: paused;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #butterfly,
  #butterfly .flap {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}





@media screen and (max-width:1024px){
    .home #horse{right:-10%;}
    
}

@media screen and (max-width:856px){
    
}
@media screen and (max-width:961px) and (min-height:1212px){
   
}
@media screen and (max-width:900px){
    
    .home #Content a{transform: translateX(0); width:50%;}
    .home #horse{position: relative;width:100%; right:0;}
   #butterfly{top:16vh; right:6vw;}
   .home #Content .policy{margin-top:0;}
}
@media screen and (max-width:760px){
   .home #horse{}
   #butterfly{top:35vh;}
   .home #Content a{}
   .home #butterfly .flap{width:75px;}
}
@media screen and (max-width:700px){
    

}
@media screen and (max-width:400px){
     
    
}
@media screen and (max-width:300px){
   
}

@keyframes bounceInDown {
            0% {
               opacity: 0;
               transform: translateY(-2000px);
            }
            40% {
               opacity: 1;
               transform: translateY(0px);
            }
            60% {
               opacity: 1;
               transform: translateY(-30px);
            }
            80% {
               transform: translateY(0px);
            }
            90% {
               transform: translateY(-10px);
            }
            100% {
               transform: translateY(0);
            }
         }
         
.bounceInDown {
            -webkit-animation-name: bounceInDown;
            animation-name: bounceInDown;
         }