/**
 * Restrained, reusable microinteractions for the public Progesto theme.
 * No layout-affecting properties: motion is limited to transform, opacity,
 * color, border and shadow.
 */

:root {
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 420ms;
  --ease-progesto: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-progesto-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons: clear hover, keyboard focus and tactile press feedback. */
:where(
  .btn,
  .btn-out,
  .button,
  .wp-element-button,
  .nav-cta,
  .course-hero__button
) {
  transition:
    background-color var(--motion-base) var(--ease-progesto-standard),
    border-color var(--motion-base) var(--ease-progesto-standard),
    box-shadow var(--motion-base) var(--ease-progesto),
    color var(--motion-fast) ease,
    filter var(--motion-base) ease,
    transform var(--motion-base) var(--ease-progesto);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .btn,
    .btn-out,
    .button,
    .wp-element-button,
    .nav-cta,
    .course-hero__button
  ):hover {
    filter: saturate(1.06);
    transform: translateY(-2px);
  }
}

:where(
  .btn,
  .btn-out,
  .button,
  .wp-element-button,
  .nav-cta,
  .course-hero__button
):active {
  filter: saturate(0.98);
  transform: translateY(1px) scale(0.985);
  transition-duration: 80ms;
}

:where(
  .btn,
  .btn-out,
  .button,
  .wp-element-button,
  .nav-cta,
  .course-hero__button
):focus-visible {
  box-shadow:
    0 0 0 3px rgb(255 255 255 / 0.9),
    0 0 0 6px rgb(36 127 182 / 0.45);
}

/* Sidebar controls must remain anchored inside the sticky index. */
.side-index :where(.btn, .btn-out):hover,
.side-index :where(.btn, .btn-out):active,
.side-index :where(.btn, .btn-out):focus-visible {
  transform: none;
}

/* Navigation underline uses transform instead of animating its width. */
.nav-links > li > a::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease-progesto);
  width: 100%;
}

.nav-links > li > a:hover::after,
.nav-links > li > a:focus-visible::after,
.nav-links > .current-menu-item > a::after,
.nav-links > .current-menu-ancestor > a::after {
  transform: scaleX(1);
}

.is-linked-card {
  cursor: pointer;
}

/* Only cards that are interactive receive motion. */
:where(
  .content-card,
  .service-card,
  .compare-card,
  .article-card,
  .query-card,
  .ac-card,
  .method-card,
  .scene-card
) {
  transition:
    background-color var(--motion-base) var(--ease-progesto-standard),
    border-color var(--motion-base) var(--ease-progesto-standard),
    box-shadow var(--motion-base) var(--ease-progesto),
    transform var(--motion-base) var(--ease-progesto);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .content-card,
    .service-card,
    .compare-card,
    .article-card,
    .query-card,
    .ac-card,
    .method-card,
    .scene-card
  ):hover {
    transform: translateY(-4px);
  }
}

:where(
  .content-card,
  .service-card,
  .compare-card,
  .article-card,
  .query-card,
  .ac-card,
  .method-card,
  .scene-card
):focus-within {
  border-color: rgb(36 127 182 / 0.38);
  box-shadow: 0 22px 58px rgb(32 77 100 / 0.12);
  transform: translateY(-4px);
}

/* Images respond as part of the card, never independently. */
:where(
  .content-card__media,
  .article-visual,
  .query-card .wp-block-post-featured-image
) {
  overflow: hidden;
}

:where(
  .content-card__media,
  .article-visual,
  .query-card .wp-block-post-featured-image
) img {
  transition: transform var(--motion-slow) var(--ease-progesto);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .content-card,
    .article-card,
    .query-card
  ):hover :where(
    .content-card__media,
    .article-visual,
    .wp-block-post-featured-image
  ) img {
    transform: scale(1.025);
  }
}

:where(
  .content-card,
  .article-card,
  .query-card
):focus-within :where(
  .content-card__media,
  .article-visual,
  .wp-block-post-featured-image
) img {
  transform: scale(1.025);
}

/* Directional CTA feedback stays tied to its parent component. */
:where(.card-cta, .compare-cta)::after,
.service-link span {
  transition: transform var(--motion-base) var(--ease-progesto);
}

:where(.service-card, .compare-card):hover :where(.card-cta, .compare-cta)::after,
:where(.service-card, .compare-card):focus-within :where(.card-cta, .compare-cta)::after {
  transform: translate(3px, -3px);
}

.service-link:hover span,
.service-link:focus-visible span {
  transform: translateX(4px);
}

/* Existing kicker lines reveal with the content, without splitting text. */
:where(.rv.kicker, .rv.eyebrow, .rv.sec-eyebrow)::before,
.rv :where(.kicker, .eyebrow, .sec-eyebrow)::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--ease-progesto) 100ms;
}

:where(.rv.in.kicker, .rv.in.eyebrow, .rv.in.sec-eyebrow)::before,
.rv.in :where(.kicker, .eyebrow, .sec-eyebrow)::before {
  transform: scaleX(1);
}

