/* Home page motion (front page only; the sticky header and hover depth live in sps.css). Everything here is additive: without JavaScript, or when the visitor
   prefers reduced motion, the page renders fully visible and static, exactly as before. */

/* ---------- hero: layered and slowly moving ---------- */
.sps-hero { position: relative; isolation: isolate; overflow: hidden; }
@media (min-width: 768px) { .sps-hero { min-height: clamp(600px, 82vh, 780px) !important; } }
.sps-hero img.wp-block-cover__image-background { height: 130% !important; top: -15% !important; transform-origin: 50% 45%; translate: 0 var(--sps-parallax, 0px); will-change: scale, translate; }
.js .sps-hero img.wp-block-cover__image-background { animation: sps-kenburns 30s ease-in-out infinite alternate; }
@keyframes sps-kenburns { from { scale: 1.02; } to { scale: 1.14; } }
/* the dim overlay settles from near-black to its resting value, so the photo "lights up" on landing */
.js .sps-hero > .wp-block-cover__background { animation: sps-dim 1.6s ease-out both; }
@keyframes sps-dim { from { opacity: .96; } to { opacity: .5; } }
/* a faint olive glow behind the headline and a dark base so the band melts into the page */
.sps-hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 42%, rgba(77, 76, 49, .38), transparent 72%),
              linear-gradient(180deg, rgba(14, 14, 12, .2) 0%, rgba(14, 14, 12, 0) 30%, rgba(14, 14, 12, .9) 100%); }
/* a slow diagonal light sweep */
.js .sps-hero::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -45%; width: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .06) 50%, transparent 100%); transform: skewX(-14deg);
  animation: sps-sweep 12s cubic-bezier(.45, 0, .2, 1) 2.4s infinite; }
@keyframes sps-sweep { 0% { left: -45%; } 55%, 100% { left: 125%; } }
.sps-hero .wp-block-cover__inner-container { position: relative; z-index: 3; }

/* ---------- landing reveal (time based) ---------- */
.sps-hero .sps-line { display: inline-block; }
/* the headline is hidden until motion.js has wrapped its lines; if the script never runs it shows anyway after 2.5s */
.js .sps-hero .sps-display:not(.is-split) { opacity: 0; animation: sps-autoreveal 0s linear 2.5s forwards; }
.js .sps-hero .is-split .sps-line { animation: sps-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.12s + var(--i, 0) * .14s); }
.js .sps-hero .sps-hero__eyebrow { animation: sps-rise .9s cubic-bezier(.2, .7, .2, 1) .05s both; }
.js .sps-hero .sps-hero__text { animation: sps-rise .9s cubic-bezier(.2, .7, .2, 1) .5s both; }
.js .sps-hero .wp-block-buttons { animation: sps-rise .9s cubic-bezier(.2, .7, .2, 1) .62s both; }
@keyframes sps-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes sps-autoreveal { to { opacity: 1; transform: none; } }
/* scroll cue under the button */
.js .sps-hero .wp-block-cover__inner-container::after { content: ""; display: block; width: 1px; height: 54px; margin: 44px auto 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), transparent); transform-origin: top; opacity: 0;
  animation: sps-cue 2.4s ease-in-out 1.8s infinite; }
@keyframes sps-cue { 0% { opacity: 0; transform: scaleY(.2); } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: translateY(16px) scaleY(1); } }

/* ---------- scroll reveals (motion.js adds .is-in when an element enters the viewport) ---------- */
.js .sps-standard:not(.is-in), .js .sps-home-grid .wc-block-product:not(.is-in), .js .sps-home-products .wp-block-buttons:not(.is-in), .js .sps-props .sps-card:not(.is-in), .js .sps-ruo:not(.is-in) {
  opacity: 0; transform: translateY(28px); animation: sps-autoreveal 0s linear 3s forwards; }
.sps-standard, .sps-home-grid .wc-block-product, .sps-home-products .wp-block-buttons, .sps-props .sps-card, .sps-ruo {
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.sps-standard .sps-display::after { content: ""; display: block; width: 72px; height: 2px; margin-top: 18px;
  background: linear-gradient(90deg, var(--wp--preset--color--primary), transparent); }

/* ---------- reduced motion: static and fully visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .sps-hero img.wp-block-cover__image-background, .js .sps-hero > .wp-block-cover__background, .js .sps-hero::after,
  .js .sps-hero .is-split .sps-line, .js .sps-hero .sps-hero__eyebrow, .js .sps-hero .sps-hero__text, .js .sps-hero .wp-block-buttons,
  .js .sps-hero .wp-block-cover__inner-container::after { animation: none !important; }
  .js .sps-hero .wp-block-cover__inner-container::after { display: none; }
  .sps-hero img.wp-block-cover__image-background { translate: 0 0 !important; }
  .js .sps-hero .sps-display:not(.is-split), .js .sps-standard:not(.is-in), .js .sps-home-grid .wc-block-product:not(.is-in),
  .js .sps-home-products .wp-block-buttons:not(.is-in), .js .sps-props .sps-card:not(.is-in), .js .sps-ruo:not(.is-in) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .sps-standard, .sps-home-grid .wc-block-product, .sps-home-products .wp-block-buttons { transition: none !important; }
}