/*
 * Differential Diagnosis performance-first motion system.
 * Motion is intentionally restrained: no continuous animation, no LCP/hero
 * entrance delay, no layout-property animation, and no persistent will-change.
 */

:root {
  --dd-motion-fast: 160ms;
  --dd-motion-ui: 190ms;
  --dd-motion-reveal: 390ms;
  --dd-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------------------
   Scroll reveal — desktop/tablet only and only when JS opts an element in.
   Above-the-fold content is never hidden or animated.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  [data-dd-reveal] {
    opacity: 0;
    transform: translate3d(0, 9px, 0);
    transition:
      opacity var(--dd-motion-reveal) var(--dd-motion-ease),
      transform var(--dd-motion-reveal) var(--dd-motion-ease);
  }

  [data-dd-reveal].is-dd-visible {
    opacity: 1;
    transform: none;
  }

  /* A group uses one IntersectionObserver target. Children stagger in CSS,
     avoiding a separate observer entry for every card. */
  .dd-motion-group > :where(article, .course-card, .dd-blog-card, .dd-preview-card, .dd-service-selector__item, .dd-service-plan) {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
    transition:
      opacity 340ms var(--dd-motion-ease),
      transform 340ms var(--dd-motion-ease);
    transition-delay: var(--dd-motion-delay, 0ms);
  }

  .dd-motion-group.is-dd-visible > :where(article, .course-card, .dd-blog-card, .dd-preview-card, .dd-service-selector__item, .dd-service-plan) {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Buttons and icon micro-interactions — composited properties only.
   -------------------------------------------------------------------------- */
:where(
  .dd-action-button,
  .button,
  .wp-element-button,
  button[type="submit"],
  input[type="submit"]
):not(.menu-toggle):not(.nav-trigger):not(.offcanvas-close) {
  transition:
    transform var(--dd-motion-fast) ease,
    box-shadow var(--dd-motion-fast) ease,
    background-color var(--dd-motion-fast) ease,
    border-color var(--dd-motion-fast) ease,
    color var(--dd-motion-fast) ease;
}

:where(.dd-action-button, .button, button[type="submit"]) :where(.fi-rr-arrow-right, .fi-rs-arrow-right) {
  transition: transform var(--dd-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .dd-action-button,
    .button,
    .wp-element-button,
    button[type="submit"],
    input[type="submit"]
  ):not(.menu-toggle):not(.nav-trigger):not(.offcanvas-close):not(:disabled):hover {
    transform: translateY(-1px);
  }

  :where(.dd-action-button, .button, button[type="submit"]):hover :where(.fi-rr-arrow-right, .fi-rs-arrow-right) {
    transform: translateX(2px);
  }
}

/* --------------------------------------------------------------------------
   Card hover — no image zoom and no large lifts.
   -------------------------------------------------------------------------- */
:where(
  .course-card,
  .dd-blog-card,
  .dd-about-card,
  .dd-address-card,
  .dd-benefit-card,
  .dd-preview-card,
  .dd-single-related-card,
  .dd-free-material__card,
  .dd-instructor__card,
  .dd-mission__card,
  .contact-page-card,
  .contact-brand-card,
  .contact-details-card,
  .courses-trust-card,
  .dd-service-selector__item,
  .dd-service-plan
) {
  transition:
    transform var(--dd-motion-ui) var(--dd-motion-ease),
    box-shadow var(--dd-motion-ui) var(--dd-motion-ease),
    border-color var(--dd-motion-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .course-card,
    .dd-blog-card,
    .dd-about-card,
    .dd-address-card,
    .dd-benefit-card,
    .dd-preview-card,
    .dd-single-related-card,
    .dd-free-material__card,
    .dd-instructor__card,
    .dd-mission__card,
    .contact-page-card,
    .contact-brand-card,
    .contact-details-card,
    .courses-trust-card,
    .dd-service-plan
  ):hover {
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   Navigation and menus.
   -------------------------------------------------------------------------- */
.nav-item.is-open > .mega-menu .mega-menu__inner {
  animation: ddPopoverIn var(--dd-motion-ui) var(--dd-motion-ease) both;
}

.header-account-dropdown:not([hidden]) {
  animation: ddFadeIn var(--dd-motion-fast) ease both;
}

@keyframes ddPopoverIn {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes ddFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile navigation remains immediate; only the panel itself transitions.
   Avoid staggered child animations on lower-power/mobile devices. */
@media (max-width: 991px) {
  .mobile-accordion.is-open .mobile-accordion__panel:not([hidden]) {
    animation: ddAccordionContentIn 170ms ease both;
  }
}

/* --------------------------------------------------------------------------
   Dropdowns, tabs, accordions, and dynamic product panels.
   -------------------------------------------------------------------------- */
.dd-pricing-select__menu:not([hidden]) {
  transform-origin: top center;
  animation: ddDropdownIn 170ms var(--dd-motion-ease) both;
}

@keyframes ddDropdownIn {
  from { opacity: 0; transform: translate3d(0, -3px, 0); }
  to { opacity: 1; transform: none; }
}

:where(
  .dd-course-tabs__panel.is-active,
  .dd-course-tabs__panel:not([hidden]),
  .dd-faq__item.is-open .dd-faq__panel,
  .dd-pricing-accordion.is-open .dd-pricing-accordion__panel,
  .dd-careers-job.is-open .dd-careers-job__panel-inner
) {
  animation: ddAccordionContentIn var(--dd-motion-ui) var(--dd-motion-ease) both;
}

@keyframes ddAccordionContentIn {
  from { opacity: .72; transform: translate3d(0, -3px, 0); }
  to { opacity: 1; transform: none; }
}

.dd-service-packages__panel,
.service-package-panel {
  transition: opacity 150ms ease;
}

.dd-service-packages__panel.is-updating,
.service-package-panel.is-updating {
  opacity: .72;
}

.dd-service-selector__arrow,
.service-selector__arrow {
  transition: color var(--dd-motion-fast) ease, transform var(--dd-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .dd-service-selector__item:hover .dd-service-selector__arrow,
  .service-selector__item:hover .service-selector__arrow {
    transform: translateX(2px);
  }
}

/* --------------------------------------------------------------------------
   Modal / dialog entry.
   -------------------------------------------------------------------------- */
.dd-video-modal:not([hidden]) .dd-video-modal__backdrop,
[role="dialog"] + .modal-backdrop,
.dialog-backdrop {
  animation: ddFadeIn 160ms ease both;
}

/* --------------------------------------------------------------------------
   Accessibility + explicit low-motion modes.
   -------------------------------------------------------------------------- */
.dd-motion-lite [data-dd-reveal],
.dd-motion-lite [data-dd-reveal].is-dd-visible,
.dd-motion-lite .dd-motion-group > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-dd-reveal],
  [data-dd-reveal].is-dd-visible,
  .dd-motion-group > *,
  .nav-item.is-open > .mega-menu .mega-menu__inner,
  .header-account-dropdown:not([hidden]),
  .mobile-accordion.is-open .mobile-accordion__panel:not([hidden]),
  .dd-pricing-select__menu:not([hidden]),
  .dd-course-tabs__panel.is-active,
  .dd-course-tabs__panel:not([hidden]),
  .dd-faq__item.is-open .dd-faq__panel,
  .dd-pricing-accordion.is-open .dd-pricing-accordion__panel,
  .dd-careers-job.is-open .dd-careers-job__panel-inner {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}