/*
 * Shared editorial motion layer.
 * Every rule is opt-in through data attributes so existing page animations,
 * layout classes and transforms remain untouched until a page adopts it.
 */

[data-feature-motion-root] {
  --feature-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --feature-motion-delay: 0ms;
  --feature-motion-parallax-y: 0px;
  --feature-motion-ticker-duration: 28s;
}

/* Staged hero entrance ----------------------------------------------------- */

[data-feature-motion-root][data-feature-motion-enhanced="true"]:not([data-feature-motion-ready="true"])
  [data-motion-hero] {
  opacity: 0;
  translate: 0 26px;
}

[data-feature-motion-root][data-feature-motion-enhanced="true"]:not([data-feature-motion-ready="true"])
  [data-motion-hero="media"] {
  translate: 0 0;
  scale: 1.045;
}

[data-feature-motion-root][data-feature-motion-ready="true"] [data-motion-hero] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity .9s var(--feature-motion-ease) var(--feature-motion-delay),
    translate 1s var(--feature-motion-ease) var(--feature-motion-delay),
    scale 1.4s var(--feature-motion-ease) var(--feature-motion-delay);
}

[data-feature-motion-root] [data-motion-hero="media"] { --feature-motion-delay: 0ms; }
[data-feature-motion-root] [data-motion-hero="eyebrow"] { --feature-motion-delay: 120ms; }
[data-feature-motion-root] [data-motion-hero="title"] { --feature-motion-delay: 210ms; }
[data-feature-motion-root] [data-motion-hero="copy"] { --feature-motion-delay: 330ms; }
[data-feature-motion-root] [data-motion-hero="actions"] { --feature-motion-delay: 450ms; }

/* Scroll reveal ----------------------------------------------------------- */

[data-feature-motion-root][data-feature-motion-enhanced="true"] [data-motion-reveal] {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity .78s var(--feature-motion-ease) var(--feature-motion-delay),
    translate .92s var(--feature-motion-ease) var(--feature-motion-delay),
    scale .92s var(--feature-motion-ease) var(--feature-motion-delay),
    clip-path 1.05s var(--feature-motion-ease) var(--feature-motion-delay);
}

[data-feature-motion-root][data-feature-motion-enhanced="true"] [data-motion-reveal="fade"] {
  translate: 0 0;
}

[data-feature-motion-root][data-feature-motion-enhanced="true"] [data-motion-reveal="left"] {
  translate: -42px 0;
}

[data-feature-motion-root][data-feature-motion-enhanced="true"] [data-motion-reveal="right"] {
  translate: 42px 0;
}

[data-feature-motion-root][data-feature-motion-enhanced="true"] [data-motion-reveal="scale"] {
  translate: 0 18px;
  scale: .975;
}

[data-feature-motion-root][data-feature-motion-enhanced="true"] [data-motion-reveal="clip"] {
  translate: 0 22px;
  clip-path: inset(7% 0 7% 0);
}

[data-feature-motion-root][data-feature-motion-enhanced="true"]
  [data-motion-reveal][data-motion-visible="true"] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(0 0 0 0);
}

/* Page progress ----------------------------------------------------------- */

.feature-motion-progress {
  --feature-motion-progress: 0;
  position: fixed;
  z-index: 320;
  inset: 0 0 auto;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
  background: rgba(255, 255, 255, .12);
}

.feature-motion-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--feature-motion-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, #9f3123, #d4ac66);
  box-shadow: 0 0 14px rgba(212, 172, 102, .34);
  transition: transform .12s linear;
}

/* Image parallax ---------------------------------------------------------- */

[data-feature-motion-root] [data-motion-parallax-media] {
  translate: 0 var(--feature-motion-parallax-y);
  scale: 1.035;
  will-change: translate;
}

[data-feature-motion-root] [data-motion-parallax][data-motion-clip="true"] {
  overflow: hidden;
}

/* Ticker ------------------------------------------------------------------ */

[data-motion-ticker] {
  width: 100%;
  overflow: hidden;
}

[data-motion-ticker-track] {
  width: max-content;
  display: flex;
  align-items: center;
  animation: feature-motion-ticker var(--feature-motion-ticker-duration) linear infinite;
  will-change: transform;
}

[data-motion-direction="reverse"] [data-motion-ticker-track] {
  animation-direction: reverse;
}

[data-motion-ticker-group] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

[data-motion-ticker-item] {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

[data-motion-ticker-item]::after {
  content: "\2022";
  margin-inline: clamp(22px, 3.6vw, 64px);
  opacity: .42;
}

[data-motion-ticker]:is(:hover, :focus-within) [data-motion-ticker-track] {
  animation-play-state: paused;
}

@keyframes feature-motion-ticker {
  to { transform: translate3d(-50%, 0, 0); }
}

/* Card lift --------------------------------------------------------------- */

[data-feature-motion-root] [data-motion-card] {
  transition:
    translate .45s var(--feature-motion-ease),
    box-shadow .45s var(--feature-motion-ease);
}

[data-feature-motion-root] [data-motion-card-media] {
  scale: 1;
  transition: scale .75s var(--feature-motion-ease), filter .45s ease;
}

@media (hover: hover) and (pointer: fine) {
  [data-feature-motion-root] [data-motion-card]:is(:hover, :focus-within) {
    translate: 0 -6px;
  }

  [data-feature-motion-root] [data-motion-card]:is(:hover, :focus-within)
    [data-motion-card-media] {
    scale: 1.025;
  }
}

/* Accessibility and low-power fallback ---------------------------------- */

@media (max-width: 767px), (pointer: coarse) {
  .feature-motion-progress { height: 2px; }

  [data-feature-motion-root] [data-motion-parallax-media] {
    translate: 0 0;
    scale: 1;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-motion-progress { display: none; }

  [data-feature-motion-root] [data-motion-hero],
  [data-feature-motion-root] [data-motion-reveal],
  [data-feature-motion-root] [data-motion-parallax-media],
  [data-feature-motion-root] [data-motion-card],
  [data-feature-motion-root] [data-motion-card-media] {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    animation: none !important;
    transition: none !important;
  }

  [data-motion-ticker] {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  [data-motion-ticker-track] {
    width: max-content;
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  [data-motion-ticker-group][aria-hidden="true"] {
    display: none;
  }
}