/* ═══════════════════════════════════════════════════════════════════════════
   VINTOLOGY — EDITORIAL TICKER + ANIMATED WORDMARK
   A slim marquee strip and a CSS-keyframe wordmark animation.
   Both honour prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ticker ── */
.ed-ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  padding: .85rem 0;
  margin: 0;
}
.ed-ticker__track {
  display: inline-flex;
  gap: 3rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-2);
  animation: ed-marquee 30s linear infinite;
  will-change: transform;
}
.ed-ticker__track span { color: var(--text-3); }
@keyframes ed-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── animated wordmark ── */
.ed-wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.ed-wordmark__ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.6em) rotate(2deg);
  animation: ed-word-in .55s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes ed-word-in {
  from { opacity: 0; transform: translateY(.6em) rotate(2deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
/* a slow sheen sweep across the wordmark once it has assembled */
.ed-wordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ed-sheen 2.4s cubic-bezier(.3, 0, .2, 1) .4s both;
}
@keyframes ed-sheen {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}
.ed-wordmark { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .ed-ticker__track { animation: none !important; }
  .ed-wordmark__ch { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ed-wordmark::after { animation: none !important; }
}