/* Form controls communicate focus without moving surrounding content. */
:where(
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea
) {
  transition:
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}

:where(
  input:not([type='checkbox']):not([type='radio']),
  select,
  textarea
):focus-visible {
  border-color: rgb(36 127 182 / 0.72);
  box-shadow: 0 0 0 4px rgb(36 127 182 / 0.12);
}

/* Motion must never be required to understand or operate the interface. */
@media (prefers-reduced-motion: reduce) {
  :where(
    .btn,
    .btn-out,
    .button,
    .wp-element-button,
    .nav-cta,
    .course-hero__button,
    .content-card,
    .service-card,
    .compare-card,
    .article-card,
    .query-card,
    .ac-card,
    .method-card,
    .scene-card,
    .card-cta,
    .compare-cta,
    .service-link span
  ) {
    transition-duration: 0.01ms !important;
  }

  :where(
    .btn,
    .btn-out,
    .button,
    .wp-element-button,
    .nav-cta,
    .course-hero__button,
    .content-card,
    .service-card,
    .compare-card,
    .article-card,
    .query-card,
    .ac-card,
    .method-card,
    .scene-card
  ):hover,
  :where(
    .btn,
    .btn-out,
    .button,
    .wp-element-button,
    .nav-cta,
    .course-hero__button,
    .content-card,
    .service-card,
    .compare-card,
    .article-card,
    .query-card,
    .ac-card,
    .method-card,
    .scene-card
  ):focus-within,
  :where(
    .btn,
    .btn-out,
    .button,
    .wp-element-button,
    .nav-cta,
    .course-hero__button
  ):active {
    transform: none !important;
  }

  :where(.rv.kicker, .rv.eyebrow, .rv.sec-eyebrow)::before,
  .rv :where(.kicker, .eyebrow, .sec-eyebrow)::before {
    transform: none;
    transition: none;
  }
}


/* 1. Active tabs: a single indicator glides between the existing buttons. */
.sw-list {
  position: relative;
}

