/* The camera follows freefall. The terrain is revealed only after settlement. */
.world { --diver-size:150px; }
.jumper { width:var(--diver-size); }
.altitude-fog {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg,#878171e8 0%,#a49b858c 23%,#b3a68a14 53%,transparent 72%);
  transition:opacity .3s;
}
.world[data-state=active] .altitude-fog {
  background:linear-gradient(0deg,#8c8579 0%,#999180ed 18%,#a89e857d 41%,transparent 70%);
}
.world[data-state=active] .jumper { top:42%; left:70%; animation:jump-pop .32s ease-out,freefall-drift 2.8s .32s ease-in-out infinite; }
.falling-diver { display:none; }
.world[data-state=active] .calm-diver { display:none; }
.world[data-state=active] .falling-diver { display:block; width:112%; left:-6%; transform-origin:50% 55%; animation:air-tumble 3.9s ease-in-out infinite; }
.fall-banter { position:absolute; left:-20%; top:-28px; padding:5px 9px; border-radius:6px; background:#f9e9bc; color:#514235; border:2px solid #514235; font:15px Impact,'Arial Black',sans-serif; letter-spacing:1px; transform:rotate(-12deg); opacity:0; }
.fall-banter:after { content:''; position:absolute; bottom:-7px; right:10px; width:8px; height:8px; background:#f9e9bc; border-right:2px solid #514235; border-bottom:2px solid #514235; transform:skewY(20deg); }
.world[data-state=active] .fall-banter { animation:whoa-pop 3.9s ease-in-out infinite; }
.tumble-swoosh { position:absolute; top:0; left:-7%; width:114%; fill:none; stroke:#f3e3bba6; stroke-width:3; stroke-linecap:round; opacity:0; }
.world[data-state=active] .tumble-swoosh { animation:tumble-wind 3.9s ease-in-out infinite; }
.world[data-state=active] .aircraft { animation:exit-frame 1.7s ease-in forwards; }
.world[data-state=active] .landscape { animation:passing-ridge 11s linear infinite; }
.world[data-state=active] .flight-path { opacity:0; }
.landing-ground {
  position:absolute; left:0; bottom:0; width:100%; height:36%; z-index:3;
  opacity:0; transform:translateY(105%); pointer-events:none;
}
.landing-ground img { width:100%; height:100%; display:block; }
.world[data-state=lost] .landing-ground,
.world[data-state=cashed] .landing-ground { opacity:1; transform:translateY(0); }
.world[data-state=lost] .landing-ground { animation:ground-reveal .32s ease-out both; }
.world[data-state=cashed] .landing-ground { animation:ground-reveal .7s .15s ease-out both; }
.world[data-state=lost] .altitude-fog,
.world[data-state=cashed] .altitude-fog { opacity:0; }
.world[data-state=lost] .landscape { transform:scale(1.12) translateY(-18px); }
.world[data-state=lost] .aircraft,
.world[data-state=cashed] .aircraft { opacity:0; transform:translate(20%,-100%) scale(.5); }
.world[data-state=lost] { animation:impact-shake .65s ease-out; }
.world[data-state=lost] .jumper {
  top:calc(78% - var(--diver-size) * .5); left:70%; opacity:0;
  animation:ground-hit .58s ease-in both;
}
.crash-character {
  position:absolute; left:69%; bottom:9%; width:calc(var(--diver-size) * 1.65);
  transform:translateX(-10%); z-index:5; opacity:0; pointer-events:none;
}
.crash-character img { width:100%; display:block; }
.world[data-state=lost] .crash-character {
  opacity:1; animation:comic-rebound .8s .46s ease-out both;
}
.comic-poof { position:absolute; left:69%; bottom:28%; z-index:7; font:26px Impact,'Arial Black',sans-serif; color:#fff0ba; letter-spacing:2px; text-shadow:2px 2px 0 #72533c,-1px -1px 0 #72533c; transform:rotate(-12deg); opacity:0; pointer-events:none; }
.world[data-state=lost] .comic-poof { animation:poof-pop .72s .44s ease-out both; }
.impact-shadow {
  position:absolute; left:69%; bottom:10%; width:calc(var(--diver-size) * 1.5);
  height:12px; border-radius:50%; background:#352a2360; filter:blur(3px);
  transform:translateX(-8%); z-index:4; opacity:0; pointer-events:none;
}
.world[data-state=lost] .impact-shadow,
.world[data-state=cashed] .impact-shadow { opacity:1; }
.impact-dust {
  position:absolute; left:70%; bottom:14%; width:calc(var(--diver-size) * 1.7);
  height:70px; z-index:6; pointer-events:none; opacity:0;
}
.impact-dust i {
  position:absolute; width:70px; height:50px; border-radius:50%;
  background:radial-gradient(ellipse,#edc38aa8,#b5845188 55%,#b5845100 72%);
  left:20%; bottom:0; --drift:-80px;
}
.impact-dust i:nth-child(2) { left:40%; --drift:75px; width:85px; height:60px; }
.impact-dust i:nth-child(3) { left:10%; --drift:-120px; width:90px; }
.impact-dust i:nth-child(4) { left:65%; --drift:110px; width:90px; }
.impact-dust i:nth-child(5) { left:40%; --drift:15px; width:65px; height:75px; }
.world[data-state=lost] .impact-dust { opacity:1; }
.world[data-state=lost] .impact-dust i { animation:dust-puff .8s .43s ease-out both; }
.impact-flash { position:absolute; inset:0; z-index:7; background:#f4d6a521; opacity:0; pointer-events:none; }
.world[data-state=lost] .impact-flash { animation:contact-flash .6s ease-out; }
.world[data-state=cashed] .jumper {
  top:calc(86% - var(--diver-size) * 1.118); left:69%;
  animation:touchdown 1.15s ease-out both;
}
.world[data-state=cashed] .diver { transform:rotate(-2deg); }
.world-bottom { z-index:8; }
@keyframes exit-frame { to { transform:translate(12%,-115%) scale(.62); opacity:0; } }
@keyframes passing-ridge {
  0% { transform:scale(1.13) translateY(13px); }
  50% { transform:scale(1.13) translateY(-13px); }
  100% { transform:scale(1.13) translateY(13px); }
}
@keyframes ground-reveal { from { transform:translateY(105%); } to { transform:translateY(0); } }
@keyframes ground-hit {
  0% { opacity:1; transform:translateY(-120px) rotate(12deg); }
  75% { opacity:1; transform:translateY(-15px) rotate(32deg); }
  94% { opacity:.6; transform:translateY(10px) rotate(72deg) scaleY(.65); }
  100% { opacity:0; transform:translateY(10px) rotate(72deg) scaleY(.65); }
}
@keyframes comic-rebound {
  0% { opacity:0; transform:translateX(-10%) translateY(8px) scale(1.18,.65); }
  14% { opacity:1; transform:translateX(-10%) translateY(8px) scale(1.18,.65); }
  42% { opacity:1; transform:translateX(-10%) translateY(-23px) scale(.92,1.1) rotate(-4deg); }
  66% { opacity:1; transform:translateX(-10%) translateY(0) scale(1.1,.86); }
  82% { opacity:1; transform:translateX(-10%) translateY(-6px) scale(.98,1.02); }
  100% { opacity:1; transform:translateX(-10%) translateY(0) scale(1); }
}
@keyframes jump-pop { from { transform:translate(-9px,-38px) scale(1.06,.9); } to { transform:translate(0,0) scale(1); } }
@keyframes freefall-drift { 0%,100% { transform:translate(0,0); } 30% { transform:translate(-9px,8px); } 70% { transform:translate(5px,-5px); } }
@keyframes air-tumble {
  0% { transform:rotate(-12deg) scale(.97,1.04); }
  10% { transform:rotate(15deg) scale(1.04,.95); }
  22% { transform:rotate(-18deg) scale(.98,1.03); }
  32% { transform:rotate(18deg) scale(1); }
  44% { transform:rotate(92deg) scale(1.03,.96); }
  56% { transform:rotate(215deg) scale(.97,1.04); }
  68% { transform:rotate(350deg) scale(1.04,.96); }
  78% { transform:rotate(366deg) scale(1); }
  88% { transform:rotate(339deg) scale(1); }
  100% { transform:rotate(348deg) scale(.97,1.04); }
}
@keyframes whoa-pop { 0%,5%,37%,100% { opacity:0; transform:rotate(-12deg) scale(.65); } 12%,28% { opacity:1; transform:rotate(-8deg) scale(1); } }
@keyframes tumble-wind { 0%,27%,82%,100% { opacity:0; transform:rotate(-10deg); } 40%,67% { opacity:.8; transform:rotate(12deg); } }
@keyframes poof-pop { from { opacity:0; transform:translateY(12px) rotate(-12deg) scale(.3); } 25% { opacity:1; transform:translateY(-8px) rotate(-8deg) scale(1.15); } to { opacity:0; transform:translateY(-38px) rotate(8deg) scale(.95); } }
@keyframes dust-puff {
  from { opacity:0; transform:translate(0,10px) scale(.2); }
  20% { opacity:1; }
  to { opacity:0; transform:translate(var(--drift),-28px) scale(1.6); }
}
@keyframes contact-flash { 0%,65% { opacity:0; } 72% { opacity:1; } 100% { opacity:0; } }
@keyframes impact-shake {
  0%,60%,100% { transform:translate(0,0); }
  70% { transform:translate(-3px,2px); }
  80% { transform:translate(3px,-2px); }
  90% { transform:translate(-1px,1px); }
}
@keyframes touchdown {
  0% { transform:translateY(-38px) rotate(-4deg); }
  80% { transform:translateY(0) rotate(2deg); }
  100% { transform:translateY(0) rotate(0); }
}
@media(max-width:900px) { .world { --diver-size:130px; } }
@media(max-width:600px) {
  .world { --diver-size:90px; }
  .world[data-state=active] .jumper { top:48%; left:66%; }
  .world[data-state=cashed] .jumper { left:64%; }
  .crash-character,.impact-shadow { left:63%; }
  .impact-dust { left:64%; }
  .comic-poof { left:64%; font-size:19px; }
  .fall-banter { font-size:11px; padding:4px 7px; top:-24px; }
  .world[data-state=lost] .jumper { left:69%; }
  .landing-ground { height:31%; }
}
@media(max-width:360px) {
  .world { --diver-size:78px; }
  .world[data-state=active] .jumper { left:64%; }
  .crash-character,.impact-shadow { left:60%; }
}
@media(max-height:780px) and (min-width:901px) { .world { --diver-size:116px; } }
@media(max-width:900px) and (max-height:500px) and (min-width:601px) {
  .world { --diver-size:68px; }
  .world[data-state=active] .jumper { top:30%; left:74%; }
  .world[data-state=cashed] .jumper { left:74%; }
  .world[data-state=lost] .jumper { left:74%; }
  .crash-character,.impact-shadow { left:72%; }
  .impact-dust { left:72%; }
  .crash-character { bottom:8%; }
  .landing-ground { height:36%; }
}
@media(prefers-reduced-motion:reduce) {
  .world[data-state=lost] .jumper { display:none; }
  .impact-dust,.impact-flash { display:none; }
  .world[data-state=active] .aircraft { opacity:0; }
  .fall-banter,.tumble-swoosh,.comic-poof { display:none; }
}