/* ===========================================
   全国水族館ガイド Japan - 海モチーフアニメーション
   =========================================== */

/* -------------------------------------------
   光のシャフト（水面から差し込む光）
   ------------------------------------------- */
.light-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.light-ray {
  position: absolute;
  top: -8%;
  height: 118%;
  transform-origin: top center;
  background: linear-gradient(
    180deg,
    rgba(202, 240, 248, 0.7)  0%,
    rgba(144, 224, 239, 0.3)  35%,
    rgba(72,  202, 228, 0.1)  65%,
    transparent               100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent  0%,
    white       28%,
    white       72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent  0%,
    white       28%,
    white       72%,
    transparent 100%
  );
  filter: blur(7px);
  animation: rayDrift ease-in-out infinite;
}

/* 7本のシャフト：幅・位置・角度・速度をそれぞれ個性付け */
.light-ray:nth-child(1) { left:  5%;  width:  90px; transform: rotate(-16deg); animation-duration:  7s; animation-delay: 0s;   }
.light-ray:nth-child(2) { left: 20%;  width:  48px; transform: rotate( -7deg); animation-duration: 10s; animation-delay: 1.6s; opacity: 0.65; }
.light-ray:nth-child(3) { left: 35%;  width: 160px; transform: rotate(  3deg); animation-duration: 13s; animation-delay: 0.4s; }
.light-ray:nth-child(4) { left: 55%;  width:  60px; transform: rotate( 11deg); animation-duration:  8s; animation-delay: 3.0s; opacity: 0.6; }
.light-ray:nth-child(5) { left: 67%;  width: 120px; transform: rotate( -5deg); animation-duration: 15s; animation-delay: 5.0s; }
.light-ray:nth-child(6) { left: 82%;  width:  50px; transform: rotate(  8deg); animation-duration:  9s; animation-delay: 2.2s; opacity: 0.55; }
.light-ray:nth-child(7) { left: -3%;  width:  70px; transform: rotate(-20deg); animation-duration: 11s; animation-delay: 3.8s; opacity: 0.5; }

@keyframes rayDrift {
  0%,  100% { opacity: 0.08; }
  30%        { opacity: 0.75; }
  55%        { opacity: 0.4;  }
  80%        { opacity: 0.62; }
}

/* -------------------------------------------
   水面の揺らぎ（ヒーロー上端）
   ------------------------------------------- */
.surface-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(144, 224, 239, 0.5) 20%,
    rgba(202, 240, 248, 0.8) 50%,
    rgba(144, 224, 239, 0.5) 80%,
    transparent 100%
  );
  animation: shimmerMove 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerMove {
  0%, 100% { opacity: 0.4; transform: scaleX(1); }
  50%       { opacity: 0.9; transform: scaleX(1.02); }
}

/* -------------------------------------------
   泡（ヒーロー内）
   ------------------------------------------- */
.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.bubble {
  position: absolute;
  bottom: -30px;
  border-radius: 50%;
  /* 泡らしいグラデーション：光の反射を表現 */
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.65),
    rgba(144, 224, 239, 0.12) 60%,
    transparent 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.32);
  animation: bubbleRise linear infinite;
  will-change: transform, opacity;
}
@keyframes bubbleRise {
  0%   { transform: translateY(0)       translateX(0);                           opacity: 0; }
  8%   { opacity: 1; }
  25%  { transform: translateY(-26vh)   translateX(var(--sway, 12px)); }
  50%  { transform: translateY(-52vh)   translateX(0); }
  75%  { transform: translateY(-78vh)   translateX(calc(var(--sway, 12px) * -1)); }
  88%  { opacity: 0.7; }
  100% { transform: translateY(-105vh)  translateX(0);                           opacity: 0; }
}

/* -------------------------------------------
   水槽内の泡
   ------------------------------------------- */
.tank-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.tank-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, 0.6),
    rgba(144, 224, 239, 0.1) 60%,
    transparent
  );
  border: 1px solid rgba(255, 255, 255, 0.28);
  animation: tankBubbleRise linear infinite;
}
@keyframes tankBubbleRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  6%   { opacity: 0.9; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-420px) translateX(var(--drift, 0px)); opacity: 0; }
}

