/* ============================================================
   Dream·X 圆梦行动 — 海洋主题动画系统
   波浪 / 气泡 / 光晕 / 漂浮 / 粒子 / 生物
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   关键帧定义
   ═══════════════════════════════════════════════════════════ */

/* 淡入上滑 */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 缩放弹入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 气泡上浮 */
@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-120px) translateX(var(--drift, 20px)) scale(var(--end-scale, 0.6));
    opacity: 0;
  }
}

/* 水平漂浮 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* 左右摇摆 (海草/水母) */
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* 柔和脉动 (光晕) */
@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.05); }
}

/* 光柱缓慢移动 */
@keyframes lightRays {
  0%   { opacity: 0.2; transform: translateX(-10px); }
  50%  { opacity: 0.3; transform: translateX(5px); }
  100% { opacity: 0.22; transform: translateX(-8px); }
}

/* 波浪流动 */
@keyframes waveMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 波纹扩散 */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(15,109,168,0.3);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(15,109,168,0);
  }
}

/* 闪烁 (水面阳光反射) */
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50%      { opacity: 1; transform: scale(1); }
}

/* 渐变呼吸 (海洋深度) */
@keyframes oceanBreathe {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 鱼群游动 */
@keyframes swim {
  0%   { transform: translateX(-100%) translateY(0); }
  25%  { transform: translateX(-50%) translateY(-15px); }
  50%  { transform: translateX(0%) translateY(5px); }
  75%  { transform: translateX(50%) translateY(-10px); }
  100% { transform: translateX(100%) translateY(0); }
}

/* 贝壳旋转 */
@keyframes shellSpin {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(5deg) translateY(-5px); }
  75%  { transform: rotate(-5deg) translateY(3px); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* 按钮按下反馈 */
@keyframes btnPress {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* 提交成功勾 */
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* 卡片入场 (错开) */
@keyframes cardStagger {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 海洋渐变呼吸背景 */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 文字波浪上色 */
@keyframes textWave {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* 进度条满格脉冲 */
@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; box-shadow: 0 0 12px rgba(15,109,168,0.4); }
}

/* ═══════════════════════════════════════════════════════════
   全局动画应用
   ═══════════════════════════════════════════════════════════ */

/* Section 交错入场 */
.section > * {
  animation: cardStagger 0.6s var(--ease-out) both;
}

.section > *:nth-child(1) { animation-delay: 0.05s; }
.section > *:nth-child(2) { animation-delay: 0.1s; }
.section > *:nth-child(3) { animation-delay: 0.15s; }
.section > *:nth-child(4) { animation-delay: 0.2s; }
.section > *:nth-child(5) { animation-delay: 0.25s; }
.section > *:nth-child(6) { animation-delay: 0.3s; }
.section > *:nth-child(7) { animation-delay: 0.35s; }

/* ═══════════════════════════════════════════════════════════
   Hero 区域 — 深海特效
   ═══════════════════════════════════════════════════════════ */

/* 海洋背景呼吸动画 */
.hero-bg {
  background-size: 200% 200%;
  animation: oceanBreathe 20s ease-in-out infinite;
}

/* 气泡群 */
@keyframes bubbleRise {
  0% {
    transform: translateY(100%) scale(0);
    opacity: 0;
  }
  15% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-20%) scale(1.2);
    opacity: 0;
  }
}

.hero-bubbles .bubble {
  animation: bubbleRise var(--bdur, 7s) var(--ease-in-out) infinite;
  animation-delay: var(--bdelay, 0s);
}

/* 光柱 */
@keyframes rayDrift {
  0%, 100% {
    transform: translateX(-5%) skewX(-2deg);
    opacity: 0.15;
  }
  50% {
    transform: translateX(3%) skewX(1deg);
    opacity: 0.28;
  }
}

.hero-light-rays {
  animation: rayDrift 15s ease-in-out infinite;
}

/* Hero 内容弹性入场 */
.hero h1 {
  animation: fadeSlideUp 0.9s var(--ease-spring) both;
}

.hero .lead {
  animation: fadeSlideUp 0.9s var(--ease-out) 0.2s both;
}

.hero .actions {
  animation: fadeSlideUp 0.9s var(--ease-out) 0.4s both;
}

.hero-panel {
  animation: fadeSlideUp 0.8s var(--ease-out) 0.5s both;
}

/* ═══════════════════════════════════════════════════════════
   页面装饰元素
   ═══════════════════════════════════════════════════════════ */

/* 波浪漫滩 SVG */
.wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.wave-divider svg {
  display: block;
  width: calc(100% + 2px);
  position: relative;
  left: -1px;
}

/* 海面阳光闪烁 */
.ocean-sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  animation: sparkle var(--sdur, 3s) ease-in-out infinite;
  animation-delay: var(--sdelay, 0s);
}

/* 浮动装饰元素 */
.float-element {
  animation: float var(--fdur, 4s) ease-in-out infinite;
}

/* 水母 / 海草装饰 */
.sea-creature {
  position: absolute;
  pointer-events: none;
  opacity: 0.6;
  animation: sway 6s ease-in-out infinite;
}

/* 鱼群装饰 */
.fish-school {
  position: absolute;
  pointer-events: none;
  animation: swim 20s linear infinite;
}

.fish-school:nth-child(2) {
  animation-delay: -7s;
  animation-duration: 22s;
}

.fish-school:nth-child(3) {
  animation-delay: -14s;
  animation-duration: 18s;
}

/* ═══════════════════════════════════════════════════════════
   按钮交互反馈
   ═══════════════════════════════════════════════════════════ */

.button:active,
.btn:active {
  animation: btnPress 0.2s ease;
}

/* 按钮 hover 波纹 */
.button {
  position: relative;
  overflow: hidden;
}

.button .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   卡片 hover 浮动
   ═══════════════════════════════════════════════════════════ */

.card,
.price-card,
.history article,
.timeline article,
.trust-item,
.info-grid .info-item {
  transition: transform 0.35s var(--ease-spring),
              box-shadow 0.35s var(--ease-out),
              border-color 0.25s var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════
   表单交互
   ═══════════════════════════════════════════════════════════ */

input:focus,
select:focus,
textarea:focus {
  animation: ripple 0.6s ease-out;
}

/* 提交成功动画 */
.form-message.success {
  animation: fadeSlideUp 0.4s var(--ease-out);
}

.form-message.error {
  animation: fadeSlideUp 0.4s var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════
   页面加载过渡
   ═══════════════════════════════════════════════════════════ */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--ocean-deep);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-wave {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.loader-wave span {
  width: 6px;
  height: 40px;
  background: var(--aqua-300);
  border-radius: var(--radius-full);
  animation: waveLoader 1.2s ease-in-out infinite;
}

.loader-wave span:nth-child(2) { animation-delay: 0.1s; }
.loader-wave span:nth-child(3) { animation-delay: 0.2s; }
.loader-wave span:nth-child(4) { animation-delay: 0.3s; }
.loader-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes waveLoader {
  0%, 100% { height: 40px; }
  50%      { height: 12px; }
}

/* ═══════════════════════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 640px) {
  .hero-bubbles .bubble {
    animation-duration: 12s;
  }

  .fish-school {
    display: none;
  }
}