:root{
  --spin-speed: 1.3s;
  --wind-opacity: .35;
  --wind-speed: 2.6s;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  overflow:hidden;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(180deg,#ffffff,#eaf7ff);
}

.app{
  width:100vw;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  padding:24px 16px calc(28px + env(safe-area-inset-bottom,0px));
}

.fan-area{
  position:relative;
  width:min(90vw,720px);
  height:min(78svh,760px);
  display:grid;
  place-items:center;
}

.fan-button{
  position:relative;
  z-index:2;
  width:min(72vw,520px);
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  background:transparent;
  padding:0;
  cursor:pointer;
  animation:spin var(--spin-speed) linear infinite;
}

.fan-button.off{
  animation:none;
}

.fan-button img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:50%;
  filter:
    sepia(1)
    saturate(650%)
    hue-rotate(165deg)
    brightness(1.05);
  mix-blend-mode:multiply;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.wind{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:100vw;
  height:80svh;
  transform:translate(-50%,-12%);
  pointer-events:none;
  overflow:hidden;
  opacity:var(--wind-opacity);
}

.wind-line{
  position:absolute;
  left:50%;
  top:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(61,174,255,.72),transparent);
  animation:wind var(--wind-speed) linear infinite;
  animation-delay:calc(var(--delay) * -1s);
  transform-origin:center top;
}

@keyframes wind{
  0%{
    transform:translate(-50%,0) scaleX(.2);
    opacity:0;
  }
  15%{
    opacity:1;
  }
  100%{
    transform:translate(calc(-50% + var(--x)),72svh) scaleX(2.8);
    opacity:0;
  }
}

.controls{
  z-index:5;
  display:flex;
  gap:8px;
  padding:8px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 32px rgba(13,90,150,.14);
  backdrop-filter:blur(10px);
}

.controls button{
  border:0;
  border-radius:999px;
  background:transparent;
  color:#063d70;
  padding:13px 18px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
}

.controls button.active{
  color:#fff;
  background:linear-gradient(180deg,#4dbaff,#0b8fea);
  box-shadow:0 8px 18px rgba(21,152,255,.32);
}

@media(max-width:640px){
  .fan-area{
    height:74svh;
  }

  .fan-button{
    width:min(88vw,420px);
  }

  .controls{
    width:94vw;
    justify-content:space-between;
  }

  .controls button{
    padding:12px 12px;
    font-size:14px;
  }
}

@media(max-height:620px){
  .fan-area{
    height:68svh;
  }

  .fan-button{
    width:min(60vh,420px);
  }

  .controls button{
    padding:10px 14px;
  }
}