/* =========================================================================
   home-tweaks.css — minimal home-page adjustments (loaded after main.css).
   Two things only; the rest of the home page is untouched:
     1. Stop the ticker marquee — it sits static, original copy kept.
     2. Anchor the spinning "WORK WITH ME" button to the lower-right on very
        large screens so it no longer floats over the ticker text.
        (The spin itself is unchanged — animation-circle in main.css still runs.)
   ========================================================================= */

/* 1. Ticker: keep the marquee, but slow it right down (main.css runs it at
   10s; 85s keeps the same calm ~90px/s drift across the longer phrase list).
   main.css sizes the two copies with percentage widths tuned to the old
   single-phrase copy, which no longer matches the phrase list. Size them by
   their own content instead: the wrapper is exactly two copies wide, so
   moveTicker's translateX(-50%) lands one full copy over and the loop is
   seamless at every breakpoint. */
.home-ticker__wrapper {
  width: -webkit-max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  -webkit-animation: moveTicker 85s linear infinite !important;
  animation: moveTicker 85s linear infinite !important;
}
.home-ticker__text {
  width: auto !important;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
/* Smaller type on phones makes one copy much narrower, so shorten the cycle to
   hold roughly the same on-screen drift speed. */
@media only screen and (max-width: 1024px) {
  .home-ticker__wrapper {
    -webkit-animation-duration: 40s !important;
    animation-duration: 40s !important;
  }
}

/* 2. Circle button: keep the spin (animation-circle stays on .home-button__item)
   and add a smooth, CONTINUOUS float + breathe on the OUTER button so the two
   transforms don't fight. ease-in-out makes it glide (sine-like) and loop
   seamlessly — no start/stop "steps". */
.home-author__button {
  -webkit-animation: home-float 3.4s ease-in-out infinite;
  animation: home-float 3.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes home-float {
  0%, 100% { -webkit-transform: translateY(0) scale(1);      transform: translateY(0) scale(1); }
  50%      { -webkit-transform: translateY(-9px) scale(1.045); transform: translateY(-9px) scale(1.045); }
}

/* 3. Button position on large screens (>1900px). main.css's base rule places
   it at right:290px / bottom:282px, which on wide screens lands mid-right over
   the ticker. Anchor it to the lower-right corner instead, clear of the text.
   (≤1900px already anchors lower-right, so it's left as-is.) */
@media only screen and (min-width: 1901px) {
  .home-author__button {
    right: 6%;
    bottom: 8%;
  }
}

/* Reduced motion: hold everything still. */
@media (prefers-reduced-motion: reduce) {
  .home-ticker__wrapper,
  .home-author__button,
  .home-button__item {
    -webkit-animation: none !important;
    animation: none !important;
  }
}