/* ═══════════════════════════════════════════════════════════════════════════
   Illustrated Analytics review rotator — the shared component
   ───────────────────────────────────────────────────────────────────────────
   Behaviour: wwwroot/js/illustrated-review-rotator.js

   PROVENANCE. Every value in this file is copied from the basketball app's
   home page card, which the owner iterated on for weeks and which is the
   source of truth for this interaction:

       BasketballWebApp/wwwroot/css/site.css
           .isl-quote-card      padding 30px, radius 24px  (20px under 720px)
           .hp-featured-quote   display grid, gap 18px, touch-action pan-y,
                                user-select none, transition .16s
           .hp-featured-quote.is-changing   opacity .45, translateX(-8px)

   Basketball is read-only reference. Nothing here was invented; if these two
   ever disagree, basketball wins.

   WHY THIS FILE EXISTS. The rotator's script was already global, but every one
   of its style rules lived in store-home.css, which only the storefront home
   page loads. The component could not be placed on any other page without
   silently losing its motion, its swipe surface, and its selection guard --
   the same defect already found in card-flip.css and card-facts.css.

   THE SPLIT. This file owns the MECHANISM: geometry, motion, and the gesture
   surface. A page owns the SKIN -- colours, typography, borders. So the
   storefront still styles .sg-home-review, and a future page can style its own
   without touching anything here.
   ═══════════════════════════════════════════════════════════════════════════ */

.ia-review-card {
    display: grid;
    gap: 18px;
    padding: 30px;
    border-radius: 24px;

    /* pan-y lets the browser keep vertical scrolling while the horizontal
       gesture belongs to the card. Without it a swipe fights the page. */
    touch-action: pan-y;

    /* A drag across text selects it and the swipe never registers. This one
       line is the difference between a gesture that works and one that works
       only sometimes -- which is the hardest kind of bug to report. */
    user-select: none;
    -webkit-user-select: none;

    transition: opacity .16s ease, transform .16s ease;
}

/* The swap happens at the midpoint: the script adds this class, waits 120ms,
   replaces the text, then removes it. Half-faded and nudged left reads as
   "the next one is coming from the right". */
.ia-review-card.is-changing {
    opacity: .45;
    transform: translateX(-8px);
}

@media (max-width: 720px) {
    .ia-review-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    /* Additive only: the script already skips the animation entirely under
       this preference, so this is belt and braces for a cached page. */
    .ia-review-card { transition: none; }
    .ia-review-card.is-changing { opacity: 1; transform: none; }
}