.sw-active-pill {
  background: linear-gradient(180deg, var(--cyan, #28aeda), var(--blue, #247fb6));
  border-radius: 999px;
  height: var(--pill-h, 0);
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate3d(0, var(--pill-y, 0), 0);
  transition:
    height 240ms var(--ease-progesto),
    opacity 160ms ease,
    transform 300ms var(--ease-progesto);
  width: 3px;
  z-index: 2;
}

.sw-list.has-active-pill .sw-active-pill {
  opacity: 1;
}

.sw-item {
  position: relative;
}

#sw-title,
#sw-desc,
#sw-cta {
  transition: opacity 180ms ease;
}

/* 3. Accordion panels use their measured content height (set in JS). */
.faq-a,
.lesson-body {
  max-height: none !important;
  overflow: hidden;
  transition:
    height 340ms var(--ease-progesto),
    opacity 180ms ease;
}

.faq-q .plus,
.faq-q > span:last-child,
.lesson-head .plus,
.lesson-head > span:last-child {
  display: inline-grid;
  place-items: center;
  transform-origin: center;
  will-change: transform, opacity;
}

/* 4. Selected controls are clear but deliberately quiet. */
:where(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--blue, #247fb6);
  transition:
    box-shadow 160ms ease,
    filter 160ms ease,
    transform 100ms ease;
}

:where(input[type='checkbox'], input[type='radio']):checked,
:where(input[type='checkbox'], input[type='radio']).is-selected {
  box-shadow: 0 0 0 3px rgb(36 127 182 / 0.14);
  filter: saturate(1.08);
}

:where(input[type='checkbox'], input[type='radio']):active {
  transform: scale(.94);
}

:where([role='switch'])[aria-checked='true'],
:where([role='switch']).is-selected,
:where(.toggle, .wpcf7-list-item, .field).is-selected {
  border-color: rgb(36 127 182 / 0.48);
}

/* 5. Reading progress keeps the rAF update, with a shorter visual catch-up. */
body.single-post .progress {
  transition: width 70ms linear;
  will-change: width;
}

/* 6. Carousel controls receive tactile feedback in the block stylesheet. */

/* 7. Badges react to the state of their parent card. */
:where(.pill, .tag, .article-tag, .meta-pill, .product-code, .product-label) {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

:where(
  .service-card.active,
  .service-card.is-active,
  .article-card.active,
  .article-card.is-active,
  .course-card.active,
  .course-card.is-active,
  .compare-card.active,
  .compare-card.is-active
) :where(.pill, .tag, .article-tag, .meta-pill, .product-code, .product-label),
:where(.service-card, .article-card, .course-card, .compare-card):focus-within
  :where(.pill, .tag, .article-tag, .meta-pill, .product-code, .product-label) {
  background-color: rgb(36 127 182 / 0.1);
  border-color: rgb(36 127 182 / 0.34);
}

/* 8. Footer social links move by one pixel and press cleanly. */
footer :where(
  .wp-block-social-link,
  .wp-social-link,
  a[href*='linkedin.com'],
  a[href*='facebook.com'],
  a[href*='instagram.com'],
  a[href*='youtube.com']
) {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 220ms var(--ease-progesto);
}

@media (hover: hover) and (pointer: fine) {
  footer :where(
    .wp-block-social-link,
    .wp-social-link,
    a[href*='linkedin.com'],
    a[href*='facebook.com'],
    a[href*='instagram.com'],
    a[href*='youtube.com']
  ):hover {
    transform: translateY(-2px);
  }
}

footer :where(
  .wp-block-social-link,
  .wp-social-link,
  a[href*='linkedin.com'],
  a[href*='facebook.com'],
  a[href*='instagram.com'],
  a[href*='youtube.com']
):active {
  transform: translateY(0) scale(.95);
  transition-duration: 80ms;
}

/* 9. Previous/next article arrows accompany the reading direction. */
.post-navigation .nav-previous a::before,
.navigation.post-navigation .nav-previous a::before {
  content: '←';
  display: inline-block;
  margin-right: .45em;
  transition: transform 220ms var(--ease-progesto);
}

.post-navigation .nav-next a::after,
.navigation.post-navigation .nav-next a::after {
  content: '→';
  display: inline-block;
  margin-left: .45em;
  transition: transform 220ms var(--ease-progesto);
}

.post-navigation .nav-previous a:hover::before,
.post-navigation .nav-previous a:focus-visible::before {
  transform: translateX(-4px);
}

.post-navigation .nav-next a:hover::after,
.post-navigation .nav-next a:focus-visible::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .sw-active-pill,
  #sw-title,
  #sw-desc,
  #sw-cta,
  .faq-a,
  .lesson-body,
  :where(input[type='checkbox'], input[type='radio']),
  body.single-post .progress,
  :where(.pill, .tag, .article-tag, .meta-pill, .product-code, .product-label),
  footer :where(.wp-block-social-link, .wp-social-link),
  .post-navigation a::before,
  .post-navigation a::after {
    transition: none !important;
  }

  footer :where(.wp-block-social-link, .wp-social-link):hover,
  footer :where(.wp-block-social-link, .wp-social-link):active,
  .post-navigation a:hover::before,
  .post-navigation a:hover::after {
    transform: none !important;
  }
}


/* Service timelines: one restrained reveal per group, without changing layout. */
.service-process.timeline-ready::before {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 720ms var(--ease-progesto);
}

.service-process.timeline-ready.timeline-in::before {
  clip-path: inset(0);
}

.service-process.timeline-ready > .service-process__step {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 360ms ease var(--timeline-delay, 0ms),
    transform 520ms var(--ease-progesto) var(--timeline-delay, 0ms),
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.service-process.timeline-ready.timeline-in > .service-process__step {
  opacity: 1;
  transform: translateY(0);
}

.service-process.timeline-ready.timeline-in > .service-process__step:hover {
  transform: translateY(-3px);
}

.service-process.timeline-ready > .service-process__step .pill {
  transition:
    box-shadow 320ms ease,
    transform 420ms var(--ease-progesto);
}

.service-process.timeline-ready:not(.timeline-in) > .service-process__step .pill {
  transform: scale(.78);
}

.service-process.timeline-ready.timeline-in > .service-process__step .pill {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .service-process.timeline-ready::before,
  .service-process.timeline-ready > .service-process__step,
  .service-process.timeline-ready > .service-process__step .pill {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}


/* Automatic group motion — adapted from the saved animation library. */
.motion-group-ready > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 360ms ease var(--motion-item-delay, 0ms),
    transform 560ms var(--ease-progesto) var(--motion-item-delay, 0ms);
}

.motion-group-ready.motion-group-in > * {
  opacity: 1;
  transform: translateY(0);
}

.metric-bar {
  background: rgb(36 127 182 / .10);
  border: 1px solid rgb(36 127 182 / .12);
  border-radius: 999px;
  display: block;
  height: 7px;
  margin-top: 12px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.metric-bar__fill {
  background: linear-gradient(
    90deg,
    var(--progress-start, #18b7c1),
    var(--progress-middle, #247fb6) 58%,
    var(--progress-end, #46b867)
  );
  border-radius: inherit;
  box-shadow: 0 0 16px var(--progress-glow, rgb(24 183 193 / .28));
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-progesto) 120ms;
  width: 100%;
}

.metric-bar-in .metric-bar__fill {
  transform: scaleX(var(--metric-target, 0));
}

@media (prefers-reduced-motion: reduce) {
  .motion-group-ready > *,
  .motion-group-ready.motion-group-in > * {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .metric-bar__fill {
    transform: scaleX(var(--metric-target, 0));
    transition: none;
  }
}


@media (hover: hover) and (pointer: fine) {
  .motion-group-ready.motion-group-in > *:hover {
    transform: translateY(-4px);
  }
}

.motion-group-ready.motion-group-in > *:focus-within {
  transform: translateY(-4px);
}