/**
 * 好评助手 - 共享动画样式
 * Editorial Paper Dynamics - 奶咖纸品编辑风动效
 */

/* ====== Easing Tokens ====== */
:root {
  --ease-paper: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-reveal: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-snap: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ====== Page Entrances ====== */
@keyframes paperFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes paperRevealLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes paperRevealScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ====== Ink Reveal (clip-path) ====== */
@keyframes inkReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0% 0 0); }
}
.ink-reveal {
  animation: inkReveal 0.6s var(--ease-reveal);
}

/* ====== Micro-interactions ====== */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
}

/* ====== Scroll Reveal ====== */
@keyframes scrollReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====== Auth Page ====== */
@keyframes logoSettle {
  0%   { opacity: 0; transform: scale(0.9); }
  50%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes paperShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ====== Error Page ====== */
@keyframes iconBounce {
  0%   { opacity: 0; transform: translateY(-8px); }
  60%  { transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ====== Count Up ====== */
@keyframes countPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ====== Utility Classes ====== */
.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
.anim-delay-4 { animation-delay: 0.32s; }
.anim-delay-5 { animation-delay: 0.40s; }

/* Scroll-triggered reveal base */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-reveal), transform 0.5s var(--ease-reveal);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Left accent bar animate */
.accent-bar-reveal {
  position: relative;
}
.accent-bar-reveal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 0;
  background: var(--accent-primary, #b45309);
  transition: height 0.5s var(--ease-reveal);
}
.accent-bar-reveal.is-visible::before {
  height: 100%;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--bg-warm, #faf4e6) 25%, #f0ebe3 50%, var(--bg-warm, #faf4e6) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 4px;
}

/* Button ripple container */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* Tab underline slide */
.tab-slide {
  position: relative;
}
.tab-slide::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-primary, #b45309);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-snap);
}
.tab-slide.active::after,
.tab-slide:hover::after {
  transform: scaleX(1);
}

/* Card lift with paper shadow */
.card-lift {
  transition: transform 0.25s var(--ease-paper), box-shadow 0.25s var(--ease-paper);
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(28,25,23,0.08), 0 2px 6px rgba(28,25,23,0.04);
}

/* Image hover zoom (contained) */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.4s var(--ease-paper);
}
.img-zoom:hover img {
  transform: scale(1.04);
}

/* Modal backdrop blur fade */
.modal-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-backdrop.show {
  opacity: 1;
}
.modal-content-anim {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.3s var(--ease-reveal), transform 0.3s var(--ease-reveal);
}
.modal-backdrop.show .modal-content-anim {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Form group stagger entrance */
.form-stagger {
  opacity: 0;
  animation: paperFadeIn 0.5s var(--ease-reveal) forwards;
}

/* Stagger list items */
.stagger-list > * {
  opacity: 0;
  animation: paperFadeIn 0.4s var(--ease-reveal) forwards;
}

/* Review item left slide */
.review-item-anim {
  opacity: 0;
  animation: paperRevealLeft 0.4s var(--ease-reveal) forwards;
}

/* Section fade in */
.section-anim {
  opacity: 0;
  animation: paperFadeIn 0.5s var(--ease-reveal) forwards;
}

/* ====== Count Up Number ====== */
.count-up {
  display: inline-block;
}
.count-up.done {
  animation: countPulse 0.3s var(--ease-snap);
}

/* ====== Keyword Tag Animations ====== */
.tag-enter {
  opacity: 0;
  transform: scale(0.95);
  animation: paperFadeIn 0.3s var(--ease-reveal) forwards;
}
.tag-exit {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}
.tag-exit.removing {
  opacity: 0;
  transform: scale(0.9);
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ====== Table Row Reveal ====== */
.table-row-anim {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s var(--ease-reveal), transform 0.3s var(--ease-reveal);
}
.table-row-anim.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ====== Press/Tactile Feedback ====== */
.btn-press:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

/* ====== Table Responsive Wrapper ====== */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-wrapper::-webkit-scrollbar-track {
  background: var(--bg-warm, #faf4e6);
  border-radius: 3px;
}
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-medium, #d6d3d1);
  border-radius: 3px;
}

/* ====== Touch-friendly Base ====== */
input, select, textarea, button {
  font-size: 16px; /* Prevent iOS zoom on focus */
}

/* ====== Responsive Helpers ====== */
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}
@media (max-width: 768px) {
  .hide-sm { display: none !important; }
}

/* ====== Prefers Reduced Motion ====== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-on-scroll,
  .table-row-anim {
    opacity: 1 !important;
    transform: none !important;
  }
}