/*
  PSMP interaction motion r4.
  Benchmarked on Apple's live global navigation (measured 2026-10-08: ~130 ms hover intent,
  ~280 ms panel reveal, 20 ms item stagger, faster un-staggered close) and the Apple HIG Motion
  guidance (purposeful, brief, precise, cancellable, optional). Expressed in PSMP's own language:
  a red precision line that draws in, panels that unfold from the header edge, and a firm press.
  Everything here answers a user action; nothing plays on load or scroll. Reduced motion keeps
  the previous immediate behaviour because every rule lives inside the no-preference query.
*/
@media (prefers-reduced-motion: no-preference) {
  :root {
    --m-settle: cubic-bezier(.2, .8, .2, 1);
    --m-standard: cubic-bezier(.4, 0, .6, 1);
    --m-release: cubic-bezier(.3, 1.45, .5, 1);
    --m-intent: 90ms;
    --m-color: 220ms;
  }

  /* Colour responses */
  html .language-options summary,
  html .language-options > div a,
  html .mobile-nav a,
  html .footer-top a,
  html .footer-bottom a,
  html .text-link,
  html .round-link,
  html .rp-breadcrumb a,
  html .hero-3d-link,
  .home-guide-list a h3,
  .category-grid .category-card h2,
  .series-grid > a h3,
  .home-picker-selection .picker-models h3,
  .home-picker-selection .picker-detail {
    transition: color var(--m-color) var(--m-standard), border-color var(--m-color) var(--m-standard),
      background-color var(--m-color) var(--m-standard);
  }

  /* Desktop navigation: precision line under the hovered or focused section */
  .desktop-nav > .nav-group > a {
    transition: color var(--m-color) var(--m-standard);
  }
  .desktop-nav > .nav-group > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 240ms var(--m-standard);
  }
  .desktop-nav > .nav-group:is(:hover, :focus-within) > a::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 380ms var(--m-settle);
  }
  .desktop-nav > .nav-group > a.active::after {
    transform: scaleX(1);
  }

  /* Desktop dropdown: hover intent, unfold from the header edge, staggered items, quick close */
  .desktop-nav .nav-dropdown {
    display: grid;
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 -48px 100% -48px);
    transition: opacity 180ms var(--m-standard) 60ms,
      clip-path 220ms var(--m-standard) 60ms,
      visibility 0s linear 240ms;
  }
  .desktop-nav .nav-group:is(:hover, :focus-within) .nav-dropdown {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 -48px -56px -48px);
    transition: opacity 200ms var(--m-standard) var(--m-intent),
      clip-path 380ms var(--m-settle) var(--m-intent),
      visibility 0s linear var(--m-intent);
  }
  /* Moving to another section closes the previous panel at once instead of overlapping it */
  .desktop-nav:has(.nav-group:hover) .nav-group:not(:hover, :focus-within) .nav-dropdown {
    transition: opacity 90ms var(--m-standard), clip-path 120ms var(--m-standard), visibility 0s linear 120ms;
  }
  .desktop-nav .nav-dropdown a {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition: opacity 140ms var(--m-standard), transform 200ms var(--m-standard),
      color var(--m-color) var(--m-standard), translate 260ms var(--m-settle);
  }
  .desktop-nav .nav-group:is(:hover, :focus-within) .nav-dropdown a {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity 260ms var(--m-standard) calc(var(--m-intent) + 50ms + var(--i, 0) * 28ms),
      transform 420ms var(--m-settle) calc(var(--m-intent) + 50ms + var(--i, 0) * 28ms),
      color var(--m-color) var(--m-standard), translate 260ms var(--m-settle);
  }
  /* Keyboard focus opens without the pointer hover-intent delay */
  .desktop-nav .nav-group:focus-within .nav-dropdown {
    transition-delay: 0s, 0s, 0s;
  }
  .desktop-nav .nav-group:focus-within .nav-dropdown a {
    transition-delay: calc(var(--i, 0) * 20ms), calc(var(--i, 0) * 20ms), 0s, 0s;
  }
  .desktop-nav .nav-dropdown a:is(:hover, :focus-visible) {
    color: var(--red);
    translate: 4px 0;
  }
  :is(.nav-dropdown, .language-options > div) a:nth-child(2) { --i: 1; }
  :is(.nav-dropdown, .language-options > div) a:nth-child(3) { --i: 2; }
  :is(.nav-dropdown, .language-options > div) a:nth-child(4) { --i: 3; }
  :is(.nav-dropdown, .language-options > div) a:nth-child(5) { --i: 4; }
  :is(.nav-dropdown, .language-options > div) a:nth-child(6) { --i: 5; }
  :is(.nav-dropdown, .language-options > div) a:nth-child(7) { --i: 6; }
  :is(.nav-dropdown, .language-options > div) a:nth-child(n + 8) { --i: 7; }

  /* While a desktop menu is open the page below steps back; it does not flicker between sections */
  @media (hover: hover) and (pointer: fine) {
    .header::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: calc(100vh - 100%);
      background: rgb(8 8 8 / 0.14);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: -1;
      transition: opacity 220ms var(--m-standard) 120ms, visibility 0s linear 340ms;
    }
    .header:has(.desktop-nav .nav-group:hover > .nav-dropdown)::after {
      opacity: 1;
      visibility: visible;
      transition: opacity 320ms var(--m-standard) var(--m-intent), visibility 0s linear var(--m-intent);
    }
  }

  /* Language menu */
  .language-options summary > span:last-child {
    display: inline-block;
    transition: transform 320ms var(--m-settle);
  }
  .language-options[open] summary > span:last-child {
    transform: rotate(180deg);
  }
  .language-options[open] > div {
    animation: psmp-unfold 340ms var(--m-settle) both;
  }
  .language-options[open] > div a {
    animation: psmp-item-in 360ms var(--m-settle) both;
    animation-delay: calc(40ms + var(--i, 0) * 26ms);
  }

  /* Mobile menu: unfolds from the header, sections follow in order, folds away on close */
  .mobile-nav {
    clip-path: inset(0 0 0 0);
    transition: clip-path 220ms var(--m-standard), opacity 200ms var(--m-standard),
      display 220ms allow-discrete;
  }
  .mobile-nav[hidden] {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  .mobile-nav:not([hidden]) {
    transition: clip-path 420ms var(--m-settle), opacity 160ms var(--m-standard), display 0s allow-discrete;
  }
  @starting-style {
    .mobile-nav:not([hidden]) {
      clip-path: inset(0 0 100% 0);
      opacity: 0;
    }
  }
  .mobile-nav:not([hidden]) > * {
    animation: psmp-item-in 380ms var(--m-settle) both;
    animation-delay: calc(60ms + var(--i, 0) * 34ms);
  }
  .mobile-nav > :nth-child(2) { --i: 1; }
  .mobile-nav > :nth-child(3) { --i: 2; }
  .mobile-nav > :nth-child(4) { --i: 3; }
  .mobile-nav > :nth-child(5) { --i: 4; }
  .mobile-nav > :nth-child(n + 6) { --i: 5; }

  @keyframes psmp-unfold {
    from { opacity: 0; clip-path: inset(0 -48px 100% -48px); }
    to { opacity: 1; clip-path: inset(0 -48px -56px -48px); }
  }
  @keyframes psmp-item-in {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes psmp-reveal {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  /* Buttons: colour eases, arrow leads, a firm press with a short spring on release */
  html .button,
  html .menu-button,
  .home-picker-selection .picker-filters button[data-picker-filter] {
    transition: background-color var(--m-color) var(--m-standard),
      border-color var(--m-color) var(--m-standard),
      color var(--m-color) var(--m-standard),
      transform var(--press, 420ms) var(--release, var(--m-release));
  }
  html .button:active,
  html .menu-button:active,
  .home-picker-selection .picker-filters button[data-picker-filter]:active {
    --press: 90ms;
    --release: var(--m-standard);
    transform: scale(.965);
  }
  html .button svg,
  html .text-link svg,
  html .hero-3d-link svg,
  .card-title .round-link svg,
  .home-guide-list a > svg,
  .home-picker-selection .picker-detail svg,
  .dl-item .dl-action svg {
    transition: translate 360ms var(--m-settle);
  }
  html .button:focus-visible svg,
  html .text-link:focus-visible svg,
  .home-guide-list a:focus-visible > svg,
  .home-picker-selection .picker-detail:focus-visible svg,
  .dl-item:focus-visible .dl-action svg {
    translate: 4px 0;
  }

  /* Cards: image settles closer, title takes the brand red, a precision line draws along the base */
  .category-grid .category-card .category-image img,
  .rp-series .rp-series-image img {
    transition: transform 700ms var(--m-settle);
  }
  .series-grid > a,
  .category-grid .category-card:not([style*='border-bottom']) {
    background: linear-gradient(var(--red), var(--red)) no-repeat 0 100% / 0 2px;
    transition: background-size 260ms var(--m-standard);
  }
  .home-guide-list a {
    background: linear-gradient(var(--red), var(--red)) no-repeat 0 0 / 0 2px;
    transition: background-size 260ms var(--m-standard);
  }
  .series-grid > a > span {
    display: inline-block;
    transition: translate 360ms var(--m-settle), color var(--m-color) var(--m-standard);
  }
  .series-grid > a:focus-visible,
  .category-grid .category-card:not([style*='border-bottom']):focus-visible,
  .home-guide-list a:focus-visible {
    background-size: 100% 2px;
    transition: background-size 520ms var(--m-settle);
  }

  /* Downloads and quiet list rows */
  .dl-item,
  .dl-jump a,
  .download-list > a {
    transition: background-color var(--m-color) var(--m-standard), border-color var(--m-color) var(--m-standard),
      color var(--m-color) var(--m-standard);
  }

  /* Filters and form controls */
  .network-filters :is(select, input),
  .dl-search-box {
    transition: border-color var(--m-color) var(--m-standard), outline-color var(--m-color) var(--m-standard),
      box-shadow var(--m-color) var(--m-standard);
  }
  /* Results that a filter or search brings back arrive in order instead of popping in */
  .home-picker-selection:is(:hover, :focus-within) .picker-models > article,
  .dl-library:focus-within .dl-item {
    transition: opacity 300ms var(--m-standard) calc(var(--i, 0) * 40ms),
      transform 520ms var(--m-settle) calc(var(--i, 0) * 40ms);
  }
  @starting-style {
    .home-picker-selection:is(:hover, :focus-within) .picker-models > article,
    .dl-library:focus-within .dl-item {
      opacity: 0;
      transform: translate3d(0, 14px, 0);
    }
  }
  .picker-models > article:nth-child(2 of :not([hidden])) { --i: 1; }
  .picker-models > article:nth-child(3 of :not([hidden])) { --i: 2; }
  .picker-models > article:nth-child(4 of :not([hidden])) { --i: 3; }
  .picker-models > article:nth-child(5 of :not([hidden])) { --i: 4; }
  .picker-models > article:nth-child(6 of :not([hidden])) { --i: 5; }
  .picker-models > article:nth-child(n + 7 of :not([hidden])) { --i: 6; }

  /* Accordions: the marker turns and the answer settles in */
  .accordions summary svg {
    transition: transform 360ms var(--m-settle);
  }
  .accordions details[open] > :not(summary) {
    animation: psmp-reveal 380ms var(--m-settle) both;
  }

  /* Pointer hover only; touch gets press feedback without sticky hover states */
  @media (hover: hover) and (pointer: fine) {
    html .button:hover svg,
    html .text-link:hover svg,
    html .hero-3d-link:hover svg,
    .product-card:hover .round-link svg,
    .home-guide-list a:hover > svg,
    .home-picker-selection .picker-detail:hover svg,
    .dl-item:hover .dl-action svg {
      translate: 4px 0;
    }
    .category-grid .category-card:hover .category-image img,
    .rp-series li:hover .rp-series-image img {
      transform: scale(1.045);
    }
    .category-grid .category-card:hover h2,
    .series-grid > a:hover h3,
    .series-grid > a:hover > span,
    .home-picker-selection .picker-models a:hover h3 {
      color: var(--red);
    }
    .series-grid > a:hover > span {
      translate: 4px 0;
    }
    .series-grid > a:hover,
    .category-grid .category-card:not([style*='border-bottom']):hover,
    .home-guide-list a:hover {
      background-size: 100% 2px;
      transition: background-size 520ms var(--m-settle);
    }
    .home-picker-selection .picker-filters button[data-picker-filter][aria-pressed='false']:hover,
    .network-filters :is(select, input):hover {
      border-color: #202321;
    }
  }
  .category-grid .category-card:focus-visible .category-image img {
    transform: scale(1.045);
  }
  .category-grid .category-card:focus-visible h2,
  .series-grid > a:focus-visible h3 {
    color: var(--red);
  }
}