:root {
  --yx-fast: 160ms;
  --yx-base: 220ms;
  --yx-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: smooth;
}

body.s1-page {
  animation: yx-page-enter var(--yx-base) var(--yx-ease) both;
}

@keyframes yx-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

button,
a,
[role="button"],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

.s1-btn,
.s1-link-button,
.aal-nav a,
.s1-avatar-button,
.s1-carousel__arrow,
.s1-carousel__dot,
.s2-text-button,
.s2-check-control,
.s2-category-option,
.s2-time-option,
button,
a[role="button"] {
  transition:
    transform var(--yx-fast) var(--yx-ease),
    box-shadow var(--yx-fast) ease,
    border-color var(--yx-fast) ease,
    background-color var(--yx-fast) ease,
    color var(--yx-fast) ease,
    opacity var(--yx-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .s1-btn:hover,
  button:not(:disabled):hover,
  a[role="button"]:hover {
    transform: translateY(-1px);
  }

  .s1-promo-card:hover,
  .s2-explore-card:hover,
  .aal-card:hover {
    transform: translateY(-3px);
  }

  .yx-magnetic {
    transform:
      translate3d(
        var(--yx-magnetic-x, 0),
        calc(var(--yx-magnetic-y, 0) - 1px),
        0
      );
    will-change: transform;
  }
}

.s1-btn:active,
button:not(:disabled):active,
a[role="button"]:active,
.yx-is-pressed {
  transform: translateY(0) scale(.985) !important;
}

.yx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 420ms var(--yx-ease),
    transform 420ms var(--yx-ease);
  transition-delay: var(--yx-delay, 0ms);
}

.yx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.yx-modal-opening .s1-auth-modal,
.yx-modal-opening .s2-welcome__dialog,
.yx-modal-opening [role="dialog"] {
  animation: yx-dialog-enter var(--yx-base) var(--yx-ease) both;
}

@keyframes yx-dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.s2-company-step.is-active,
.s1-ad-step.is-active,
[data-auth-panel]:not(.is-hidden) {
  animation: yx-step-enter var(--yx-base) var(--yx-ease) both;
}

@keyframes yx-step-enter {
  from { opacity: .35; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.s2-location-results:not([hidden]),
.s2-category-options:not([hidden]),
.s2-time-options:not([hidden]),
.s1-avatar-menu,
.s1-nav-drawer.is-open {
  transform-origin: top center;
  animation: yx-pop-in var(--yx-fast) var(--yx-ease) both;
}

@keyframes yx-pop-in {
  from { opacity: 0; transform: translateY(-5px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.yx-flash-success {
  animation: yx-success-pulse 520ms var(--yx-ease);
}

.yx-flash-error {
  animation: yx-error-nudge 300ms ease;
}

@keyframes yx-success-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 201, 150, .3); }
  100% { box-shadow: 0 0 0 12px rgba(26, 201, 150, 0); }
}

@keyframes yx-error-nudge {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-4px); }
  70% { transform: translateX(3px); }
}

.yx-loading {
  position: relative;
  cursor: wait !important;
  pointer-events: none;
}

.yx-loading::after {
  width: 15px;
  height: 15px;
  margin-left: 9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  display: inline-block;
  vertical-align: -2px;
  animation: yx-spin 650ms linear infinite;
}

@keyframes yx-spin {
  to { transform: rotate(360deg); }
}

.yx-toast-region {
  position: fixed;
  z-index: 10050;
  inset: 88px 22px auto auto;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}

.yx-toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 12px 14px;
  border: 1px solid #d9e5e1;
  border-radius: 12px;
  color: #373737;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 42px rgba(22, 65, 52, .16);
  pointer-events: auto;
  animation: yx-toast-enter var(--yx-base) var(--yx-ease) both;
}

.yx-toast--success { border-color: rgba(26, 201, 150, .45); }
.yx-toast--error { border-color: rgba(198, 58, 58, .38); }

.yx-toast__icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #0b7c59;
  background: #e1f8f1;
  font-weight: 700;
}

.yx-toast--error .yx-toast__icon {
  color: #a43131;
  background: #fde9e9;
}

.yx-toast__close {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #58585b;
  background: transparent;
  font: 500 20px/1 Poppins, sans-serif;
}

.yx-toast.is-leaving {
  animation: yx-toast-leave var(--yx-fast) ease both;
}

@keyframes yx-toast-enter {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yx-toast-leave {
  to { opacity: 0; transform: translateY(-5px) scale(.98); }
}

.yx-sound-toggle {
  position: fixed;
  z-index: 10020;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(11, 124, 89, .22);
  border-radius: 50%;
  color: #0b7c59;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(21, 74, 57, .13);
  backdrop-filter: blur(10px);
}

.yx-sound-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.yx-sound-toggle[aria-pressed="false"] {
  color: #777;
  background: rgba(255, 255, 255, .88);
}

.yx-sound-toggle::after {
  position: absolute;
  left: calc(100% + 8px);
  width: max-content;
  max-width: 180px;
  padding: 6px 9px;
  border-radius: 7px;
  color: #fff;
  background: #373737;
  content: attr(data-tooltip);
  font: 500 11px/1.25 Poppins, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity var(--yx-fast) ease, transform var(--yx-fast) ease;
}

.yx-sound-toggle:hover::after,
.yx-sound-toggle:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 640px) {
  .yx-toast-region {
    inset: 76px 16px auto 16px;
    width: auto;
  }

  .yx-sound-toggle {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body.s1-page,
  .yx-reveal,
  .yx-modal-opening .s1-auth-modal,
  .yx-modal-opening .s2-welcome__dialog,
  .yx-modal-opening [role="dialog"],
  .s2-company-step.is-active,
  .s1-ad-step.is-active,
  [data-auth-panel]:not(.is-hidden),
  .s2-location-results:not([hidden]),
  .s2-category-options:not([hidden]),
  .s2-time-options:not([hidden]),
  .s1-avatar-menu,
  .s1-nav-drawer.is-open,
  .yx-flash-success,
  .yx-flash-error,
  .yx-toast {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  .yx-reveal {
    opacity: 1;
    transform: none;
  }
}