/* Phase 21: slow, editorial motion for Dolfin Rider Guide articles. */
.dolfin-article-motion {
  --dolfin-article-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dolfin-article-blue: #1486f2;
  overflow: clip;
}

.dolfin-article-motion .poster-article-header {
  position: relative;
}

.dolfin-article-motion .poster-article-header::before {
  display: block;
  width: 3.4rem;
  height: 0.18rem;
  margin-bottom: 1.35rem;
  border-radius: 999px;
  background: var(--dolfin-article-blue);
  content: "";
  transform-origin: left center;
}

.dolfin-article-motion .poster-hero-media,
.dolfin-article-motion .poster-card-media {
  position: relative;
  overflow: hidden;
}

.dolfin-article-motion .poster-hero-media::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #e8f2fc;
  content: "";
  pointer-events: none;
  transform-origin: right center;
}

.dolfin-article-motion .poster-hero-img,
.dolfin-article-motion .poster-hero-media .media-placeholder {
  transition: transform 1.8s var(--dolfin-article-ease);
}

.dolfin-article-motion .poster-sidebar-item {
  transition:
    border-color 450ms ease,
    transform 650ms var(--dolfin-article-ease),
    opacity 650ms ease;
}

.dolfin-article-motion .poster-sidebar-item:hover {
  border-color: rgba(20, 134, 242, 0.55);
  transform: translateX(0.3rem);
}

.dolfin-article-motion .poster-related-card {
  transition:
    opacity 950ms ease var(--dolfin-article-delay, 0ms),
    transform 1050ms var(--dolfin-article-ease) var(--dolfin-article-delay, 0ms);
}

.dolfin-article-motion .poster-related-card img {
  transition: transform 1.25s var(--dolfin-article-ease);
}

.dolfin-article-motion .poster-related-card:hover img {
  transform: scale(1.035);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal] {
  opacity: 0;
  transform: translateY(2rem);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="meta"] {
  transform: translateY(0.8rem);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="title"] {
  transform: translateY(2.4rem);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"] {
  opacity: 1;
  transform: none;
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="sidebar"] .poster-sidebar-item {
  opacity: 0;
  transform: translateX(1.25rem);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="body"] {
  transition-delay: var(--dolfin-article-delay, 0ms);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal],
.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="sidebar"] .poster-sidebar-item {
  transition-duration: 950ms;
  transition-property: opacity, transform;
  transition-timing-function: ease, var(--dolfin-article-ease);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal].dolfin-article-is-visible {
  opacity: 1;
  transform: none;
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="sidebar"].dolfin-article-is-visible .poster-sidebar-item {
  opacity: 1;
  transform: none;
  transition-delay: var(--dolfin-article-item-delay, 0ms);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="title"]::before {
  transform: scaleX(0);
  transition: transform 1.1s var(--dolfin-article-ease) 180ms;
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="title"].dolfin-article-is-visible::before {
  transform: scaleX(1);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"]::after {
  transform: scaleX(1);
  transition: transform 1.25s var(--dolfin-article-ease) 120ms;
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"].dolfin-article-is-visible::after {
  transform: scaleX(0);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"] .poster-hero-img,
.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"] .media-placeholder {
  transform: scale(1.045);
}

.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"].dolfin-article-is-visible .poster-hero-img,
.dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"].dolfin-article-is-visible .media-placeholder {
  transform: scale(1);
}

@media (max-width: 1023px) {
  .dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="sidebar"] .poster-sidebar-item {
    transform: translateY(1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dolfin-article-motion *,
  .dolfin-article-motion *::before,
  .dolfin-article-motion *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal],
  .dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="sidebar"] .poster-sidebar-item {
    opacity: 1;
    transform: none;
  }

  .dolfin-article-motion.dolfin-article-motion-ready [data-dolfin-article-reveal="media"]::after {
    display: none;
  }
}