/* Content stays visible until the controller explicitly enables motion.
   Scroll movement uses translate; pointer movement uses transform so that
   entering a section and hovering a card never interrupt each other. */
.customer-mode .discover-page .discover-review-card {
  animation: none;
  will-change: auto;
}

.customer-mode .discover-page :is([data-discover-reveal], [data-discover-hover]) {
  transition:
    opacity 650ms cubic-bezier(.22, 1, .36, 1) var(--discover-reveal-delay, 0ms),
    translate 650ms cubic-bezier(.22, 1, .36, 1) var(--discover-reveal-delay, 0ms),
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 320ms ease,
    border-color 240ms ease,
    background-color 240ms ease;
}

.discover-page[data-discover-motion="active"] [data-discover-reveal] {
  opacity: 0;
  translate: 0 24px;
}

.discover-page[data-discover-motion="active"] [data-discover-reveal][data-discover-exit="up"] {
  translate: 0 -18px;
  transition-delay: 0ms;
}

.discover-page[data-discover-motion="active"] [data-discover-reveal][data-discover-visible] {
  opacity: 1;
  translate: 0 0;
}

/* Keyboard navigation must never wait for a scroll animation. */
.discover-page[data-discover-motion="active"] [data-discover-reveal]:focus-within {
  opacity: 1;
  translate: 0 0;
  transition-duration: 0s;
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Compensating margins preserve rail geometry while giving lifted cards
     enough room for their top edge, shadow and keyboard outline. */
  .customer-mode .discover-page .discover-salon-track {
    margin: -11px -9px -15px;
    padding: 16px 10px 24px;
    scroll-padding-inline: 10px;
  }
  .customer-mode .discover-page .discover-review-track {
    margin: -13px -9px -12px;
    padding: 16px 10px 24px;
    scroll-padding-inline: 10px;
  }
  .customer-mode .discover-page .discover-search-shortcuts {
    margin-block: -6px -5px;
    padding-block: 8px 10px;
  }

  .customer-mode .discover-page :is(
    [data-discover-hover="search"],
    [data-discover-hover="promo"],
    [data-discover-hover="review"],
    [data-discover-hover="salon"]
  ) {
    position: relative;
  }

  .customer-mode .discover-page [data-discover-hover] {
    transform-origin: center;
    transform: perspective(1000px) translate3d(0, 0, 0);
  }

  .customer-mode .discover-page :is(
    [data-discover-hover="promo"],
    [data-discover-hover="review"],
    [data-discover-hover="salon"],
    [data-discover-hover="summary"]
  )[data-discover-hovering] {
    transform:
      perspective(1000px)
      translate3d(var(--discover-hover-x, 0px), calc(var(--discover-hover-y, 0px) - 6px), 0)
      rotateX(var(--discover-tilt-x, 0deg))
      rotateY(var(--discover-tilt-y, 0deg));
    border-color: #c9b8e3;
    box-shadow: 0 12px 22px -12px #5e3d8538, 0 3px 9px #3e285e12;
  }

  .customer-mode .discover-page [data-discover-hover="promo"][data-discover-hovering] {
    box-shadow: 0 19px 34px -20px #61448370, inset 0 0 0 1px #a98dcc47;
  }

  .customer-mode .discover-page [data-discover-hover="search"][data-discover-hovering]:not(:focus-within) {
    transform: translate3d(var(--discover-hover-x, 0px), -3px, 0);
    border-color: #b9a0e4;
    box-shadow: 0 10px 26px #6f499526, 0 0 0 3px #b7a0eb14;
  }
  .customer-mode .discover-page [data-discover-hover="search"]:focus-within {
    transform: none;
    border-color: #9d7cce;
    box-shadow: 0 0 0 3px #9d7cce30, 0 7px 20px #5e3d8514;
  }

  .customer-mode .discover-page [data-discover-hover="pill"][data-discover-hovering] {
    transform: translate3d(0, -5px, 0) rotate(-1.5deg) scale(1.035);
    border-color: #c6afe7;
    background-color: #f0e7fb;
    box-shadow: 0 7px 12px -5px #72518d4d;
  }
  .customer-mode .discover-page [data-discover-hover="pill"]:active {
    transform: translate3d(0, -1px, 0) scale(.96);
    transition-duration: 100ms;
  }

  /* A pointer-following glow is contained by the existing rounded surface.
     It does not intercept taps, obscure controls or add decorative motion. */
  .customer-mode .discover-page :is(
    [data-discover-hover="search"],
    [data-discover-hover="promo"],
    [data-discover-hover="review"]
  )::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      230px circle at var(--discover-glow-x, 50%) var(--discover-glow-y, 50%),
      #ffffff45,
      #d1b9f014 48%,
      transparent 76%
    );
    opacity: 0;
    pointer-events: none;
    content: "";
    transition: opacity 280ms ease;
  }
  .customer-mode .discover-page [data-discover-hover][data-discover-hovering]::after {
    opacity: 1;
  }

  .customer-mode .discover-page :is(
    [data-discover-hover="search"],
    [data-discover-hover="review"]
  ) > :not(.sr-only) {
    position: relative;
    z-index: 1;
  }

  .customer-mode .discover-page :is(.discover-promo > img, .discover-salon-image img) {
    transform: scale(1);
    transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  }
  .customer-mode .discover-page [data-discover-hover="promo"][data-discover-hovering] > img {
    transform: scale(1.055);
  }
  .customer-mode .discover-page [data-discover-hover="salon"][data-discover-hovering] .discover-salon-image img {
    transform: scale(1.045);
  }

  .customer-mode .discover-page :is(
    .discover-promo .outline-button > .icon,
    .floating-summary > .icon,
    .discover-style-icon > .icon,
    .discover-search-location > .icon,
    .discover-review-stars
  ) {
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), color 260ms ease;
  }
  .customer-mode .discover-page [data-discover-hover="promo"][data-discover-hovering] .outline-button > .icon,
  .customer-mode .discover-page [data-discover-hover="summary"][data-discover-hovering] > .icon {
    transform: translateX(3px);
  }
  .customer-mode .discover-page [data-discover-hover="summary"][data-discover-hovering] .discover-style-icon > .icon {
    transform: rotate(-9deg) scale(1.08);
  }
  .customer-mode .discover-page [data-discover-hover="search"][data-discover-hovering]:not(:focus-within) .discover-search-location > .icon {
    transform: translateY(-2px) rotate(-8deg);
  }
  .customer-mode .discover-page [data-discover-hover="review"][data-discover-hovering] .discover-review-stars {
    transform: translateX(2px) scale(1.025);
    transform-origin: left center;
  }
}

