/* Public and administration entrances: compositor-only, one pass per view. */

/* The booking header is 94% opaque navy, so blurring what sits behind it is
   invisible - yet a backdrop-filter makes the GPU re-blur that strip on every
   frame while the page animates and scrolls. Same look, without the filter. */
.booking-standalone-page .portal-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes hmPublicEnter {
    from { opacity: .12; transform: translate3d(0, 26px, 0); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hmPublicBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes hmPublicDialog {
    from { opacity: .1; transform: translate3d(0, 28px, 0) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes hmPortalEnter {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: none; }
  }

  /* Booking / account / deposit: one entrance on #portal-root, which is never
     replaced. The page's content is rebuilt 2-3 times while data loads and
     every rebuild used to cancel the animation mid-way (flash -> hide -> pop). */
  #portal-root.hm-portal-enter {
    animation: hmPortalEnter .6s cubic-bezier(.22,.61,.36,1) both;
  }

  /* Older short animations ran again every time booking data was refreshed. */
  .booking-standalone-page :is(
    .booking-surface, .booking-summary, .customer-profile, .account-panel,
    .deposit-payment-page, .salon-band-inner
  ) { animation: none; }

  .hm-motion-pending {
    opacity: 0 !important;
    transform: translate3d(0, 26px, 0) !important;
    animation: none !important;
  }
  .hm-motion-enter {
    animation: hmPublicEnter .72s cubic-bezier(.22,.61,.36,1) var(--hm-motion-delay, 0ms) both !important;
  }

  .shop-standalone-page .portal-dialog-backdrop {
    animation: hmPublicBackdrop .42s ease-out both;
  }
  .shop-standalone-page .portal-dialog {
    animation: hmPublicDialog .64s cubic-bezier(.22,.61,.36,1) both;
  }
  .portfolio-standalone-page .portfolio-lightbox {
    animation: hmPublicBackdrop .48s ease-out both;
  }
  .portfolio-standalone-page .portfolio-lightbox-copy {
    animation: hmPublicDialog .68s cubic-bezier(.22,.61,.36,1) both;
  }

  :is(.booking-standalone-page,.shop-standalone-page,.portfolio-standalone-page)
    :is(.portal-brand,.portal-nav a,.standalone-nav-link,.standalone-cart,.btn,
        .booking-step button,.booking-summary button,.shop-category-scroller button,
        .shop-hero-actions a,.shop-hero-actions button,.public-product-card,
        .gallery-frame,.standalone-frame) {
    transition-duration: .36s;
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
  }
  .auth-form .btn, .auth-top a, .shell .nav a, .shell .panel button {
    transition: transform .32s cubic-bezier(.22,.61,.36,1),
      box-shadow .32s cubic-bezier(.22,.61,.36,1),
      background-color .32s cubic-bezier(.22,.61,.36,1),
      color .32s cubic-bezier(.22,.61,.36,1);
  }
  @media (hover: hover) {
    :is(.booking-standalone-page,.shop-standalone-page,.portfolio-standalone-page)
      :is(.btn,.booking-step button:not(:disabled),.shop-hero-actions a,
          .shop-hero-actions button,.standalone-cart):hover,
    .auth-form .btn:hover, .shell .panel button:hover {
      transform: translate3d(0,-2px,0);
    }
  }
  :is(.booking-standalone-page,.shop-standalone-page,.portfolio-standalone-page)
    :is(.btn,.booking-step button,.shop-hero-actions button,.standalone-cart):active,
  .auth-form .btn:active, .shell .panel button:active {
    transform: scale(.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-motion-pending { opacity: 1 !important; transform: none !important; }
  .hm-motion-enter { animation: none !important; }
}