/*
 * MySunDirection Articles motion layer.
 *
 * Approved composition:
 *   M1 — layered Precision Deck shuffle
 *   M6 — one-time scroll reveal
 *   M7 — user-triggered topic/list cascade
 *   M8 — restrained hover, focus and tap feedback
 *
 * The readable copy never moves during a repeating deck cycle. JavaScript only
 * adds the state classes used here; without JavaScript every component remains
 * visible and usable.
 */

/* M1: a paint-contained deck prevents rotated card edges from drawing through
   adjacent copy at narrow widths (the original mobile "line" artefact). */
.articles-image-deck {
  --deck-card-width: min(84%, 31rem);
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: clamp(15rem, 28vw, 20rem);
  aspect-ratio: 16 / 10;
  border-radius: var(--articles-radius-lg);
  overflow: hidden;
  -webkit-clip-path: inset(0 round var(--articles-radius-lg));
  clip-path: inset(0 round var(--articles-radius-lg));
  perspective: 75rem;
  contain: layout paint;
  transform: translateZ(0);
}

@supports (overflow: clip) {
  .articles-image-deck { overflow: clip; }
}

.articles-image-deck::before {
  position: absolute;
  z-index: -1;
  inset: 10% 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--module-glow, rgba(244, 170, 37, 0.13)), transparent 72%);
  content: "";
  pointer-events: none;
}

.articles-image-deck [data-deck-card] {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--deck-card-width);
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(236, 242, 250, 0.2);
  border-radius: clamp(0.55rem, 1.6vw, 0.85rem);
  opacity: 0;
  object-fit: contain;
  background: var(--articles-navy-950);
  box-shadow: var(--articles-card-shadow);
  transform-origin: 50% 52%;
  transition:
    transform var(--articles-motion-deck) var(--articles-ease-standard),
    opacity var(--articles-motion-deck) ease,
    filter var(--articles-motion-deck) ease;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.articles-image-deck [data-deck-card]:nth-of-type(1) {
  z-index: 5;
  opacity: 1;
  transform: translate(-49%, -50%) rotate(-1deg) scale(1);
}

.articles-image-deck [data-deck-card]:nth-of-type(2) {
  z-index: 4;
  opacity: 0.96;
  filter: saturate(0.9);
  transform: translate(-55%, -43%) rotate(-5deg) scale(0.94);
}

.articles-image-deck [data-deck-card]:nth-of-type(3) {
  z-index: 3;
  opacity: 0.86;
  filter: saturate(0.78);
  transform: translate(-42%, -57%) rotate(5deg) scale(0.89);
}

.articles-image-deck [data-deck-card]:nth-of-type(4) {
  z-index: 2;
  opacity: 0.68;
  filter: saturate(0.7);
  transform: translate(-57%, -56%) rotate(-7deg) scale(0.84);
}

.articles-image-deck [data-deck-card]:nth-of-type(5) {
  z-index: 1;
  opacity: 0.52;
  filter: saturate(0.64);
  transform: translate(-39%, -40%) rotate(7deg) scale(0.8);
}

/* The transition targets line up with the post-rotation nth-child positions,
   so removing the state after moving the first node cannot visibly snap. */
.articles-image-deck.is-shuffling [data-deck-card] {
  will-change: transform, opacity;
}

.articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(1) {
  z-index: 1;
  opacity: 0.52;
  filter: saturate(0.64);
  transform: translate(-39%, -40%) rotate(7deg) scale(0.8);
}

.articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(2) {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translate(-49%, -50%) rotate(-1deg) scale(1);
}

.articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(3) {
  z-index: 4;
  opacity: 0.96;
  filter: saturate(0.9);
  transform: translate(-55%, -43%) rotate(-5deg) scale(0.94);
}

.articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(4) {
  z-index: 3;
  opacity: 0.86;
  filter: saturate(0.78);
  transform: translate(-42%, -57%) rotate(5deg) scale(0.89);
}

.articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(5) {
  z-index: 2;
  opacity: 0.68;
  filter: saturate(0.7);
  transform: translate(-57%, -56%) rotate(-7deg) scale(0.84);
}

.articles-image-deck__fallback {
  position: absolute;
  z-index: 0;
  inset: 16%;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(195, 206, 222, 0.22);
  border-radius: var(--articles-radius-md);
  color: var(--articles-muted-soft);
  background: rgba(5, 11, 22, 0.54);
  font-size: var(--articles-text-xs);
  text-align: center;
}

.articles-image-deck:not(.is-empty) .articles-image-deck__fallback {
  opacity: 0;
}

.articles-image-deck.is-empty .articles-image-deck__fallback {
  z-index: 2;
  opacity: 1;
}

/* M6: pending is added only by enhancement code. Content is never initially
   hidden in source HTML, and reduced-motion users do not receive the reveal. */
.articles-js [data-msd-reveal].is-reveal-pending {
  opacity: 0;
  transform: translateY(1.15rem);
}

.articles-js [data-msd-reveal].is-reveal-pending.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--articles-motion-medium) ease,
    transform var(--articles-motion-medium) var(--articles-ease-out);
}

/* M7: a short, dependent list cascade follows a deliberate topic expansion. */
.articles-js [data-topic-panel].is-topic-opening {
  animation: articles-panel-enter 260ms var(--articles-ease-out) both;
}

