/* Quiet motion: interactions retain their existing layout, focus and lifecycle. */
:root {
  --apple-motion-ease: cubic-bezier(.22, .68, .22, 1);
  --apple-motion-fast: 160ms;
  --apple-motion-dialog: 240ms;
}

/* Local form updates should not replay an entrance or move the viewport. */
#main .page-enter,
#main .creative-page,
#main .insight-page,
#overlay-root .creator-card,
#overlay-root .creator-section-title {
  animation: none;
}

#main > .page-enter.apple-route-enter {
  animation: apple-route-in 200ms var(--apple-motion-ease) both;
}

:is(#main, #overlay-root, #sidebar, #topbar) button,
:is(#main, #overlay-root, #sidebar, #topbar) .btn,
:is(#main, #overlay-root, #sidebar, #topbar) a {
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--apple-motion-fast) ease,
    border-color var(--apple-motion-fast) ease,
    color var(--apple-motion-fast) ease,
    box-shadow 200ms ease,
    opacity var(--apple-motion-fast) ease,
    transform 140ms var(--apple-motion-ease);
}

:is(#main, #overlay-root, #sidebar, #topbar) .btn:hover:not(:disabled),
:is(#main, #overlay-root, #sidebar, #topbar) button:hover:not(:disabled) {
  transform: none;
}

:is(#main, #overlay-root, #sidebar, #topbar) button:active:not(:disabled),
:is(#main, #overlay-root, #sidebar, #topbar) .btn:active:not(:disabled) {
  transform: scale(.985);
}

:is(#main, #overlay-root, #sidebar, #topbar) .icon-btn:active:not(:disabled) {
  transform: scale(.94);
}

body :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--apple-focus, #0071e3);
  outline-offset: 3px;
}

body :is(input, select, textarea):focus-visible {
  outline-width: 2px;
  outline-offset: 1px;
}

#main :is(.creative-card, .insight-card) {
  transition: border-color 200ms ease, box-shadow 240ms var(--apple-motion-ease);
}

/* The card stays still; its border and a shallow shadow indicate hover. */
#main :is(.creative-card, .insight-card):hover {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  #main :is(.creative-card, .insight-card):hover {
    box-shadow: 0 5px 18px #1d1d1f0a;
  }
}

@media (hover: none), (pointer: coarse) {
  #main :is(.creative-card, .insight-card):hover {
    box-shadow: none;
  }
  #main .creative-card .creative-check {
    opacity: 1;
  }
  #main .creative-card .creative-format-pill {
    opacity: 0;
  }
}

#overlay-root .overlay-backdrop {
  animation: apple-backdrop-in 180ms ease both;
}

#overlay-root .modal {
  animation: apple-dialog-in var(--apple-motion-dialog) var(--apple-motion-ease) both;
}

#overlay-root .drawer {
  animation: apple-drawer-in var(--apple-motion-dialog) var(--apple-motion-ease) both;
}

/* Existing closeOverlay() removes the DOM at 230ms; visuals finish at 200ms. */
#overlay-root.closing .overlay-backdrop {
  animation: apple-backdrop-out 200ms ease both;
}

#overlay-root.closing .modal {
  animation: apple-dialog-out 200ms var(--apple-motion-ease) both;
}

#overlay-root.closing .drawer {
  animation: apple-drawer-out 200ms var(--apple-motion-ease) both;
}

@keyframes apple-route-in {
  from { opacity: .4; }
  to { opacity: 1; }
}

@keyframes apple-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes apple-backdrop-out {
  to { opacity: 0; }
}

@keyframes apple-dialog-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)) scale(.988); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes apple-dialog-out {
  to { opacity: 0; transform: translate(-50%, calc(-50% + 4px)) scale(.992); }
}

@keyframes apple-drawer-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes apple-drawer-out {
  to { opacity: 0; transform: translateX(10px); }
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(#main, #overlay-root, #sidebar, #topbar) button:active:not(:disabled),
  :is(#main, #overlay-root, #sidebar, #topbar) .btn:active:not(:disabled) {
    transform: none;
  }
}