@charset "UTF-8";

/* 秋の枯葉と青い鳥。#container の通常レイアウトは変えません。 */
#container {
  position: relative;
  overflow: hidden;
}

.petal,
.autumn-leaf,
.autumn-bird-pair {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

/* 前年と同じ花びら */
.petal {
  top: 0;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  animation: autumn-petal-fall 10s linear forwards;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 前年の枯葉画像と落ち方をそのまま利用 */
.autumn-leaf {
  top: 0;
  background: url('images/autumn_leaf.png') center / contain no-repeat;
  animation: autumn-particle-fall 10s linear forwards;
}

@keyframes autumn-petal-fall {
  0% { top: 0; opacity: 0; transform: rotate(0deg); }
  10%, 90% { opacity: 1; }
  100% { top: 100vh; opacity: 0; transform: rotate(3000deg); }
}

@keyframes autumn-particle-fall {
  0% { top: 0; opacity: 0; transform: translateX(0) rotate(0deg); }
  10%, 90% { opacity: 1; }
  50% { transform: translateX(20px) rotate(180deg); }
  100% { top: 100vh; opacity: 0; transform: translateX(-20px) rotate(360deg); }
}

/* 鳥も前年と同じく、画面上端からさりげなく降らせます。 */
.autumn-bird-pair {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.autumn-bird {
  position: absolute;
  top: 0;
  left: var(--bird-left);
  width: var(--bird-size);
  aspect-ratio: 1 / 2;
  background: center / contain no-repeat;
  opacity: 0;
  filter: drop-shadow(0 3px 3px rgba(69, 47, 25, .18));
  will-change: transform, opacity;
  animation-delay: var(--bird-delay);
}

.autumn-bird--left {
  background-image: url('images/blue_bird.png');
  animation: autumn-bird-fall-male 10s linear forwards;
  animation-delay: var(--bird-delay);
}

.autumn-bird--right {
  background-image: url('images/blue_bird.png');
  animation: autumn-bird-fall-right 10s linear forwards;
  animation-delay: var(--bird-delay);
}

@keyframes autumn-bird-fall-male {
  0% { top: 0; opacity: 0; transform: translateX(0) rotate(-3deg); }
  10%, 90% { opacity: 1; }
  50% { transform: translateX(calc(2vw + var(--bird-sway))) rotate(3deg); }
  100% { top: 100vh; opacity: 0; transform: translateX(calc(4vw + var(--bird-sway))) rotate(-3deg); }
}

@keyframes autumn-bird-fall-right {
  0% { top: 0; opacity: 0; transform: translateX(0) rotate(3deg) scaleX(-1); }
  10%, 90% { opacity: 1; }
  50% { transform: translateX(calc(-2vw + var(--bird-sway))) rotate(-3deg) scaleX(-1); }
  100% { top: 100vh; opacity: 0; transform: translateX(calc(-4vw + var(--bird-sway))) rotate(3deg) scaleX(-1); }
}

@media (max-width: 600px) {
  .autumn-bird { max-width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .petal,
  .autumn-leaf { display: none; }
  .autumn-bird-pair { display: none; }
}