/* Approved PakDevices design, scoped to replacement chrome and homepage. */
/* Load after the component styles. Motion never owns layout or carousel state. */
:is(#pdvr-home,.pdvr-chrome) {
  --pdv-motion-out: cubic-bezier(.23, 1, .32, 1);
  --pdv-motion-short: 160ms;
  --pdv-motion-standard: 200ms;
}

/* Fail open: a delayed observer cannot leave readable content hidden. */
:is(#pdvr-home,.pdvr-chrome) .reveal.ready,
:is(#pdvr-home,.pdvr-chrome) .reveal.ready.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Replace the existing stacked hover transforms with one response per card. */
:is(#pdvr-home,.pdvr-chrome) #services #feature-services .service-feature,
:is(#pdvr-home,.pdvr-chrome) #services #service-grid .service-card,
:is(#pdvr-home,.pdvr-chrome) .listing-section .listing-card {
  transform: none;
  transition: transform var(--pdv-motion-standard) var(--pdv-motion-out);
}
:is(#pdvr-home,.pdvr-chrome) .listing-section .listing-card .listing-photo img,
:is(#pdvr-home,.pdvr-chrome) .listing-section .listing-card:hover .listing-photo img {
  transform: none;
  transition: none;
}
:is(#pdvr-home,.pdvr-chrome) #services .service-feature .offering-device,
:is(#pdvr-home,.pdvr-chrome) #services .service-feature:hover .offering-device {
  transform: none;
  transition: none;
}
:is(#pdvr-home,.pdvr-chrome) #services .service-feature .service-feature-cta {
  transform: none;
  transition: none;
}

:is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile .category-glyph,
:is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile > svg,
:is(#pdvr-home,.pdvr-chrome) #listings .quick-categories .quick-icon,
:is(#pdvr-home,.pdvr-chrome) .button > svg,
:is(#pdvr-home,.pdvr-chrome) .button > [data-icon="arrow"],
:is(#pdvr-home,.pdvr-chrome) .text-link > svg,
:is(#pdvr-home,.pdvr-chrome) .text-link > [data-icon="arrow"],
:is(#pdvr-home,.pdvr-chrome) .discovery-links a::after,
:is(#pdvr-home,.pdvr-chrome) #services #service-grid .card-arrow {
  transform: none;
  transition: transform var(--pdv-motion-short) var(--pdv-motion-out),
    opacity var(--pdv-motion-short) var(--pdv-motion-out);
}
:is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile .tile-arrow {
  transition: opacity var(--pdv-motion-short) var(--pdv-motion-out);
}

:is(#pdvr-home,.pdvr-chrome) .button,
:is(#pdvr-home,.pdvr-chrome) .icon-button,
:is(#pdvr-home,.pdvr-chrome) .text-link,
:is(#pdvr-home,.pdvr-chrome) .text-button,
:is(#pdvr-home,.pdvr-chrome) .nav-trigger,
:is(#pdvr-home,.pdvr-chrome) .menu-link,
:is(#pdvr-home,.pdvr-chrome) .save-listing,
:is(#pdvr-home,.pdvr-chrome) .segmented button,
:is(#pdvr-home,.pdvr-chrome) .scroll-tabs button {
  transition: transform var(--pdv-motion-short) var(--pdv-motion-out),
    opacity var(--pdv-motion-short) var(--pdv-motion-out);
}
:is(#pdvr-home,.pdvr-chrome) .button:hover,
:is(#pdvr-home,.pdvr-chrome) #services #feature-services .service-feature:hover,
:is(#pdvr-home,.pdvr-chrome) #services #service-grid .service-card:hover,
:is(#pdvr-home,.pdvr-chrome) .listing-section .listing-card:hover {
  transform: none;
}
:is(#pdvr-home,.pdvr-chrome) .nav-trigger svg,
:is(#pdvr-home,.pdvr-chrome) .text-button svg {
  transition: transform var(--pdv-motion-short) var(--pdv-motion-out);
}

/* The panel's own centering transform stays untouched. */
:is(#pdvr-home,.pdvr-chrome) #mega .mega-content {
  animation: none;
  opacity: 1;
  transform: none;
  transform-origin: 50% 0;
  transition: opacity 180ms var(--pdv-motion-out),
    transform 180ms var(--pdv-motion-out);
}
:is(#pdvr-home,.pdvr-chrome) #nav-scrim {
  opacity: 1;
  transition: opacity var(--pdv-motion-short) var(--pdv-motion-out);
}

@media (prefers-reduced-motion: no-preference) {
  /* A once-only arrival; the resting state is always fully visible. */
  html:not([data-pdv-input="keyboard"]) :is(#pdvr-home,.pdvr-chrome) .reveal.ready.visible {
    animation: pdvr-pdv-section-arrive 220ms var(--pdv-motion-out);
  }
  @keyframes pdvr-pdv-section-arrive {
    from { opacity: .85; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }

  /* Unsupported browsers simply show the menu immediately. */
  @starting-style {
    html:not([data-pdv-input="keyboard"]) :is(#pdvr-home,.pdvr-chrome) #mega:not([hidden]) .mega-content {
      opacity: 0;
      transform: translateY(-4px) scale(.995);
    }
    html:not([data-pdv-input="keyboard"]) :is(#pdvr-home,.pdvr-chrome) #nav-scrim:not([hidden]) {
      opacity: 0;
    }
  }

  /* Pointer-only press feedback also works on touch without sticky hover. */
  html:not([data-pdv-input="keyboard"]) :is(#pdvr-home,.pdvr-chrome) :is(a.button, button.button, .icon-button, .save-listing):active {
    transform: scale(.98);
    transition-duration: 100ms;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #services #feature-services .service-feature:hover,
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #services #service-grid .service-card:hover,
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) .listing-section .listing-card:hover {
    transform: translateY(-2px);
  }
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile:hover .category-glyph,
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile:hover > svg,
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #listings .quick-categories a:hover .quick-icon {
    transform: translateY(-2px);
  }
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) :is(a.button, button.button, .text-link):hover > svg, html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) :is(a.button, button.button, .text-link):hover > [data-icon="arrow"], html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #services .service-feature:hover .service-feature-cta > svg, html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) .discovery-links a:hover::after, html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #services #service-grid .service-card:hover .card-arrow {
    transform: translateX(2px);
  }
  html[data-pdv-input="pointer"] :is(#pdvr-home,.pdvr-chrome) #services #service-grid .service-card:hover .card-arrow {
    opacity: 1;
  }
}

/* Keyboard actions update immediately, including the existing chevrons. */
html[data-pdv-input="keyboard"] :is(#pdvr-home,.pdvr-chrome) :is(.button, .icon-button, .text-link, .text-button, .nav-trigger, .menu-link, .save-listing, .segmented button, .scroll-tabs button), html[data-pdv-input="keyboard"] :is(#pdvr-home,.pdvr-chrome) .nav-trigger svg, html[data-pdv-input="keyboard"] :is(#pdvr-home,.pdvr-chrome) .text-button svg, html[data-pdv-input="keyboard"] :is(#pdvr-home,.pdvr-chrome) #mega .mega-content, html[data-pdv-input="keyboard"] :is(#pdvr-home,.pdvr-chrome) #nav-scrim {
  animation: none;
  transition: none;
}
html[data-pdv-input="keyboard"] :is(#pdvr-home,.pdvr-chrome) :is(button, .button):active {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Cancel motion without resetting transforms used for placement or badges. */
  :is(#pdvr-home,.pdvr-chrome) .reveal.ready,
  :is(#pdvr-home,.pdvr-chrome) .reveal.ready.visible,
  :is(#pdvr-home,.pdvr-chrome) #services #feature-services .service-feature:hover,
  :is(#pdvr-home,.pdvr-chrome) #services #service-grid .service-card:hover,
  :is(#pdvr-home,.pdvr-chrome) .listing-section .listing-card:hover,
  :is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile:hover .category-glyph,
  :is(#pdvr-home,.pdvr-chrome) #category-grid .category-tile:hover > svg,
  :is(#pdvr-home,.pdvr-chrome) .button:hover,
  :is(#pdvr-home,.pdvr-chrome) button:active,
  :is(#pdvr-home,.pdvr-chrome) .button:active {
    opacity: 1;
    transform: none;
  }
  :is(#pdvr-home,.pdvr-chrome) #mega .mega-content,
  :is(#pdvr-home,.pdvr-chrome) #nav-scrim,
  :is(#pdvr-home,.pdvr-chrome) .reveal.ready.visible {
    animation: none !important;
    transition: none !important;
  }
}