.articles-js [data-topic-panel].is-topic-closing {
  animation: articles-panel-exit 180ms ease both;
}

.articles-js [data-topic-panel].is-topic-opening .articles-lesson-list > li {
  animation: articles-lesson-enter 300ms var(--articles-ease-out) both;
  animation-delay: min(calc(var(--articles-cascade-index, 0) * 42ms), 294ms);
}

@keyframes articles-panel-enter {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to { opacity: 1; transform: none; }
}

@keyframes articles-panel-exit {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-0.25rem); }
}

@keyframes articles-lesson-enter {
  from { opacity: 0; transform: translateY(0.45rem); }
  to { opacity: 1; transform: none; }
}

/* M8: interactive feedback is limited to controls and links, never the
   decorative deck itself. Touch does not inherit hover-only transforms. */
.articles-primary-link > span,
.articles-module-row h2 a,
.articles-topic [data-topic-toggle],
.articles-lesson-list a,
.articles-share button,
.articles-viewer button {
  transition:
    color var(--articles-motion-fast) ease,
    background-color var(--articles-motion-fast) ease,
    border-color var(--articles-motion-fast) ease,
    transform var(--articles-motion-fast) var(--articles-ease-out),
    text-decoration-color var(--articles-motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .articles-primary-link:hover > span,
  .articles-primary-link:focus-visible > span {
    transform: translateX(0.22rem);
  }

  .articles-topic [data-topic-toggle]:hover {
    background: rgba(244, 170, 37, 0.045);
  }

  .articles-lesson-list a:hover {
    transform: translateX(0.12rem);
  }
}

.articles-primary-link:active > span {
  transform: translateX(0.12rem);
}

.articles-topic [data-topic-toggle]:active,
.articles-lesson-list a:active {
  color: var(--articles-gold-light);
}

/* A manually paused or temporarily suspended deck settles immediately. */
[data-articles-motion="paused"] .articles-image-deck [data-deck-card],
[data-articles-motion="reduced"] .articles-image-deck [data-deck-card],
.articles-image-deck.is-interaction-paused [data-deck-card] {
  transition-duration: 0ms;
}

.articles-js[data-articles-motion="paused"] [data-msd-reveal],
.articles-js[data-articles-motion="paused"] [data-topic-panel],
.articles-js[data-articles-motion="paused"] [data-topic-panel] .articles-lesson-list > li,
.articles-js[data-articles-motion="reduced"] [data-msd-reveal],
.articles-js[data-articles-motion="reduced"] [data-topic-panel],
.articles-js[data-articles-motion="reduced"] [data-topic-panel] .articles-lesson-list > li {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 56rem) {
  .articles-image-deck {
    --deck-card-width: min(84%, 32rem);
    min-height: clamp(15rem, 62vw, 20rem);
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 42rem) {
  .articles-image-deck {
    --deck-card-width: 82%;
    min-height: clamp(13.75rem, 72vw, 18rem);
    border-radius: var(--articles-radius-md);
    -webkit-clip-path: inset(0 round var(--articles-radius-md));
    clip-path: inset(0 round var(--articles-radius-md));
  }

  .articles-image-deck [data-deck-card]:nth-of-type(2) {
    transform: translate(-54%, -44%) rotate(-4deg) scale(0.94);
  }

  .articles-image-deck [data-deck-card]:nth-of-type(3) {
    transform: translate(-43%, -56%) rotate(4deg) scale(0.89);
  }

  .articles-image-deck [data-deck-card]:nth-of-type(4) {
    transform: translate(-55%, -55%) rotate(-5deg) scale(0.84);
  }

  .articles-image-deck [data-deck-card]:nth-of-type(5) {
    transform: translate(-41%, -42%) rotate(5deg) scale(0.8);
  }

  .articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(1) {
    transform: translate(-41%, -42%) rotate(5deg) scale(0.8);
  }

  .articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(2) {
    transform: translate(-49%, -50%) rotate(-1deg) scale(1);
  }

  .articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(3) {
    transform: translate(-54%, -44%) rotate(-4deg) scale(0.94);
  }

  .articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(4) {
    transform: translate(-43%, -56%) rotate(4deg) scale(0.89);
  }

  .articles-image-deck.is-shuffling [data-deck-card]:nth-of-type(5) {
    transform: translate(-55%, -55%) rotate(-5deg) scale(0.84);
  }
}

@media (prefers-reduced-motion: reduce) {
  .msd-articles {
    scroll-behavior: auto;
  }

  .articles-image-deck [data-deck-card],
  .articles-js [data-msd-reveal],
  .articles-js [data-topic-panel],
  .articles-js [data-topic-panel] .articles-lesson-list > li,
  .articles-primary-link > span,
  .articles-topic [data-topic-toggle],
  .articles-lesson-list a {
    animation: none !important;
    transition: none !important;
  }

  .articles-image-deck [data-deck-card]:not(:nth-of-type(1)) {
    opacity: 0.16;
  }

  .articles-js [data-msd-reveal].is-reveal-pending {
    opacity: 1;
    transform: none;
  }
}

@media (forced-colors: active) {
  .articles-image-deck [data-deck-card] {
    border-color: CanvasText;
  }
}

@media print {
  .articles-image-deck {
    min-height: 12rem;
    page-break-inside: avoid;
  }

  .articles-image-deck [data-deck-card]:not(:nth-of-type(1)) {
    display: none;
  }
}