html {
  scroll-behavior: smooth;
}

[data-motion-reveal] {
  transition-property: opacity, translate, filter;
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--motion-delay, 0ms);
}

html[data-motion-active="true"] [data-motion-reveal]:not(.is-visible) {
  opacity: 0;
  translate: 0 1.125rem;
  filter: blur(4px);
}

html[data-motion-active="true"] [data-motion-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

html[data-reduced-motion="true"] [data-motion-reveal] {
  opacity: 1 !important;
  translate: none !important;
  filter: none !important;
  transition-duration: 0.01ms !important;
}

.nav_component {
  transition-property: color;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.nav_component.is-over-blue {
  --_theme---text: #fff;
  color: #fff;
}

.nav_component.is-over-blue .nav_links_link,
.nav_component.is-over-blue .nav_links_text,
.nav_component.is-over-blue .nav_logo_wrap,
.nav_component.is-over-blue .nav_btn_wrap,
.nav_component.is-over-blue .nav_btn_line {
  color: #fff !important;
}

.nav_component.is-over-blue .nav_logo_wrap .svg_logo-icon {
  --_theme---text: #fff;
  color: #fff !important;
}

.nav_component.is-over-blue .nav_btn_line {
  background-color: #fff !important;
}

.sticker,
.sticker-mobile {
  transform: none !important;
  rotate: none !important;
}

.sticker-drag-layer,
.sticker-art-layer,
.sticker-reveal-layer {
  display: block;
  width: 100%;
  height: 100%;
}

.sticker-drag-layer {
  transform: translate3d(var(--sticker-drag-x, 0px), var(--sticker-drag-y, 0px), 0);
  transform-origin: center;
  transition: none;
}

.sticker-art-layer {
  transform-origin: center;
}

.sticker-reveal-layer {
  transform-origin: center;
}

.sticker img {
  -webkit-user-drag: none;
  user-select: none;
}

.sticker.is-drag-enabled,
.sticker-mobile.is-drag-enabled {
  touch-action: none;
  cursor: grab;
}

.sticker.is-dragging,
.sticker-mobile.is-dragging {
  cursor: grabbing;
  z-index: 100;
}

.sticker.is-drag-enabled:focus-visible,
.sticker-mobile.is-drag-enabled:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.event_card_description {
  max-height: 0;
  opacity: 0;
  translate: 0 0.5rem;
  overflow: hidden;
  transition-property: max-height, opacity, translate;
  transition-duration: 320ms, 180ms, 320ms;
  transition-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), ease-out, cubic-bezier(0.2, 0.7, 0.2, 1);
}

.event_card_link:is(:hover, :focus-within) .event_card_description {
  max-height: 24rem;
  opacity: 1;
  translate: 0 0;
}

.modal_dialog {
  transition-property: opacity;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.modal_dialog[open] {
  opacity: 1 !important;
}

.modal_dialog[open].is-closing {
  opacity: 0 !important;
}

.modal_dialog .modal_content {
  transition-property: transform;
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.modal_dialog[open] .modal_content {
  transform: translate3d(0, 0, 0) !important;
}

.modal_dialog[open].is-closing .modal_content {
  transform: translate3d(0, 1rem, 0) !important;
}

:focus-visible {
  outline: var(--focus--width, 0.125rem) solid currentColor;
  outline-offset: var(--focus--offset-outer, 0.1875rem);
}

.guide-colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.guide-colors > div {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.guide-colors i {
  display: block;
  width: 3rem;
  height: 3rem;
  border: 1px solid currentColor;
  border-radius: var(--radius--small);
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html[data-reduced-motion="true"] [data-motion-reveal] {
    opacity: 1 !important;
    translate: none !important;
    filter: none !important;
    transition-duration: 0.01ms !important;
  }

  .event_card_description,
  .event_card_link:is(:hover, :focus-within) .event_card_description,
  .sticker-drag-layer,
  .modal_dialog,
  .modal_dialog .modal_content {
    transition-duration: 0.01ms !important;
  }
}
