/* ========================================
   TOMATO PHOTO - 动效增强层
   仅添加动画，不修改布局 / 不改变颜色
   ======================================== */

/* ----- 图片优雅淡入 ----- */
img {
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

img.loaded,
img[data-loaded="true"] {
  opacity: 1;
}

/* 防止无 JS 或 src 为空时图片不可见 */
img[src=""],
img:not([src]) {
  opacity: 1;
}

/* ----- 滚动渐入（由 JS 触发 .visible）----- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 卡片悬停微浮 ----- */
.card {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-2px);
}

.card:active {
  transform: scale(0.985);
}

/* ----- 按钮悬停 ----- */
.btn,
.nav-btn {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              background 0.2s ease;
}

.btn:hover,
.nav-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn:active,
.nav-btn:active {
  transform: translateY(0) scale(0.96);
}

/* 作品编辑关键按钮：禁止 active 缩放，避免“只弹动没反应”的错觉 */
.wk-form-actions .btn:active,
.ae-save-btn:active,
.wk-img-cover-btn:active,
.wk-img-del:active {
  transform: none !important;
}

/* ----- 底部导航 ----- */
.bottom-nav a {
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.bottom-nav a:active {
  transform: scale(0.92);
}

/* ----- 团队卡片 / 瀑布流卡片悬停 ----- */
.home-team-card,
.mkt-card,
.pricing-card,
.service-card,
.team-card,
.contact-card,
.admin-tile {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
}

.home-team-card:hover,
.mkt-card:hover,
.pricing-card:hover,
.service-card:hover,
.team-card:hover,
.contact-card:hover,
.admin-tile:hover {
  transform: translateY(-2px);
}

.home-team-card:active,
.mkt-card:active,
.pricing-card:active,
.service-card:active,
.team-card:active,
.contact-card:active,
.admin-tile:active {
  transform: scale(0.985);
}

/* ----- Lightbox 图片缩放 ----- */
.lightbox img,
.lightbox video {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.lightbox.active img,
.lightbox.active video {
  opacity: 1;
  transform: scale(1);
}

/* ----- 滚动行平滑滚动 ----- */
.scroll-row {
  scroll-behavior: smooth;
}

/* ----- 流动图片条悬停减速 ----- */
.flow-track {
  transition: animation-play-state 0.3s ease;
}

.flow-strip:hover .flow-track {
  animation-play-state: paused;
}

/* ----- 减少动画偏好 ----- */
@media (prefers-reduced-motion: reduce) {
  img, .fade-up, .card, .btn, .nav-btn, .bottom-nav a,
  .home-team-card, .mkt-card, .pricing-card, .service-card,
  .team-card, .contact-card, .admin-tile,
  .lightbox img, .lightbox video, .flow-track {
    transition: none !important;
    animation: none !important;
  }
  .fade-up {
    opacity: 1;
    transform: none;
  }
}