/* Shared phone-card hover language.
   The /phones browse cards are the source of truth: slight raise, shadow,
   image zoom, and emerald title color. Supports both patterns used in the app:
   the animated surface can be the same element as .group, or a child of it. */
.phone-card-surface-motion {
  --phone-card-rest-shadow: none;
  --phone-card-hover-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  box-shadow: var(--phone-card-rest-shadow);
  transition:
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-card-surface-motion-emerald {
  --phone-card-rest-shadow:
    0 0 0 1.5px rgba(0, 109, 68, 0.25),
    0 12px 32px rgba(0, 109, 68, 0.14);
  --phone-card-hover-shadow: var(--phone-card-rest-shadow);
}

.group.phone-card-surface-motion:hover,
.group.phone-card-surface-motion:focus-visible,
.group:hover .phone-card-surface-motion,
.group:focus-visible .phone-card-surface-motion {
  box-shadow: var(--phone-card-hover-shadow);
  transform: translateY(-0.125rem);
}

.phone-card-image-motion {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .phone-card-image-motion,
.group:focus-visible .phone-card-image-motion {
  transform: scale(1.05);
}

.phone-card-title-motion {
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .phone-card-title-motion,
.group:focus-visible .phone-card-title-motion {
  color: var(--color-secondary);
}

.group:hover .phone-card-title-motion-on-primary,
.group:focus-visible .phone-card-title-motion-on-primary {
  color: var(--color-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .phone-card-surface-motion,
  .phone-card-image-motion,
  .phone-card-title-motion {
    transition: none;
  }

  .group.phone-card-surface-motion:hover,
  .group.phone-card-surface-motion:focus-visible,
  .group:hover .phone-card-surface-motion,
  .group:focus-visible .phone-card-surface-motion,
  .group:hover .phone-card-image-motion,
  .group:focus-visible .phone-card-image-motion {
    transform: none;
  }
}