/* ===========================================
   Wave Dividers & Water Motion
   セクション間の波区切り、水コンセプトの装飾
   =========================================== */

/* ---------- 波ディバイダー ----------
   セクションのトップに position: absolute で貼り付け、
   padding-top の白い隙間を完全に消す
   transform: scaleY(-1) で path の bottom-fill を top-fill に視覚的反転
   -------------------------------------- */
.wave-divider {
  position: absolute;
  /* サブピクセル境界の隙間を防ぐため、上下に余分にはみ出させる */
  top: -2px;
  left: 0;
  right: 0;
  width: 100%;
  height: 52px;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  line-height: 0;
  transform: scaleY(-1);
}

@media (min-width: 768px) {
  .wave-divider {
    height: 82px;
  }
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* セクション内コンテンツが波と被らないように上余白を確保 */
.section:has(> .wave-divider:first-child) {
  padding-top: calc(var(--section-padding-y) + 30px);
}

@media (min-width: 768px) {
  .section:has(> .wave-divider:first-child) {
    padding-top: calc(var(--section-padding-y) + 50px);
  }
}

/* ---------- フッター用：2レイヤーの動く波（ヒーロー下端と対称） ---------- */
.wave-divider--footer {
  height: 60px;
}

@media (min-width: 768px) {
  .wave-divider--footer {
    height: 100px;
  }
}

.wave-divider--footer .wave-divider__back {
  animation: footerWaveBack 14s ease-in-out infinite;
  transform-origin: center;
}

.wave-divider--footer .wave-divider__front {
  animation: footerWaveFront 11s ease-in-out infinite -3s;
  transform-origin: center;
}

@keyframes footerWaveBack {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-22px); }
}

@keyframes footerWaveFront {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(28px); }
}

/* フッターも上余白を確保（site-footerは.sectionではないので個別指定） */
.site-footer:has(> .wave-divider:first-child) {
  padding-top: calc(var(--space-6) + 30px);
}

@media (min-width: 768px) {
  .site-footer:has(> .wave-divider:first-child) {
    padding-top: calc(var(--space-8) + 50px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-divider--footer .wave-divider__back,
  .wave-divider--footer .wave-divider__front {
    animation: none;
  }
}

/* ---------- セクション内の装飾的なウォーターリングス ---------- */
.water-rings {
  position: absolute;
  pointer-events: none;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 35%, rgba(34, 190, 240, 0.08) 36%, rgba(34, 190, 240, 0.08) 38%, transparent 39%),
    radial-gradient(circle, transparent 50%, rgba(34, 190, 240, 0.06) 51%, rgba(34, 190, 240, 0.06) 53%, transparent 54%),
    radial-gradient(circle, transparent 65%, rgba(34, 190, 240, 0.04) 66%, rgba(34, 190, 240, 0.04) 68%, transparent 69%);
  animation: waterRipple 6s ease-out infinite;
}

@keyframes waterRipple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

/* ---------- フローティング水滴アイコン ---------- */
.water-drop-deco {
  position: absolute;
  width: 28px;
  height: 36px;
  pointer-events: none;
  opacity: 0.35;
  animation: floatDrop 8s ease-in-out infinite;
}

.water-drop-deco svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(34, 190, 240, 0.3));
}

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

/* ---------- グラスモーフィズム共通カードヘルパー ---------- */
.glass {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 8px 32px rgba(0, 99, 138, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* ---------- 液体ホバー効果（ボタン・カード） ---------- */
.liquid-hover {
  position: relative;
  overflow: hidden;
}

.liquid-hover::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 80%;
  height: 200%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(34, 190, 240, 0.18) 40%,
    rgba(179, 210, 53, 0.14) 50%,
    rgba(34, 190, 240, 0.18) 60%,
    transparent 100%
  );
  transform: rotate(8deg);
  transition: left 0.8s var(--ease-out);
  pointer-events: none;
}

.liquid-hover:hover::after {
  left: 130%;
}

/* ---------- スクロール連動の落下水滴 ----------
   尖った水滴SVGが、落下中に縦長に伸び、
   微妙にぶれながら落ちる
   -------------------------------------------- */
.falling-drops {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: hidden;
}

.falling-drop {
  position: absolute;
  top: -40px;
  /* 影もごく薄く、控えめに */
  filter: drop-shadow(0 2px 4px rgba(34, 190, 240, 0.15));
  opacity: 0.6;
  animation: dropFall var(--fall-duration, 2s) cubic-bezier(0.55, 0.05, 0.65, 1) var(--fall-delay, 0s) forwards;
  will-change: transform, opacity;
}

.falling-drop svg {
  display: block;
  /* 落下中に縦長に伸びる演出（モーションブラー的効果） */
  animation: dropStretch var(--fall-duration, 2s) ease-in var(--fall-delay, 0s) forwards;
  transform-origin: 50% 100%;
}

@keyframes dropFall {
  0% {
    transform: translateY(0) translateX(0) rotate(var(--fall-rotate, 0deg));
    opacity: 0;
  }
  10% {
    opacity: 0.55;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(110vh) translateX(var(--fall-drift, 0px)) rotate(var(--fall-rotate, 0deg));
    opacity: 0.25;
  }
}

@keyframes dropStretch {
  0% {
    transform: scale(0.6, 0.6);
  }
  20% {
    transform: scale(0.9, 1);
  }
  60% {
    transform: scale(0.85, 1.4);  /* 加速時に縦に伸びる */
  }
  90% {
    transform: scale(0.85, 1.5);
  }
  100% {
    transform: scale(1.1, 0.7);   /* 着地時にやや潰れる */
  }
}

/* ---------- クリック時の水紋 ---------- */
.click-ripple {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(34, 190, 240, 0.35) 0%, rgba(34, 190, 240, 0.1) 40%, transparent 70%);
  pointer-events: none;
  transform: scale(0);
  animation: clickRippleExpand 0.7s ease-out forwards;
  z-index: 10;
}

@keyframes clickRippleExpand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* ---------- ホバー時の水紋 ---------- */
.hover-ripple {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 190, 240, 0.5), transparent 70%);
  pointer-events: none;
  transform: scale(0);
  animation: hoverRippleExpand 1.1s ease-out forwards;
  z-index: 1;
}

@keyframes hoverRippleExpand {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  100% {
    transform: scale(40);
    opacity: 0;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .water-rings,
  .water-drop-deco,
  .liquid-hover::after,
  .falling-drop,
  .click-ripple,
  .hover-ripple {
    animation: none;
    transition: none;
  }
}