/* Home page breeze animation */
.home-breeze-page {
  position: relative;
}

.home-breeze-page .soft-glow {
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.16) 35%, rgba(255,255,255,0.00) 70%);
  z-index: 0;
  pointer-events: none;
}

.home-breeze-page .site-title,
.home-breeze-page p,
.home-breeze-page .contact-illustration,
.home-breeze-page .home-buttons {
  position: relative;
  z-index: 2;
}

.home-breeze-page .breeze-line {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.home-breeze-page .breeze-line svg {
  position: absolute;
  left: -20vw;
  top: 38%;
  width: 140vw;
  height: 180px;
  display: block;
}

.home-breeze-page .breeze-line path {
  fill: none;
  stroke: rgba(217, 207, 180, 0.45);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 12;
}

body.home-breeze-animate .home-breeze-page .breeze-line {
  animation: homeBreezeFade 4.8s ease-out forwards;
}

@keyframes homeBreezeFade {
  0%   { opacity: 0; transform: translateX(-2%); }
  15%  { opacity: 0.55; }
  70%  { opacity: 0.35; }
  100% { opacity: 0; transform: translateX(2.5%); }
}

.home-breeze-page .petals {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.home-breeze-page .petal {
  position: absolute;
  left: -60px;
  top: 50%;
  width: 16px;
  height: 11px;
  border-radius: 70% 30% 70% 30% / 65% 35% 65% 35%;
  opacity: 0;
  filter: blur(0.2px);
  transform-origin: center center;
  will-change: transform, opacity;
}

.home-breeze-page .petal.p1 { background: #e7d7c6; }
.home-breeze-page .petal.p2 { background: #d9c6b0; }
.home-breeze-page .petal.p3 { background: #cdb89d; }

body.home-breeze-animate .home-breeze-page .petal {
  animation-name: homePetalDrift;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

@keyframes homePetalDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.95);
  }
  10% {
    opacity: 0.9;
  }
  80% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)) scale(1.05);
  }
}

@media (max-width: 640px) {
  .home-breeze-page .petal {
    width: 13px;
    height: 9px;
  }

  .home-breeze-page .breeze-line {
    top: 34%;
    height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-breeze-page .breeze-line,
  .home-breeze-page .petal,
  .home-breeze-page .soft-glow {
    animation: none !important;
  }

  body.home-breeze-animate .home-breeze-page .breeze-line,
  body.home-breeze-animate .home-breeze-page .petal {
    opacity: 0 !important;
  }
}