:root {
	--waffleeaseOUT : animation-timing-function:cubic-bezier(.67,.89,.64,.99);
	--waffleeaseIN : animation-timing-function:cubic-bezier(.27,0,.49,.23);

}

.hero {
  position:absolute;
  overflow:hidden; 
  width:100%;
  height:38vw; 
  bottom: 0;
}
.waffle {
  position:absolute;
  transform:translate(0,100%); 
  transform-origin:50% 90%;
}
.waffle::before {
  content:'';
  display:block;
  padding-top:100%;
  background:url('../images/whatsnew/waffle.png') center / contain no-repeat ;
  filter:drop-shadow(-2em 3em 1em #4003);
}
.waffle1 { 
  right:34%;
  width:55%;
  bottom:-80%;
  
}
.waffle2 { 
  right:10%;
  width:60%;
  bottom:-90%;
}
.section--in-viewport .waffle1 { 
  animation: waffles_pop 0.9s 1s forwards;
}
.section--in-viewport .waffle2 { 
  animation: waffles_pop 0.91s 1.2s forwards;
}
.waffle1::before {
  transform:rotate(-25deg);
}
@keyframes waffles_pop {
  0% { 
      transform:translate(1%,60%) rotate(1deg); filter:blur(1px);
      animation-timing-function: var(--waffleeaseOUT);
  }
  20% {   
      transform:translate(1%,-8%) rotate(1.5deg);       filter:blur(0px); 
      animation-timing-function: var(--waffleeaseIN);
     }
  37% { 
       transform:translate(0%,-0%) rotate(0deg); 
      animation-timing-function: var(--waffleeaseOUT);
  }
  50% { 
      transform:translate(0%,-1%) rotate(-0.15deg);
      animation-timing-function: var(--waffleeaseIN);
  }
  65% { 
      transform:translate(0,0%) rotate(0.15deg);
      animation-timing-function: var(--waffleeaseOUT); 
  }
  90% { 
      transform:translate(0%,-0.1%);
      animation-timing-function: var(--waffleeaseIN);
  }
  100% { 
      transform:translate(0,0%); }
}



.waffle1:nth-child(2) {
  animation-delay: 1.002s;
  opacity: 0.136;
}

.waffle2:nth-child(2) {
  animation-delay: 1.202s;
  opacity: 0.136;
}

.waffle1:nth-child(3) {
  animation-delay: 1.003s;
  opacity: 0.129;
}

.waffle2:nth-child(3) {
  animation-delay: 1.203s;
  opacity: 0.129;
}

.waffle1:nth-child(4) {
  animation-delay: 1.004s;
  opacity: 0.122;
}

.waffle2:nth-child(4) {
  animation-delay: 1.204s;
  opacity: 0.122;
}

.waffle1:nth-child(5) {
  animation-delay: 1.005s;
  opacity: 0.115;
}

.waffle2:nth-child(5) {
  animation-delay: 1.205s;
  opacity: 0.115;
}

.whatsnew--herosubtext {
    background: #ffdd00;
}
.whatsnew--herosubtext .content_wrapper::before {
	height:33%;
}

.pagehero.whatsnew--herosubtext img{
	width: 50%;
    min-height: 0;
    min-width: 0;
	top: 30%;
}

.whatsnew--herosubtext h1{
  color: #da3739;
  text-shadow: none;
  top: 1em;
  margin: 0
}


@media (min-width:48em) {
	.hero {
		height:25vw; 
		width: 70%;
        margin: 0 15%;
	}
	.pagehero.whatsnew--herosubtext img {
		width: 18%;
		min-height: 0;
		min-width: 0;
		top: 21%;
		height: auto;
	}
	.whatsnew--herosubtext {
		max-height: 50em;
	}
	.waffle1 { 
		right:34%;
	}
	.waffle2 { 
		right:2%;
	}
    .whatsnew--herosubtext h1{
		top: .5em;
	  	font-size: min(5em, 6vw);
    }

}