/**
 * はなの芽 — Easter Egg (講師写真ダブルクリックで花びらが舞う)
 * 既存 hero-petals / petalFall / petalFallSlow と世界観統一
 */

.petal-burst {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50% 0 50% 0;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  animation-name: petalBurst;
  animation-timing-function: cubic-bezier(.25, .65, .35, 1);
  animation-fill-mode: forwards;
}

.petal-burst--pink {
  background: rgba(247, 214, 224, 0.85);
  border-radius: 50% 0 50% 0;
}

.petal-burst--yellow {
  background: rgba(255, 217, 102, 0.80);
  border-radius: 60% 10% 60% 10%;
}

.petal-burst--green {
  background: rgba(212, 237, 203, 0.80);
  border-radius: 50% 20% 50% 20%;
}

@keyframes petalBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  15% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
      rotate(var(--rot, 0deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .petal-burst {
    display: none !important;
  }
}

/* ============================================================
   触れるサイン — 「ここをタップすると花びらが舞うよ」のヒント
   - hananome-easter-trigger--with-sign 修飾子を付けた要素のみに表示
   - 右上に小さな🌸絵文字をふわっと浮遊させる
   ============================================================ */
.hananome-easter-trigger {
  cursor: pointer;
}

.hananome-easter-trigger--with-sign {
  position: relative;
}

.hananome-easter-trigger--with-sign::after {
  content: "🌸";
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  animation: easterSignFloat 2.4s ease-in-out infinite;
}

@keyframes easterSignFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-4px) rotate(6deg); }
}

@media (hover: hover) {
  .hananome-easter-trigger {
    transition: transform 0.25s ease;
  }
  .hananome-easter-trigger:hover {
    transform: scale(1.015);
  }
}

@media (max-width: 480px) {
  .hananome-easter-trigger--with-sign::after {
    font-size: 15px;
    top: 6px;
    right: 6px;
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hananome-easter-trigger--with-sign::after {
    animation: none;
  }
  .hananome-easter-trigger {
    transition: none;
  }
  .hananome-easter-trigger:hover {
    transform: none;
  }
}