/* Motion shared with the SEIRIN renewal HP. Content is visible without JavaScript. */
.ktr-site .ktr-button,
.ktr-site .ktr-home-card__link,
.ktr-site .ktr-site-banner,
.ktr-site .ktr-carousel__arrows button {
  transition: opacity 180ms ease;
}

/* The extracted SVG retains the exact glyph; its CSS arrow box stays still. */
.ktr-button::after {
  background-image: url('../figma/button-arrow-glyph.svg');
  background-color: rgba(32, 43, 59, .16);
  border-radius: 2px;
}

.ktr-button--outline::after {
  background-color: #00b1ea;
}

@keyframes ktr-arrow {
  0%, 100% { background-position: 50% center; }
  50% { background-position: calc(50% + 123px) center; }
  51% { background-position: calc(50% - 123px) center; }
}

.ktr-site .ktr-button:is(:hover, :focus-visible)::after {
  animation: none;
}

.ktr-site .ktr-button:focus-visible::after {
  animation: ktr-arrow 650ms ease both;
}

.ktr-site .ktr-button:focus-visible,
.ktr-site .ktr-home-card__link:focus-visible,
.ktr-site .ktr-site-banner:focus-visible {
  opacity: .7;
}

.ktr-site .ktr-button--outline:focus-visible {
  opacity: .76;
}

.ktr-home-card__media img {
  transform: scale(1);
  transition: transform 400ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ktr-site .ktr-button:not(:disabled):hover::after {
    animation: ktr-arrow 650ms ease both;
  }

  .ktr-site .ktr-home-card__link:hover,
  .ktr-site .ktr-site-banner:hover {
    opacity: .7;
  }

  .ktr-home-card__link:hover .ktr-home-card__media img {
    transform: scale(1.055);
  }
}

/* Added only to selected headings and cards after the observer is available. */
.ktr-site .ktr-reveal {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 600ms ease var(--ktr-reveal-delay, 0ms),
    transform 600ms ease var(--ktr-reveal-delay, 0ms);
}

.ktr-site .ktr-reveal.ktr-reveal--pending {
  opacity: 0;
  transform: translateY(16px);
}

/* Reveal carousel cards without adding vertical overflow to the horizontal track. */
.ktr-site .ktr-carousel__viewport > .ktr-reveal.ktr-reveal--pending {
  transform: none;
}

/* A keyboard destination must be visible as soon as it receives focus. */
.ktr-site .ktr-reveal:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ktr-site .ktr-button::after,
  .ktr-site .ktr-button:is(:hover, :focus-visible)::after {
    animation: none !important;
  }

  .ktr-home-card__media img,
  .ktr-reveal,
  .ktr-reveal.ktr-reveal--pending {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media print {
  .ktr-reveal,
  .ktr-reveal.ktr-reveal--pending {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}