/* 14th Avenue Studios — custom motion & marquee.
   Push the accessibility FAB above the 56px sticky mobile CTA bar. */
:root { --a11y-bottom: 80px; }

/* Marquee */
.marquee {
  display: inline-block;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero SVG motion — gentle drift on the inner arcs only */
.hero-arcs {
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-svg {
    animation: heroFade 1.2s ease-out both;
  }
  .hero-arcs {
    animation: arcsDrift 14s ease-in-out infinite alternate;
  }
  @keyframes heroFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 0.9; transform: translateY(0); }
  }
  @keyframes arcsDrift {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(-6px) scale(1.015); }
  }
}

/* Pause the marquee when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}

/* Nicer <summary> caret behaviour on WebKit */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Keep hero category word from triggering horizontal scroll on very small screens */
html, body { overflow-x: hidden; }