/* -------------------------------------------
   魚スイム（水槽）
   ------------------------------------------- */
.tank-fish {
  position: absolute;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  animation: tankSwimLTR linear infinite;
}
.tank-fish.rtl { animation-name: tankSwimRTL; }

@keyframes tankSwimLTR {
  0%   { left: -80px;  opacity: 0; }
  5%   { opacity: 0.9; }
  95%  { opacity: 0.9; }
  100% { left: calc(100% + 80px); opacity: 0; }
}
@keyframes tankSwimRTL {
  0%   { left: calc(100% + 80px); opacity: 0; transform: scaleX(-1); }
  5%   { opacity: 0.9; }
  95%  { opacity: 0.9; }
  100% { left: -80px;  opacity: 0; transform: scaleX(-1); }
}

/* 魚のひれをそっと動かす揺れアニメーション */
.tank-fish::after {
  content: attr(data-emoji);
  position: absolute;
  animation: fishWobble 1.5s ease-in-out infinite;
}
@keyframes fishWobble {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* -------------------------------------------
   海藻の揺れ（水槽底部装飾）
   ------------------------------------------- */
.seaweed {
  position: absolute;
  bottom: 24px;
  font-size: 1.6rem;
  animation: seaweedSway ease-in-out infinite;
  transform-origin: bottom center;
  line-height: 1;
}
.seaweed:nth-child(1) { left: 12%; animation-duration: 3.2s; animation-delay: 0s; }
.seaweed:nth-child(2) { left: 22%; animation-duration: 4s;   animation-delay: 0.6s; font-size: 2rem; }
.seaweed:nth-child(3) { left: 68%; animation-duration: 3.6s; animation-delay: 1.2s; }
.seaweed:nth-child(4) { left: 80%; animation-duration: 2.8s; animation-delay: 0.3s; font-size: 2rem; }

@keyframes seaweedSway {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(8deg); }
}

/* -------------------------------------------
   深海グロウ（水槽の光沢）
   ------------------------------------------- */
.tank-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 40% at 50% 20%,
    rgba(0, 180, 216, 0.1),
    transparent 70%
  );
  pointer-events: none;
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* -------------------------------------------
   スクロールインジケーター
   ------------------------------------------- */
.scroll-indicator {
  position: absolute;
  bottom: 148px; /* 波の高さ + 余白 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fadeUp 1s ease 1.4s forwards;
  pointer-events: none;
}
.scroll-indicator span {
  font-family: var(--font-en, 'Montserrat', sans-serif);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
.scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.scroll-wheel {
  width: 3px;
  height: 7px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
  animation: scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%        { transform: translateY(0); opacity: 1; }
  60%, 100% { transform: translateY(8px); opacity: 0; }
}

/* -------------------------------------------
   水面光の反射（ヒーロー中央〜上部）
   ------------------------------------------- */
.caustics {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80px 40px at 30% 15%, rgba(202, 240, 248, 0.08) 0%, transparent 100%),
    radial-gradient(ellipse 60px 30px at 70% 25%, rgba(144, 224, 239, 0.07) 0%, transparent 100%),
    radial-gradient(ellipse 100px 50px at 55% 10%, rgba(202, 240, 248, 0.06) 0%, transparent 100%);
  animation: causticsShift 12s ease-in-out infinite;
  pointer-events: none;
}
@keyframes causticsShift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(16px, 8px) scale(1.05); }
  66%       { transform: translate(-10px, 12px) scale(0.97); }
}

/* -------------------------------------------
   前庭疾患・動きに敏感なユーザー向け
   アニメーションを全て無効化
   ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .light-ray,
  .surface-shimmer,
  .bubble,
  .tank-bubble,
  .tank-fish,
  .tank-fish::after,
  .seaweed,
  .tank-glow,
  .scroll-wheel,
  .caustics {
    animation: none;
  }

  /* fadeUp で opacity:0 のままになるのを防ぐ */
  .scroll-indicator {
    animation: none;
    opacity: 1;
  }

  /* 魚は止まった状態で表示（泳ぎ出しの位置を起点に） */
  .tank-fish {
    left: 40%;
    opacity: 0.8;
  }
}