/* A little movement, with the original print rotations left intact. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.desktop-nav a,
.footer-top nav a {
  position: relative;
}

.desktop-nav a::after,
.footer-top nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--motion-ease);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.footer-top nav a:hover::after,
.footer-top nav a:focus-visible::after {
  transform: scaleX(1);
}

.button,
.app-store-button {
  box-shadow: 0 5px 14px -9px #38271970;
  transition: background 220ms, transform 300ms var(--motion-ease),
    box-shadow 300ms var(--motion-ease);
}

.button:hover,
.app-store-button:hover,
.button:focus-visible,
.app-store-button:focus-visible {
  box-shadow: 0 11px 22px -11px #38271985;
}

.button:active,
.app-store-button:active {
  transform: translateY(0) scale(.98);
}

.text-link svg,
.button svg,
.gallery-note svg {
  transition: translate 300ms var(--motion-ease);
}

.text-link:hover svg,
.text-link:focus-visible svg,
.button:hover svg,
.button:focus-visible svg {
  translate: 2px -2px;
}

.brand-icon {
  transition: rotate 400ms var(--motion-ease), box-shadow 400ms;
}

.brand-lockup:hover .brand-icon,
.brand-lockup:focus-visible .brand-icon {
  rotate: -5deg;
  box-shadow: 0 5px 12px -5px #54372140;
}

.filter-button,
.compare-options button {
  transition: background 240ms, border-color 240ms, color 240ms,
    box-shadow 240ms, translate 300ms var(--motion-ease);
}

.filter-button[aria-pressed='true'] {
  box-shadow: 0 4px 10px -5px #38271955;
}

.compare-options button[aria-pressed='true'] {
  box-shadow: inset 0 0 0 1px #d6a47e55;
}

.look-card {
  box-shadow: 0 8px 18px -15px #38271975;
  transition: box-shadow 450ms var(--motion-ease), translate 450ms var(--motion-ease);
}

.look-card > img {
  transition-timing-function: var(--motion-ease);
}

.look-card-copy,
.look-arrow {
  transition: translate 400ms var(--motion-ease), background 220ms, color 220ms;
}

.look-card:focus-visible > img {
  transform: scale(1.035);
}

.look-card:focus-visible .look-arrow {
  background: #fff8ee;
  color: var(--ink);
}

.comparison {
  box-shadow: 0 21px 42px -33px #543721a0, 0 1px 3px #5437211a;
}

.compare-divider > span {
  transition: background 220ms, box-shadow 220ms, scale 220ms var(--motion-ease);
}

.comparison:hover .compare-divider > span,
.comparison:focus-within .compare-divider > span {
  background: #fffdf7;
  box-shadow: 0 3px 18px #1c141033;
  scale: 1.08;
}

.comparison[data-dragging='true'] .compare-divider > span {
  scale: .98;
  background: #ffe9d8;
}

.photo-strip {
  transition: background 300ms, box-shadow 400ms var(--motion-ease);
}

.feature-grid article {
  transition: border-color 300ms;
}

.feature-icon > svg {
  transition: translate 350ms var(--motion-ease);
}

.faq-list summary {
  transition: color 220ms;
}

.faq-list summary:hover,
.faq-list details[open] summary {
  color: var(--coral);
}

.faq-list summary > span::before,
.faq-list summary > span::after {
  background: currentColor;
}

.download-brand img {
  box-shadow: 0 6px 15px -5px #60432638;
}

@media (hover: hover) and (pointer: fine) {
  .filter-button:hover,
  .compare-options button:hover {
    translate: 0 -2px;
  }

  .look-card:hover,
  .look-card:focus-visible {
    translate: 0 -6px;
    box-shadow: 0 18px 30px -20px #38271995;
  }

  .look-card:hover .look-card-copy,
  .look-card:focus-visible .look-card-copy {
    translate: 0 -3px;
  }

  .look-card:hover .look-arrow svg {
    translate: 1px -1px;
  }

  .feature-grid article:hover {
    border-color: #d75b3980;
  }

  .feature-grid article:hover .feature-icon > svg {
    translate: 0 -3px;
  }

  .photo-strip:hover {
    box-shadow: 10px 24px 34px #0006;
  }
}

/* Decorative loops run only while their section is on screen. */
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .photo-friends,
  .motion-ready .photo-golden {
    animation: print-float 8s ease-in-out 1.4s infinite;
    animation-play-state: paused;
  }

  .motion-ready .photo-golden {
    animation-duration: 9.4s;
    animation-delay: 1.7s;
  }

  .motion-ready .heading-spark,
  .motion-ready .booth-spark,
  .motion-ready .download-spark {
    animation: spark-turn 9s ease-in-out 1.4s infinite;
    animation-play-state: paused;
  }

  .motion-ready .spark-two {
    animation-duration: 11s;
    animation-direction: reverse;
  }

  .motion-ready [data-motion-live='true'] .photo-friends,
  .motion-ready [data-motion-live='true'] .photo-golden,
  .motion-ready [data-motion-live='true'] .heading-spark,
  .motion-ready [data-motion-live='true'] .booth-spark,
  .motion-ready [data-motion-live='true'] .download-spark {
    animation-play-state: running;
  }

  .motion-paused .photo-friends,
  .motion-paused .photo-golden,
  .motion-paused .heading-spark,
  .motion-paused .booth-spark,
  .motion-paused .download-spark {
    animation-play-state: paused !important;
  }
}

@keyframes print-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

@keyframes spark-turn {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 16deg; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready *,
  .motion-ready *::before,
  .motion-ready *::after {
    animation: none !important;
    transition: none !important;
  }
}