/* Transitions.dev - Page side-by-side (https://transitions.dev) */

/*
  Usage:
    <div class="t-page-slide" data-page="1">
      <section class="t-page" data-page-id="1">…</section>
      <section class="t-page" data-page-id="2">…</section>
    </div>

  State: set data-page="1" or "2" on .t-page-slide.
  Page 1 exits to the left, page 2 exits to the right.
  --page-exit-enabled (0/1) disables the outgoing slide.

  The pages show side by side (and --page-split: 1 tells transitions--page-side-by-side) either:
    - from a fixed viewport width: add t-page-slide-sm (640px) or t-page-slide-md (768px), and style the pages with
      the matching sm: / md: classes;
    - or by shape: put .t-page-slide in a `split` container (below), and style the pages with split: classes.
*/

:root {
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.t-page-slide {
  position: relative;
}

.t-page-slide > .t-page[data-page-id="1"] {
  --t-page-from-x: calc(var(--page-slide-distance) * -1);
}

.t-page-slide > .t-page[data-page-id="2"] {
  --t-page-from-x: var(--page-slide-distance);
}

.t-page-slide > .t-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(
    calc(var(--t-page-from-x, 0px) * var(--page-exit-enabled))
  );
  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
  transition:
    opacity var(--page-fade-dur) var(--page-fade-ease),
    transform var(--page-slide-dur) var(--page-slide-ease),
    filter var(--page-slide-dur) var(--page-slide-ease);
  will-change: opacity, transform, filter;
}

.t-page-slide[data-page="1"] > .t-page[data-page-id="1"],
.t-page-slide[data-page="2"] > .t-page[data-page-id="2"] {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  filter: blur(0);
  transition-delay: var(--page-stagger);
}

@media (min-width: 640px) {
  .t-page-slide-sm {
    --page-split: 1;
  }

  .t-page-slide-sm > .t-page {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
}

@media (min-width: 768px) {
  .t-page-slide-md {
    --page-split: 1;
  }

  .t-page-slide-md > .t-page {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
}

/*
  Side by side inside a `split` size container, while the main page keeps at least a 9:16 shape beside a w-65
  sidebar: the container is padded by that sidebar width (pl-65, its content pulled back with -ml-65), so its content
  box is the main page's space (100cqw its width, 100cqh its height). --page-split tells the controller.

  The `split:` Tailwind variant below is the same query, for the page's own classes. (This file is also served as
  plain CSS, where browsers skip the @custom-variant block.)
*/
@custom-variant split {
  @container split (aspect-ratio >= 9 / 16) {
    @slot;
  }
}

@container split (aspect-ratio >= 9 / 16) {
  .t-page-slide {
    --page-split: 1;
  }

  .t-page-slide > .t-page {
    position: static;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-page-slide > .t-page {
    transition: none !important;
  }
}