/**
 * Winners section - 5 张图片贺图 (所有信息在 winner-N.jpg 里)
 *
 * Phase 7: 连续匀速向左滚动 + 触摸拖动支持
 *
 * 5 张固定卡 + 5 张重复 (DOM 中 10 个) → CSS @keyframes 滚动 -50% 循环
 * 速度: 40 px/秒 (linear) — 适合欣赏卡片内容
 *
 * 触摸: 
 *   - touchstart: 暂停动画
 *   - touchmove: 用户控制 scrollLeft
 *   - touchend: 2 秒后恢复动画 (从当前位置继续)
 *
 * Memory compliance:
 *   - 纯 CSS 动画 (GPU 加速)
 *   - prefers-reduced-motion: 自动降级为静态
 *   - iOS Safari touch-action: pan-y !important (memory 反复警告)
 *   - img !important (OceanWP 兼容性)
 */

[data-blinds-winners] {
  position: relative;
  padding: clamp(80px, 12vw, 160px) 0;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}

.winners-head {
  padding: 0 clamp(20px, 4vw, 64px);
  display: grid;
  gap: 16px;
  max-width: 800px;
  margin: 0 0 56px;
}
.winners-head .eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--ink-lime);
}
.winners-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-64);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-fg);
  margin: 0;
  text-wrap: balance;
}
.winners-head h2 .accent { color: var(--ink-lime); font-style: italic; }
.winners-head p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 56ch;
  margin: 0;
}

/* ============================================ */
/* Continuous horizontal scroll (marquee-style) */
/* ============================================ */
.winners-rail {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 8px 0 24px;            /* horizontal padding removed — 0 margin trick */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* hide scrollbar in continuous mode */
  touch-action: pan-y !important;     /* memory: iOS Safari */
  overscroll-behavior-x: contain;
  /* Inner padding via mask instead, so cloned cards touch edges cleanly */
  padding-left: clamp(20px, 4vw, 64px);
  padding-right: clamp(20px, 4vw, 64px);
  /* Phase 7: continuous animation */
  animation: winners-scroll-left 40s linear infinite;
  will-change: transform;
}

/* Hide scrollbar in continuous mode (visual) */
.winners-rail::-webkit-scrollbar { display: none; }
.winners-rail { scrollbar-width: none; -ms-overflow-style: none; }

/* Pause animation on hover / focus / drag */
.winners-rail:hover,
.winners-rail:focus-within {
  animation-play-state: paused;
}
.winners-rail.is-paused {
  animation-play-state: paused;
}

/* Continuous left loop:
   - rail width = 5 cards + 5 clones + gap = ~2 × (5 × 320 + 5 × 20) = ~3700px
   - we scroll by -50% (half rail width = 1 set of 5 cards) so the second set
     lines up where the first was → seamless loop
   - duration: 40s → ~40px/sec on a 1600px width */
@keyframes winners-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Winner card: 竖向海报比例, 全屏背景 */
.winner {
  position: relative;
  flex: 0 0 clamp(260px, 22vw, 320px);
  aspect-ratio: 3 / 4;
  background: var(--ink-surface);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-spring),
              border-color var(--dur-base) var(--ease-out-expo);
}
.winner:hover {
  transform: translateY(-4px);
  border-color: var(--ink-lime-line);
}
.winner-clone {
  /* clones are non-interactive — skip */
  pointer-events: none;
}

/* 背景图全屏 */
.winner-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  z-index: 1;
}

/* Empty fallback (no image uploaded yet) */
.winner-bg-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--ink-surface) 0%, var(--ink-surface-2) 100%);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  z-index: 1;
  padding: 16px;
  text-align: center;
}
.winner-bg-empty svg { opacity: 0.4; }

/* 颗粒纹理 overlay */
.winner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}
.winner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-2xl);
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 20%),
    linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 30%);
  z-index: 3;
}

/* Progress indicator (dots) */
.winners-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 0 24px;
}
.winners-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out-expo);
}
.winners-dot[data-active="1"] {
  background: var(--ink-lime);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 12px var(--ink-lime-soft);
}
.winners-dot:hover { background: var(--ink-fg); }
.winners-dot[data-active="1"]:hover { background: var(--ink-lime); }

/* Mobile: slightly faster + larger cards for thumb */
@media (max-width: 767px) {
  .winner { flex: 0 0 75vw; }
  /* speed up on mobile because cards are bigger */
  .winners-rail {
    animation-duration: 30s;
  }
}

/* Reduced motion: no animation */
@media (prefers-reduced-motion: reduce) {
  .winners-rail {
    animation: none !important;
    overflow-x: auto;
  }
}