/* v2 article landing and reading page (portalApp/resources/views/article/*.blade.php): motion only, everything else is
   stock Tailwind in the markup. Page-scoped on purpose; never fold into tw_main.css. */

[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* The one page-load moment: the Featured mosaic settles in tile by tile. */
  .mosaic-tile {
    opacity: 0;
    transform: translateY(14px);
    animation: mosaic-tile-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .mosaic-tile .tile-media {
    transform: scale(1.08);
    animation: mosaic-media-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .mosaic-tile:nth-child(2),
  .mosaic-tile:nth-child(2) .tile-media { animation-delay: 0.09s; }
  .mosaic-tile:nth-child(3),
  .mosaic-tile:nth-child(3) .tile-media { animation-delay: 0.18s; }
  .mosaic-tile:nth-child(4),
  .mosaic-tile:nth-child(4) .tile-media { animation-delay: 0.27s; }
}

/* Reading page (article/read.blade.php): the progress bar along the top edge, scaled by articles_read.js through
   --read-progress (0 to 1). A transform Tailwind cannot express from a runtime value. */
.read-progress {
  transform-origin: 0 50%;
  transform: scaleX(var(--read-progress, 0));
}

@keyframes mosaic-tile-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mosaic-media-settle {
  to { transform: scale(1); }
}