/* Loaded after the page styles. Entrance motion must not hold the transform
   used by hover or tap after the entrance has finished. */
html.js .reveal,
html.js .reveal.is-in {
  transform: none;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    background 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s var(--ease);
  transition-delay: 0ms;
}

html.js .reveal { opacity: 0; }

html.js .reveal.is-in {
  opacity: 1;
  animation: drReveal 0.72s var(--ease) var(--d, 0ms) backwards;
}

html.js .reveal--hero.is-in {
  animation-name: drHeroReveal;
  animation-duration: 0.8s;
}

@keyframes drReveal {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes drHeroReveal {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* Match the existing card interactions with enough specificity to beat
   .js .form-card.reveal.is-in and the equivalent legacy selectors. */
@media (hover: hover) {
  html.js[data-motion="on"] .reveal.is-in:is(.form-card, .manga-card, .social-card, .creative, .hit-card, .case-tile):hover {
    transform: translate3d(0, -4px, 0);
  }

  html.js[data-motion="on"] .reveal.is-in:is(.case-mini, .kol__card):hover {
    transform: translateY(-2px);
  }

  html.js[data-motion="on"] .reveal.is-in:is(.quad__card, .live-pillar, .ai-card, .partner, .instant__card, .biz, .home-service, .home-feature):hover {
    transform: translateY(-3px);
  }
}

html.js[data-motion="on"] .biz.reveal.is-in:focus-visible { transform: translateY(-3px); }

@media (hover: none) {
  html.js[data-motion="on"] .reveal.is-in:is(.form-card, .manga-card, .social-card, .creative, .hit-card, .case-tile):active {
    transform: scale(0.992);
  }

  html.js[data-motion="on"] .reveal.is-in:is(.case-mini, .kol__card, .partner):active {
    transform: scale(0.995);
  }
}

html.js[data-motion="off"] .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* A failed preference bootstrap must still respect the system setting. */
@media (prefers-reduced-motion: reduce) {
  html.js:not([data-motion]) .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}