/* ============================================================
   共通スタイル
   - リセット / ふわっと出現 / 浮遊 / パーティクル / 切替UI など
   全パターン共通で読み込む
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ------------------------------------------------------------
   スクロールでふわっと出現（js/common.js が .is-visible を付与）
   html に .js が付いた時だけ隠す＝JS無効でも中身は見える
   ------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-reveal="left"] {
  transform: translateX(-32px);
}

.js [data-reveal="right"] {
  transform: translateX(32px);
}

.js [data-reveal="zoom"] {
  transform: scale(0.92);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   ずっとふわふわ浮かび続ける要素
   （data-reveal と併用する時はラッパーを分けること）
   ------------------------------------------------------------ */
.float,
.float-slow,
.float-rev {
  will-change: transform;
}

.float {
  animation: floaty 5s ease-in-out infinite;
}

.float-slow {
  animation: floaty 8s ease-in-out infinite;
}

.float-rev {
  animation: floaty 6.5s ease-in-out infinite reverse;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

/* ------------------------------------------------------------
   舞い散るパーティクル（body の data-effect で種類を指定）
   ------------------------------------------------------------ */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}

.fx {
  position: absolute;
  top: -4vh;
  display: block;
  animation: fx-fall linear forwards;
}

@keyframes fx-fall {
  0% {
    transform: translate3d(0, -4vh, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--drift, 0px), 104vh, 0) rotate(var(--spin, 360deg));
    opacity: 0.9;
  }
}

.fx--petal {
  width: 14px;
  height: 10px;
  background: #f0c8d0;
  border-radius: 100% 0 100% 0;
}

.fx--sakura {
  width: 12px;
  height: 12px;
  background: #f7c9d4;
  border-radius: 100% 0 100% 0;
  box-shadow: inset -2px -2px 0 #eeaebf;
}

.fx--stardust {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd97a;
  box-shadow: 0 0 10px 2px rgba(255, 217, 122, 0.75);
}

.fx--confetti {
  width: 9px;
  height: 14px;
  border-radius: 2px;
}

/* ------------------------------------------------------------
   タップした場所からハート・星が弾ける（body の data-click-pop）
   ------------------------------------------------------------ */
.pop {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  color: #e0708c;
  animation: pop-fly 1.1s ease-out forwards;
}

.pop--star {
  color: #f5c542;
}

@keyframes pop-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -80px))) scale(1.1);
    opacity: 0;
  }
}

/* イースターエッグ対象（タップで小さく弾む） */
[data-easter] {
  cursor: pointer;
  display: inline-block;
  transition: transform 0.25s ease;
}

[data-easter].is-tapped {
  transform: scale(1.35) rotate(-8deg);
}

/* ------------------------------------------------------------
   トースト（イースターエッグ発見時のメッセージ）
   ------------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(30, 30, 30, 0.88);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
  z-index: 70;
  max-width: 86vw;
  text-align: center;
}

.toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------
   開封演出のオーバーレイ（中身は各パターンCSSで装飾）
   ------------------------------------------------------------ */
.opening {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    opacity 1s ease,
    visibility 1s ease;
}

.opening.is-open {
  opacity: 0;
  visibility: hidden;
}

body.has-opening {
  overflow: hidden;
}

/* ------------------------------------------------------------
   Google Map 埋め込み
   ------------------------------------------------------------ */
.map-embed {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* ------------------------------------------------------------
   アクセシビリティ: 動きを減らす設定の人にはアニメーションを止める
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float,
  .float-slow,
  .float-rev {
    animation: none;
  }
}