:root {
  --motion-fast: 180ms;
  --motion-base: 280ms;
  --motion-slow: 650ms;
  --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-distance: 24px;
}

html {
  scroll-behavior: smooth;
}

@keyframes site-anchor-arrival {
  from {
    opacity: 0.68;
    transform: translate3d(0, 14px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.is-anchor-arriving {
  animation: site-anchor-arrival 620ms var(--motion-ease-out);
}

.has-page-motion body > section:first-of-type,
.has-page-motion main > section:first-of-type,
.has-page-motion main > header:first-child {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 520ms var(--motion-ease-out),
    transform 520ms var(--motion-ease-out);
}

.has-page-motion body > section:first-of-type.is-page-entry-visible,
.has-page-motion main > section:first-of-type.is-page-entry-visible,
.has-page-motion main > header:first-child.is-page-entry-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

:where(a, button, input, select, textarea, summary, [role="button"]) {
  transition-property:
    color, background-color, border-color, box-shadow, opacity, transform,
    filter;
  transition-duration: var(--motion-base) !important;
  transition-timing-function: var(--motion-ease) !important;
}

:where(a, button)::before,
:where(a, button)::after {
  transition-property:
    color, background-color, border-color, opacity, transform;
  transition-duration: var(--motion-base);
  transition-timing-function: var(--motion-ease);
}

:where(a, button, [role="button"]) :where(i, svg, img) {
  transition:
    color var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease),
    filter var(--motion-base) var(--motion-ease);
}

:where(
  .value-card,
  .coach-card,
  .coach-profile,
  .detail-block,
  .manifesto-point,
  .method-list-team li,
  .registration-plan,
  .registration-step,
  .entrainement-case,
  .license-junior,
  .license-ado,
  .card,
  .practice-card,
  .skill-item,
  .method-list li,
  .path-step,
  .axis-card,
  .fight-zone,
  .round-list li,
  .score-cell,
  .flow-list li,
  .parent-point,
  .values-list li,
  .session-step,
  .benefit-cell,
  .news-card,
  .swiper-slide,
  .timetable tbody td,
  .timetable .session,
  .session-time,
  .legal-prose section
) {
  transition-property:
    color, background-color, border-color, box-shadow, opacity, transform,
    filter;
  transition-duration: var(--motion-base) !important;
  transition-timing-function: var(--motion-ease) !important;
}

:where(
  .timeline-step > span,
  .value-card > .value-index,
  .manifesto-point > b,
  .method-list-team li > b,
  .path-step > b,
  .practice-card > b,
  .skill-item > .skill-index,
  .method-list li > b,
  .fight-zone > b,
  .round-list li > b,
  .axis-card > b,
  .flow-list li > b,
  .values-list li > b,
  .session-step > b,
  .registration-hero-panel li > b,
  .registration-step > b
) {
  transition:
    color var(--motion-base) var(--motion-ease),
    text-shadow var(--motion-base) var(--motion-ease),
    background-color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}

:where(
    .timeline-step,
    .value-card,
    .manifesto-point,
    .method-list-team li,
    .path-step,
    .practice-card,
    .skill-item,
    .method-list li,
    .fight-zone,
    .round-list li,
    .axis-card,
    .flow-list li,
    .values-list li,
    .session-step,
    .registration-hero-panel li,
    .registration-step
  ):hover
  > :where(span:first-child, .value-index, .skill-index, b:first-child) {
  color: #ff6b73 !important;
  text-shadow: 0 0 18px rgba(239, 26, 35, 0.3);
}

:where(
  .installation-grid img,
  .coach-photo img,
  .media-frame img,
  .lutte-block img,
  .mma-block img,
  .prepa-block img,
  .piedspoings-block img,
  .section-enfants img,
  .registration-plan img,
  .partners-logos img,
  .kids-media img,
  .news-card img
) {
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease),
    filter var(--motion-base) var(--motion-ease) !important;
}

.skill-item::before {
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}

.reveal-on-scroll.is-pending,
.team-reveal.is-pending,
.kids-reveal.is-pending,
.registration-reveal.is-pending,
.discipline-page .reveal.is-pending,
.motion-reveal.is-motion-pending {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance), 0);
  transition:
    opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-pending.is-visible,
.team-reveal.is-pending.is-visible,
.kids-reveal.is-pending.is-visible,
.registration-reveal.is-pending.is-visible,
.discipline-page .reveal.is-pending.is-visible,
.motion-reveal.is-motion-pending.is-motion-visible,
.reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.reveal {
  transition:
    opacity var(--motion-slow) var(--motion-ease-out),
    transform var(--motion-slow) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .has-page-motion body > section:first-of-type,
  .has-page-motion main > section:first-of-type,
  .has-page-motion main > header:first-child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  :where(
    .reveal-on-scroll,
    .team-reveal,
    .kids-reveal,
    .registration-reveal,
    .discipline-page .reveal,
    .motion-reveal
  ) {
    opacity: 1 !important;
    transform: none !important;
  }

  .is-anchor-arriving {
    animation: none !important;
  }
}