/* ==========================================================================
   Button hover animation (loaded last on every page)
   Two curved "waves" rise from the bottom of the button on hover / keyboard
   focus, filling it with the reversed brand gradient (gold → orange); the
   text turns white and the button presses in on click.
   The waves are drawn with clip-path (not overflow: hidden) so badges that
   stick out of a button (e.g. "SAVE 90%") are not cut off.
   Change the fill with --ts-btn-fill.
   Not animated on purpose: Apple / Google Pay buttons (brand rules),
   accordion headers, pagination, slider dots, cart +/- buttons.
   ========================================================================== */

:root {
  --ts-btn-fill: linear-gradient(90deg, #f7b02b 0%, #e66b23 100%); /* reversed brand gradient */
  --ts-btn-ease: cubic-bezier(0.55, 0, 0.1, 1);
}

:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button) {
  position: relative;
  isolation: isolate;
  transition: color 0.3s ease-in 0.1s, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Both waves cover the button box exactly; clip-path shapes and moves them */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button)::before,
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button)::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ts-btn-bw, 0px)); /* reach over the border so corners line up */
  z-index: -1;
  background: var(--ts-btn-fill);
  border-radius: inherit;
  pointer-events: none;
  transition: clip-path 0.5s var(--ts-btn-ease) 0.1s;
}

/* First wave: wide and softer, starts just below the button */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button)::before {
  opacity: 0.6;
  clip-path: ellipse(88% 90% at 50% 215%); /* starts fully below the button, incl. the border */
}

/* Second wave: taller, starts further down and slightly off-centre */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button)::after {
  clip-path: ellipse(80% 95% at 55% 300%);
}

/* Border width of outlined buttons (the fill layer reaches over it) */
.ts-btn--outline { --ts-btn-bw: 2px; }
.ts-btn--leaf-outline,
.ts-sort__btn,
.ts-view-toggle button,
.course-card-buy__access { --ts-btn-bw: 1.5px; }
.ts-buybar__access,
.wl-btn--outline,
.bundle-intro__actions .ts-btn--leaf-outline { --ts-btn-bw: 1px; }

@media (max-width: 767.98px) {
  .ts-btn--outline { --ts-btn-bw: 1.5px; }
}

/* Hover / keyboard focus: both waves rise and cover the button */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button):is(:hover, :focus-visible)::before {
  clip-path: ellipse(75% 130% at 50% 60%);
}

:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button):is(:hover, :focus-visible)::after {
  clip-path: ellipse(80% 140% at 50% 50%);
}

/* Text turns white; drop the old brighten / lift hover */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button):is(:hover, :focus-visible) {
  color: #fff;
  filter: none;
  transform: none;
  outline: none;
}

/* Press-in on click */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button):active {
  transform: scale(0.95);
}

/* Pieces inside buttons (icons, bold / underlined words) fade with the text */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button) :is(.bi, b, u, strong, small, span) {
  transition: color 0.3s ease-in 0.1s;
}

/* List / grid icons keep their gradient and fade to white over it
   (a gradient itself can't be animated, its covering colour can) */
.ts-view-toggle button:is(:hover, :focus-visible) .bi {
  color: #fff;
}

.course-intro__strip:is(:hover, :focus-visible) :is(u, b) {
  color: #fff;
}

/* Keyboard focus ring (shown only when tabbing) */
:is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
    .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
    .ts-buybar__access, .blog-newsletter__form button):focus-visible {
  box-shadow: 0 0 0 3px rgba(230, 109, 36, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
      .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
      .ts-buybar__access, .blog-newsletter__form button)::before,
  :is(.ts-btn, .ts-search__btn, .ts-icon-btn, .ts-sort__btn, .ts-view-toggle button,
      .course-card-buy__access, .course-intro__strip, .prime-hero__cta,
      .ts-buybar__access, .blog-newsletter__form button)::after {
    transition: none;
  }
}