/* Touch scrolling never leaves a card stuck in its legacy hover position. */
@media (hover: none), (pointer: coarse) {
  .customer-mode .discover-page :is(
    [data-discover-hover], .discover-search-submit, .discover-promo .outline-button,
    .carousel-nav-button, .discover-promo > img, .discover-salon-image img,
    .floating-summary > .icon, .discover-style-icon > .icon,
    .discover-search-location > .icon, .discover-review-stars
  ) { transform: none; }
  .customer-mode .discover-page :is(
    .discover-search-submit, .discover-search-shortcuts > button, .discover-promo .outline-button
  ):active { transform: scale(.97); transition: transform 100ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-mode .discover-page [data-discover-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
  .customer-mode .discover-page .carousel-nav-button,
  .customer-mode .discover-page [data-discover-hover],
  .customer-mode .discover-page [data-discover-hover] *,
  .customer-mode .discover-page [data-discover-hover]::after {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .customer-mode .discover-page [data-discover-hover]::after {
    opacity: 0 !important;
  }
}

@media (forced-colors: active) {
  .customer-mode .discover-page [data-discover-hover]::after {
    display: none;
  }
}

/* Horizontal swiping must never trigger vertical entry/exit movement on cards. */
@media (max-width: 768px), (pointer: coarse) {
  .customer-mode .discover-page :is(.discover-salon-track, .discover-review-track) { overflow-y: hidden; }
  .customer-mode .discover-page :is(.discover-salon-card, .discover-review-card)[data-discover-reveal] {
    opacity: 1;
    translate: none;
    transform: none;
    transition: border-color 160ms ease, background-color 160ms ease;
  }
}