@charset "UTF-8";
/* ================================================================
   surface.css — 「水面に戻る」ボタンと、上っていく泡
   PC: 右下に丸いボタン（js/surface.js が作る）。600px 以上スクロールすると現れる
   スマホ: Cocoon の下部メニューの「トップ」を「水面へ」にし、押したときに泡を出す
   Cocoon には依存しない（スマホのボタンを探すところだけ js/surface.js が Cocoon のクラスを使う）。
   ================================================================ */
.wa-surface {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 60px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  background: var(--header-bg);
  border: 1px solid var(--card-border);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  color: var(--glow-blue);
  font-family: var(--font-round);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity      var(--dur-mid) var(--ease-float),
    transform    var(--dur-mid) var(--ease-float),
    border-color var(--dur-mid) var(--ease-float),
    box-shadow   var(--dur-mid) var(--ease-float);
}
.wa-surface.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wa-surface:hover,
.wa-surface:focus-visible {
  border-color: var(--glow-blue-a30);
  box-shadow: var(--shadow-card), var(--shadow-glow-md);
  color: var(--text-strong);
  outline: none;
}
.wa-surface svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-mid) var(--ease-float);
}
.wa-surface:hover svg { transform: translateY(-3px); }
.wa-surface-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
/* 触れているあいだ、ボタンの中を小さな泡が上っていく */
.wa-surface::before,
.wa-surface::after {
  content: '';
  position: absolute;
  bottom: -6px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--glow-blue-a30);
  border-radius: 50%;
  opacity: 0;
}
.wa-surface::before { left: 16px; }
.wa-surface::after  { right: 18px; width: 4px; height: 4px; }
.wa-surface:hover::before { animation: wa-surface-fizz 1.4s ease-in infinite; }
.wa-surface:hover::after  { animation: wa-surface-fizz 1.8s ease-in 0.5s infinite; }
@keyframes wa-surface-fizz {
  0%   { transform: translateY(0);     opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-64px); opacity: 0; }
}

/* 押したときに画面を上っていく泡（js/surface.js が作って、終わったら消す） */
.wa-rise {
  position: fixed;
  z-index: 9997;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border: 1px solid var(--glow-blue-a30);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--glow-soft) 45%, transparent) 0%, transparent 55%);
  pointer-events: none;
  opacity: 0;
  animation: wa-rise var(--d) cubic-bezier(0.3, 0.6, 0.4, 1) var(--delay) forwards;
}
@keyframes wa-rise {
  0%   { transform: translate(0, 0) scale(0.5);                 opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate(var(--sway), -110vh) scale(1.1); opacity: 0; }
}

/* スマホは下部メニューに「水面へ」があるので、丸いボタンは出さない */
@media screen and (max-width: 834px) {
  .wa-surface { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-surface:hover::before,
  .wa-surface:hover::after { animation: none; }
  .wa-rise { display: none; }
}