.wind-test-page{background:var(--paper)}
.wind-test-main{padding:120px 0 96px}
.hero>.wind-hero{height:min(48vw,540px);min-height:460px;margin-top:64px}
.wind-hero{position:relative;isolation:isolate;height:min(56vw,640px);min-height:520px;border-radius:30px;overflow:hidden;background:#0a6971;box-shadow:0 36px 80px rgba(33,29,26,.14)}
.wind-hero::after{content:"";position:absolute;z-index:5;left:0;right:0;bottom:0;height:25%;opacity:0;background:rgba(7,72,78,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 28%,#000 72%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 28%,#000 72%);pointer-events:none;animation:wind-blur-enter 1.1s ease .7s forwards}
.wind-hero__atmosphere{position:absolute;z-index:-3;inset:-4%;width:108%;height:108%;object-fit:cover;opacity:0;filter:brightness(1.02) saturate(1.12);transform:scale(1.04);animation:wind-atmosphere-enter 1.1s ease forwards,wind-atmosphere 18s ease-in-out 1.05s infinite alternate}
.wind-hero__veil{position:absolute;z-index:-2;inset:0;background:rgba(4,77,82,.04);pointer-events:none}
.wind-card{position:absolute;margin:0;overflow:hidden;opacity:0;translate:0 34px;filter:blur(7px);border:1px solid rgba(255,244,228,.58);border-radius:24px;background:#f7f4ed;box-shadow:0 30px 72px rgba(3,42,49,.38),0 0 44px rgba(255,146,61,.24);transform-origin:50% 72%;will-change:transform,translate,opacity,filter}
.wind-card img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(1.08) saturate(1.02) contrast(.98)}
.wind-card--left{z-index:1;left:2.5%;top:auto;bottom:-9%;width:42%;aspect-ratio:1.5/1;transform:translate3d(-4%,4%,0) rotate(-9deg);animation:wind-card-enter 1.2s cubic-bezier(.22,1,.36,1) .22s forwards,wind-left 13s cubic-bezier(.45,.05,.55,.95) 1.42s infinite alternate}
.wind-card--right{z-index:1;right:-1%;top:auto;bottom:-10%;width:42%;aspect-ratio:1.58/1;transform:translate3d(4%,4%,0) rotate(9deg);animation:wind-card-enter 1.2s cubic-bezier(.22,1,.36,1) .4s forwards,wind-right 17s cubic-bezier(.45,.05,.55,.95) 1.6s infinite alternate}
.wind-card--center{z-index:2;left:24%;top:auto;bottom:-5%;width:53%;aspect-ratio:1.47/1;transform:translate3d(-3.5%,4%,0) rotate(-11deg);animation:wind-card-enter 1.3s cubic-bezier(.22,1,.36,1) .58s forwards,wind-center 15s cubic-bezier(.45,.05,.55,.95) 1.88s infinite alternate}

@keyframes wind-atmosphere-enter{
  from{opacity:0}
  to{opacity:1}
}
@keyframes wind-blur-enter{
  from{opacity:0}
  to{opacity:1}
}
@keyframes wind-card-enter{
  0%{opacity:0;translate:0 34px;filter:blur(7px)}
  55%{opacity:1}
  100%{opacity:1;translate:0 0;filter:blur(0)}
}

@keyframes wind-atmosphere{
  0%{transform:scale(1.04) translate3d(-.7%,.4%,0)}
  50%{transform:scale(1.075) translate3d(.8%,-.6%,0)}
  100%{transform:scale(1.05) translate3d(-.2%,.8%,0)}
}
@keyframes wind-left{
  0%{transform:translate3d(-4%,4%,0) rotate(-9deg)}
  38%{transform:translate3d(2.5%,-3%,0) rotate(-4.5deg)}
  72%{transform:translate3d(4.5%,2%,0) rotate(-7.5deg)}
  100%{transform:translate3d(-2%,-4%,0) rotate(-4deg)}
}
@keyframes wind-center{
  0%{transform:translate3d(-3.5%,4%,0) rotate(-11deg)}
  34%{transform:translate3d(3%,-3.5%,0) rotate(-5.5deg)}
  68%{transform:translate3d(1.5%,3%,0) rotate(-9.5deg)}
  100%{transform:translate3d(-3%,-4%,0) rotate(-5deg)}
}
@keyframes wind-right{
  0%{transform:translate3d(4%,4%,0) rotate(9deg)}
  32%{transform:translate3d(-3.5%,-3%,0) rotate(4.5deg)}
  74%{transform:translate3d(-2%,3%,0) rotate(7.5deg)}
  100%{transform:translate3d(4%,-4%,0) rotate(4deg)}
}

@media(max-width:760px){
  .wind-test-main{padding:94px 0 58px}
  .hero>.wind-hero{height:410px;min-height:0;margin-top:44px}
  .wind-hero{width:calc(100% - 24px);height:480px;min-height:0;border-radius:24px}
  .wind-hero::after{height:28%;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
  .wind-card{border-radius:17px}
  .wind-card--left{left:-17%;top:auto;bottom:-3%;width:70%}
  .wind-card--right{right:-25%;top:auto;bottom:-5%;width:71%}
  .wind-card--center{left:13%;top:auto;bottom:1%;width:79%}
}

@media(prefers-reduced-motion:reduce){
  .wind-hero::after,.wind-hero__atmosphere,.wind-card{animation:none;opacity:1}
  .wind-card{translate:0 0;filter:none}
  .wind-card--left{transform:rotate(-6deg)}
  .wind-card--center{transform:rotate(-8deg)}
  .wind-card--right{transform:rotate(6deg)}
}