/* ==========================================================================
   Pritchétt Bridal · css/transition.css · page transition overlay (PB-TX)
   --------------------------------------------------------------------------
   Purpose    Full-screen marble checkerboard used between pages: the tiles cover
              the screen on exit (link click) and dissolve on entry (page load),
              both in a diagonal wave. Same marble, order and curve as the
              "In stock today" checkerboard on Home.
   Used by    every page (home, experience, appointments, gowns, bridal-club, faq,
              bridal-101, article, real-brides).
   Figma      No frame of its own; the tiles reuse the marble textures of the
              Home section "05 In stock today" ("HOME · Desktop 1440" 141:6).
   Depends    js/transition.js (builds the tiles and toggles the state classes).
              Markup, first thing in <body>:
                <div class="pb-tx" id="pb-tx" aria-hidden="true"></div><script src="js/transition.js"></script>
              Images: ../img/marble-white.jpg, ../img/marble-black.webp.
   States     .is-on      tiles visible (covering)
              .is-active  overlay blocks clicks while it covers or animates
              .no-tr      jump to a state without transition (first paint)
   Variables  set by js/transition.js on .pb-tx: --tx-c / --tx-r (columns / rows),
              --tx-dur (tile duration). Per tile: --bx / --by (marble crop), --d (delay).
   A11y       Reduced motion: the overlay is hidden here and removed by the script.
   ========================================================================== */
.pb-tx{position:fixed; inset:0; z-index:2147483000; display:grid; pointer-events:none;
  grid-template-columns:repeat(var(--tx-c, 8), 1fr); grid-template-rows:repeat(var(--tx-r, 5), 1fr)}
.pb-tx.is-active{pointer-events:auto; cursor:progress}
/* One tile: a 300% crop of the marble texture, fades and scales in (opacity + transform only) */
.pb-tx__t{display:block; background-repeat:no-repeat; background-size:300% 300%;
  background-position:var(--bx, 0%) var(--by, 0%); opacity:0; transform:scale(.9);
  transition:opacity var(--tx-dur, 420ms) cubic-bezier(.22,1,.36,1), transform var(--tx-dur, 420ms) cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d, 0ms); will-change:opacity, transform}
.pb-tx.is-on .pb-tx__t{opacity:1; transform:scale(1.012)}
.pb-tx.no-tr .pb-tx__t{transition:none}
/* Checkerboard colors; the background-color shows while the texture loads */
.pb-tx__t.is-white{background-color:#fbf9f5; background-image:url("../img/marble-white.jpg")}
.pb-tx__t.is-black{background-color:#252628; background-image:url("../img/marble-black.webp")}
@media (prefers-reduced-motion: reduce){ .pb-tx{display:none} }