/*
 * Site motion, loaded only for sites that opt in (`shootcal_motion` filter;
 * inc/rsp.php turns it on for Ryan Smith Photography) together with
 * assets/motion.js. Ported from the live RyanSmithPhotography-Site 8c4edda
 * (kit/styles/base.css, kit/components/chrome.jsx, src/blocks.jsx and
 * tailwind.css), with WordPress block selectors in place of its classes.
 *
 * Every moving rule sits behind prefers-reduced-motion: no-preference, so a
 * visitor who reduces motion gets the page at rest. Without JavaScript the
 * runtime never marks anything, and only the CSS hero entrance plays.
 */

/* The opening hero: the photo fades in, then the title, subtitle, copy and
   buttons rise in one after another (src/blocks.jsx motion-ok:animate-*). */
@keyframes sc-hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sc-fade-in { from { opacity: 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  .sc-motion .is-style-sc-page-hero > .wp-block-cover__image-background,
  .sc-motion .is-style-sc-page-hero > .sc-slideshow { animation: sc-fade-in .6s var(--sc-ease) both; }
  .sc-motion .is-style-sc-page-hero .wp-block-cover__inner-container :is(h1, h2:not(.sc-headline-sub)) { animation: sc-hero-rise .5s var(--sc-ease) both; }
  .sc-motion .is-style-sc-page-hero .wp-block-cover__inner-container .sc-headline-sub { animation: sc-hero-rise .5s var(--sc-ease) .05s both; }
  .sc-motion .is-style-sc-page-hero .wp-block-cover__inner-container p:not(.sc-headline-sub) { animation: sc-hero-rise .5s var(--sc-ease) .1s both; }
  .sc-motion .is-style-sc-page-hero .wp-block-cover__inner-container .wp-block-buttons { animation: sc-hero-rise .5s var(--sc-ease) .15s both; }
}

/* An entrance that is waiting below the fold must still show when motion is
   reduced (a second safeguard while the runtime's callback is queued) and on
   paper (kit/styles/base.css). */
@media (prefers-reduced-motion: reduce) {
  [data-motion-pending] { opacity: 1 !important; transform: none !important; }
}
@media print {
  [data-motion-pending] { opacity: 1 !important; transform: none !important; }
}

/* Feature rows: the photo drifts beside its card only in the wide layout;
   stacked photos keep equal space above and below (tailwind.css). */
@media (max-width: 1024px) {
  [data-photo-drift] { transform: none !important; }
}

/* The home category tiles: on wider screens the two staggered halves meet
   as the grid scrolls through (assets/motion.js sets --sc-category-align). */
@media (min-width: 641px) {
  [data-motion-categories] > .wp-block-column:nth-child(odd) { translate: 0 var(--sc-category-align, 0px); }
  [data-motion-categories] > .wp-block-column:nth-child(even) { translate: 0 calc(-1 * var(--sc-category-align, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-categories] > .wp-block-column:nth-child(n) { margin-top: 0 !important; translate: none; }
}

/* Footer reveal (kit/components/chrome.jsx): when the runtime finds the
   footer fits the screen it sets html[data-footer-reveal]; the page then
   lifts away over a footer held at the bottom of the screen, whose contents
   brighten and settle as it comes into view. The gap the footer kept above
   itself moves inside the page so the footer never shows through it. */
@media screen and (prefers-reduced-motion: no-preference) {
  html[data-footer-reveal] .sc-main { position: relative; z-index: 1; padding-bottom: 96px; background: var(--sc-bg); box-shadow: var(--sc-shadow); }
  html[data-footer-reveal] .sc-main:has(.entry-content > :is(.is-style-sc-boxed-full, .is-style-sc-boxed-full + .wp-block-buttons):last-child) { padding-bottom: 0; }
  html[data-footer-reveal] .sc-main + .sc-site-footer { position: sticky; bottom: 0; z-index: 0; margin-top: 0; }
  html[data-footer-reveal] .sc-main + .sc-site-footer > * {
    opacity: calc(.35 + .65 * var(--footer-reveal, 1));
    transform: translateY(calc((1 - var(--footer-reveal, 1)) * 16px));
  }
}

/* The home hero slideshow (tailwind.css .rsp-slideshow, the ShootCal photo
   ribbon geometry). It replaces the cover's single photo only when the site
   lists its slides (`shootcal_hero_slides`). One track holds every frame;
   each frame sits at the start of the track, offset along x by its own
   --sc-x, which assets/motion.js measures and sets. Before the script runs
   (and without it) only the first photo shows, where it will stay. */
.is-style-sc-page-hero > .sc-slideshow { --sc-gap: clamp(10px, 1.5vw, 24px); position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sc-slideshow__track { position: relative; height: 100%; transform: translate3d(0, 0, 0); will-change: transform; }
.sc-slideshow__frame {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  /* The gap is read from this margin; it has no effect on an absolute box. */
  margin: 0 var(--sc-gap) 0 0;
  transform: translate3d(var(--sc-x, 0px), 0, 0);
}
.sc-slideshow__frame > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sc-slideshow:not([data-ready]) .sc-slideshow__frame:not(:first-child) { visibility: hidden; }
@media (min-width: 1025px) {
  /* Wide screens see the next photos peek in beside the current one. */
  .is-style-sc-page-hero > .sc-slideshow .sc-slideshow__frame {
    --sc-frame-w: min(calc(100cqh * var(--sc-slide-ratio, 1.5)), 84vw);
    width: var(--sc-frame-w); left: calc(50% - var(--sc-frame-w) / 2);
  }
  .is-style-sc-page-hero > .sc-slideshow { container-type: size; }
}