/* Shared motion for public-facing actions. Keep layout and hit areas stable. */
:root {
  --action-ease: cubic-bezier(.2, .8, .2, 1);
}

:is(.home-cta, .about-contact-link, .cr-button, .sc-inquiry,
    .btn-line-green, .btn-line-gray, .btn-line-puple,
    .contact-page .button, .naver-booking-action) {
  transition: transform 220ms var(--action-ease),
    background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

:is(.home-cta, .home-hero-contact, .home-link, .about-contact-link,
    .cr-button, .sc-inquiry, .sc-end a, .naver-booking-action) > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 220ms var(--action-ease);
}

/* Keyboard users receive the same directional cue, plus a visible focus ring. */
:is(.home-cta, .home-hero-contact, .home-link, .about-contact-link,
    .cr-button, .sc-inquiry, .sc-end a, .btn-line-green,
    .btn-line-gray, .btn-line-puple, .contact-page .button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

:is(.home-cta, .home-hero-contact, .home-link, .about-contact-link,
    .cr-button, .sc-inquiry, .sc-end a):focus-visible > span[aria-hidden="true"],
.naver-booking-link:focus-visible .naver-booking-action > span[aria-hidden="true"] {
  transform: translate(3px, -3px);
}

/* Hover effects are only enabled for devices with a precise hovering pointer. */
@media (hover: hover) and (pointer: fine) {
  :is(.home-cta, .home-hero-contact, .home-link, .about-contact-link,
      .cr-button, .sc-inquiry, .sc-end a):not(:disabled):not([aria-disabled="true"]):hover > span[aria-hidden="true"],
  .naver-booking-link:hover .naver-booking-action > span[aria-hidden="true"] {
    transform: translate(3px, -3px);
  }
}

/* A quick press and a slightly softer release, including on touch screens. */
:is(.home-cta, .about-contact-link, .cr-button, .sc-inquiry,
    .btn-line-green, .btn-line-gray, .btn-line-puple,
    .contact-page .button):not(:disabled):not([aria-disabled="true"]):active,
.naver-booking-link:active .naver-booking-action {
  transform: scale(.98);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  :is(.home-cta, .about-contact-link, .cr-button, .sc-inquiry,
      .btn-line-green, .btn-line-gray, .btn-line-puple,
      .contact-page .button, .naver-booking-action),
  :is(.home-cta, .home-hero-contact, .home-link, .about-contact-link,
      .cr-button, .sc-inquiry, .sc-end a, .naver-booking-action) > span[aria-hidden="true"] {
    transition: none !important;
    transform: none !important;
  }
}