/* Small, finite interactions. Page, card and dialog entrances live in motion.js. */
:root {
  --motion-quick: 160ms;
  --motion-gentle: 280ms;
  --motion-image: 440ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Keep keyboard focus immediate and legible while a surface is moving. */
:is(.intro-action, .personalize-item, .occasion-entry, .like-button,
  .card-actions button, .category-tabs button, .nav button,
  .taste-votes button, .compare-chip):focus-visible {
  outline: 3px solid var(--logo-accent);
  outline-offset: 3px;
}
.product-card:focus-within { box-shadow: var(--shadow-hover); }

/* The original image hover rule also matches touch; opt into zoom below. */
.product-picture:hover .garment-sprite { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  :is(.product-card, .personalize-item, .occasion-entry, .intro-action) {
    transition: box-shadow var(--motion-gentle) var(--motion-ease),
      background-color var(--motion-quick) ease;
  }

  :is(.primary, .secondary, .intro-action, .like-button, .icon-button,
    .profile-bubble, .card-actions button, .category-tabs button, .nav button,
    .quick-prompts button, .filter-button, .searchbox button, .compare-chip,
    .active-filters button, .room-tabs button, .size-selector button,
    .detail-tabs button, .taste-votes button, .taste-footer button,
    .occasion-apply, .occasion-weather-retry, .external-shopping-links a) {
    transition: transform var(--motion-quick) var(--motion-ease),
      background-color var(--motion-quick) ease,
      color var(--motion-quick) ease,
      box-shadow var(--motion-gentle) var(--motion-ease);
  }

  :is(.personalize-item, .occasion-entry, .intro-action, .taste-entry,
    .fit-peek button, .card-actions button, .searchbox button,
    .external-shopping-links a) > .icon,
  .personalize-icon,
  .personalize-icon > .icon {
    transition: transform var(--motion-gentle) var(--motion-ease),
      color var(--motion-quick) ease,
      background-color var(--motion-quick) ease;
  }

  .garment-sprite {
    transition: transform var(--motion-image) var(--motion-ease);
    transform-origin: 50% 55%;
  }
  .like-button .icon {
    transition: fill var(--motion-quick) ease, color var(--motion-quick) ease;
  }
  .occasion-sale-choice {
    transition: background-color var(--motion-quick) ease,
      border-color var(--motion-quick) ease;
  }

  /* A brief press works equally well with a pointer or a fingertip. */
  :is(.primary, .secondary, .intro-action, .icon-button, .profile-bubble,
    .card-actions button, .category-tabs button, .nav button,
    .quick-prompts button, .filter-button, .searchbox button,
    .compare-chip, .active-filters button, .room-tabs button,
    .size-selector button, .detail-tabs button, .taste-votes button,
    .taste-footer button, .occasion-apply, .occasion-weather-retry):not(:disabled):active {
    transform: scale(.97);
    transition-duration: 80ms;
  }
  .like-button:not(:disabled):active {
    transform: scale(.91);
    transition-duration: 80ms;
  }

  @media (hover: hover) and (pointer: fine) {
    .product-picture:hover .garment-sprite { transform: scale(1.045); }
    .like-button:not(:disabled):hover:not(:active) {
      transform: scale(1.075);
      box-shadow: 0 3px 12px rgb(24 30 41 / 10%);
      color: var(--logo-accent);
    }
    .intro-action:hover {
      box-shadow: var(--shadow-hover);
      background: var(--color-blue-50);
    }
    .intro-action:hover > .icon:first-child { transform: rotate(-6deg); }
    :is(.intro-action, .occasion-entry, .personalize-item, .taste-entry,
      .fit-peek button, .external-shopping-links a):hover > .icon:last-child,
    .card-actions button[data-action="detail"]:hover > .icon,
    .searchbox button:hover > .icon { transform: translateX(3px); }
    .personalize-item:hover .personalize-icon {
      background: #e2ebff;
      color: var(--logo-accent);
    }
    .personalize-item:hover .personalize-icon > .icon { transform: rotate(-5deg); }
    .card-actions button[data-action="compare-add"]:hover:not([aria-pressed="true"]),
    .taste-votes button:hover:not(.selected),
    .compare-chip:hover { background: var(--color-gray-200); }
    .card-actions button[data-action="detail"]:hover {
      color: var(--logo-accent);
      background: var(--color-blue-50);
    }
    .brand:hover .brand-mark img {
      animation: catcher-hello 620ms var(--motion-ease) 1;
      transform-origin: 50% 75%;
    }
  }
}

@keyframes catcher-hello {
  0%, 100% { transform: rotate(0); }
  32% { transform: rotate(-9deg); }
  64% { transform: rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Do not reset dialog/tray transforms: they also define their placement. */
  .product-picture:hover .garment-sprite,
  .brand-mark img,
  :is(.intro-action, .personalize-item, .occasion-entry, .taste-entry,
    .fit-peek button, .card-actions button, .searchbox button,
    .external-shopping-links a) > .icon,
  .personalize-icon > .icon,
  :is(.primary, .secondary, .intro-action, .like-button, .icon-button,
    .profile-bubble, .card-actions button, .category-tabs button, .nav button,
    .quick-prompts button, .filter-button, .searchbox button, .compare-chip,
    .active-filters button, .room-tabs button, .size-selector button,
    .detail-tabs button, .taste-votes button, .taste-footer button,
    .occasion-apply, .occasion-weather-retry) {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Keep fixed dialog feedback anchored to the same surface during transitions. */
dialog { transform: translate(0, 0); }