/* Stainless WallPro — layered scroll depth, version 2.
   Every moving layer is driven by the browser's own scrolling (position: fixed / sticky and
   CSS scroll-driven animations), not by JavaScript, so nothing stutters or "starts and stops".

   1. Fixed backdrops: each section is a window onto a backdrop that never moves.
      Content scrolls over it, so the background reads as truly fixed.
   2. Hero curtain (desktop): the hero stays pinned while the page slides up over it.
   3. Photos drift inside their frames, and a few elements travel at slightly different speeds
      (in browsers that support scroll-driven animations; others simply show them still).
   4. Content fades up into place as it arrives (depth.js adds the classes). */

/* ---------- 1. Fixed backdrops ---------- */
.collection,.space-explorer,.about-section,.resources-section,.reviews-section,.system-section,.quote-section{
  position:relative;isolation:isolate;clip-path:inset(0)}           /* clip-path keeps each fixed backdrop inside its own section */
.collection::before,.space-explorer::before,.about-section::before,.resources-section::before,.reviews-section::before,
.system-section::before,.quote-section::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}

/* Light sections: soft steel-blue light, plus the W watermark in Products and Resources */
.collection::before,.resources-section::before{
  background:
    url(Logos/w-mark-dark-faint.png) 50% 58%/min(64vw,620px) auto no-repeat,
    radial-gradient(circle at 84% 18%,rgba(91,141,180,.16),transparent 34%),
    radial-gradient(circle at 10% 88%,rgba(44,95,134,.12),transparent 36%)}
.space-explorer::before,.about-section::before,.reviews-section::before{
  background:
    radial-gradient(circle at 12% 22%,rgba(91,141,180,.15),transparent 36%),
    radial-gradient(circle at 88% 78%,rgba(156,198,226,.18),transparent 34%),
    radial-gradient(circle at 60% 50%,rgba(44,95,134,.06),transparent 45%)}

/* Dark sections: steel grid and a white W, fixed behind the content */
.system-section::before,.quote-section::before{
  background:
    url(Logos/w-mark-white-faint.png) 88% 42%/min(52vw,640px) auto no-repeat,
    radial-gradient(circle at 78% 30%,rgba(180,219,241,.10),transparent 40%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 96px)}

/* ---------- 2. Hero curtain (desktop with enough height) ---------- */
main{overflow-x:clip}
main>:not(.hero-main){position:relative;z-index:1}
.resources-section{background:#fff}   /* every section must be opaque so the pinned hero never shows through */
.proof-strip{position:relative;background:#fff}
.proof-strip::after{content:'';position:absolute;inset:0 -100vmax;background:#fff;z-index:-1}
@media (min-width:901px) and (min-height:760px){
  .hero-main{position:sticky;top:87px;z-index:0}
  .proof-strip::before{content:'';position:absolute;left:-100vmax;right:-100vmax;top:-48px;height:48px;pointer-events:none;
    background:linear-gradient(to bottom,rgba(8,16,22,0),rgba(8,16,22,.30));opacity:0}
}

/* ---------- 3. Scroll-driven motion (runs on the browser's compositor) ---------- */
.product-image>img{position:absolute;left:0;top:-9%;height:118%!important}
.founder{overflow:hidden}
.founder>img{scale:1.12}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .product-image>img,.founder>img{animation:swp-drift linear both;animation-timeline:view()}
    [data-speed]{animation:swp-speed linear both;animation-timeline:view()}
    @media (min-width:901px) and (min-height:760px){
      .hero-main::after{content:'';position:absolute;inset:0;background:#0b141b;pointer-events:none;z-index:5;
        animation:swp-dim linear both;animation-timeline:scroll(root);animation-range:0 640px}
      .hero-copy{animation:swp-lift linear both;animation-timeline:scroll(root);animation-range:0 560px}
      .hero-slideshow{animation:swp-push linear both;animation-timeline:scroll(root);animation-range:0 640px}
      .proof-strip::before{animation:swp-shadow linear both;animation-timeline:scroll(root);animation-range:0 90px}
    }
  }
}
@keyframes swp-drift{from{translate:0 -7%}to{translate:0 7%}}
@keyframes swp-speed{from{translate:0 calc(var(--speed,.05) * 40vh)}to{translate:0 calc(var(--speed,.05) * -40vh)}}
@keyframes swp-dim{from{opacity:0}to{opacity:.55}}
@keyframes swp-lift{from{translate:0 0;opacity:1}to{translate:0 -90px;opacity:0}}
@keyframes swp-push{from{scale:1}to{scale:1.06}}
@keyframes swp-shadow{from{opacity:0}to{opacity:1}}

/* ---------- 4. Fade-up entrances ---------- */
.depth-reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.25,.8,.25,1),transform .9s cubic-bezier(.25,.8,.25,1);transition-delay:var(--reveal-delay,0s)}
.depth-reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .depth-reveal{opacity:1!important;transform:none!important;transition:none}
  .hero-main{position:relative!important}
}