/* Glass Skin SA: "Glass skin in four steps" pinned scroll story (home page).
   The section stays pinned while you scroll and a real product photo swaps for each step, with the background colour
   changing too. It is driven purely by scroll position (CSS scroll-driven animations). Browsers without them, and visitors
   who prefer reduced motion, get the same four steps as a simple list. Linked from index.php; remove the link and the section to undo. */

.ss{padding:88px 24px 0;color:#2a2522}
.ss-head{text-align:center;margin:0 auto 44px;max-width:1180px}
.ss-head .eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-deep)}
.ss-head h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.018em;font-size:clamp(32px,4.6vw,56px);line-height:1.06;margin:0;color:var(--ink)}
.ss-head p{margin:14px auto 0;max-width:34em;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--ink-dim)}

/* ---- plain version (no scroll animation): four steps one under the other ---- */
.ss-track{max-width:1180px;margin:0 auto;padding-bottom:64px}
.ss-stick{display:block}
.ss-dots{display:none}
.ss-step{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:48px}
.ss-fig{justify-self:center;width:min(100%,440px);aspect-ratio:1/1;margin:0;background:#fff;border:1px solid #ece5dd;border-radius:28px;box-shadow:0 1px 2px rgba(42,37,34,.05),0 40px 70px -34px rgba(42,37,34,.3);overflow:hidden}
.ss-fig img{display:block;width:100%;height:100%;object-fit:contain;padding:2%;box-sizing:border-box;filter:contrast(1.07) brightness(1.025) saturate(1.04)}
.ss-num{display:block;margin-bottom:14px;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#8c7662}
.ss-copy h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;font-size:clamp(28px,3.6vw,46px);line-height:1.08;margin:0;color:#2a2522}
.ss-copy p{margin:14px 0 0;max-width:26em;font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:#5d544d}
.ss-price{display:block;margin-top:14px;font-size:15px;color:#5d544d}
.ss-copy .pd-buy{display:inline-block;margin-top:22px}
@media(max-width:833px){
  .ss{padding:60px 16px 0}
  .ss-step{grid-template-columns:1fr;gap:22px;text-align:center}
  .ss-fig{width:min(78vw,340px)}
  .ss-copy p{margin-left:auto;margin-right:auto}
}

/* ---- pinned scroll version ---- */
/* the photo and the background cross over at 25%, 50% and 75% of the pinned scroll; the old words leave a little before the new ones arrive */
@keyframes ss-bg{0%,22%{background-color:#fde6e8}28%,47%{background-color:#dcecf8}53%,72%{background-color:#fbefcf}78%,100%{background-color:#dff1e6}}
@keyframes ss-c1{0%,19%{opacity:1;translate:0 0;pointer-events:auto}24%,100%{opacity:0;translate:-44px 0;pointer-events:none}}
@keyframes ss-c2{0%,27%{opacity:0;translate:44px 0;pointer-events:none}32%,44%{opacity:1;translate:0 0;pointer-events:auto}49%,100%{opacity:0;translate:-44px 0;pointer-events:none}}
@keyframes ss-c3{0%,52%{opacity:0;translate:44px 0;pointer-events:none}57%,69%{opacity:1;translate:0 0;pointer-events:auto}74%,100%{opacity:0;translate:-44px 0;pointer-events:none}}
@keyframes ss-c4{0%,77%{opacity:0;translate:44px 0;pointer-events:none}82%,100%{opacity:1;translate:0 0;pointer-events:auto}}
@keyframes ss-f1{0%,22%{opacity:1;scale:1;rotate:0deg}28%,100%{opacity:0;scale:.82;rotate:-7deg}}
@keyframes ss-f2{0%,22%{opacity:0;scale:1.14;rotate:7deg}28%,47%{opacity:1;scale:1;rotate:0deg}53%,100%{opacity:0;scale:.82;rotate:-7deg}}
@keyframes ss-f3{0%,47%{opacity:0;scale:1.14;rotate:7deg}53%,72%{opacity:1;scale:1;rotate:0deg}78%,100%{opacity:0;scale:.82;rotate:-7deg}}
@keyframes ss-f4{0%,72%{opacity:0;scale:1.14;rotate:7deg}78%,100%{opacity:1;scale:1;rotate:0deg}}
@keyframes ss-d1{0%,22%{width:34px;background:#2a2522}28%,100%{width:10px;background:rgba(42,37,34,.22)}}
@keyframes ss-d2{0%,22%{width:10px;background:rgba(42,37,34,.22)}28%,47%{width:34px;background:#2a2522}53%,100%{width:10px;background:rgba(42,37,34,.22)}}
@keyframes ss-d3{0%,47%{width:10px;background:rgba(42,37,34,.22)}53%,72%{width:34px;background:#2a2522}78%,100%{width:10px;background:rgba(42,37,34,.22)}}
@keyframes ss-d4{0%,72%{width:10px;background:rgba(42,37,34,.22)}78%,100%{width:34px;background:#2a2522}}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .ss{padding-left:0;padding-right:0}
    .ss-head{padding:0 24px}
    .ss-track{max-width:none;padding:0;height:400vh;view-timeline:--ss block;
      animation:ss-bg linear both;animation-timeline:--ss;animation-range:cover 20% cover 80%}
    .ss-stick{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;max-width:1180px;margin:0 auto;padding:0 32px;
      display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px}
    .ss-step{display:contents;margin:0}
    .ss-copy{grid-column:1;grid-row:1;max-width:30em;animation-timeline:--ss;animation-range:cover 20% cover 80%;animation-timing-function:linear;animation-fill-mode:both}
    .ss-fig{grid-column:2;grid-row:1;width:min(100%,500px);animation-timeline:--ss;animation-range:cover 20% cover 80%;animation-timing-function:linear;animation-fill-mode:both}
    .ss-step:nth-child(1) .ss-copy{animation-name:ss-c1}.ss-step:nth-child(1) .ss-fig{animation-name:ss-f1}
    .ss-step:nth-child(2) .ss-copy{animation-name:ss-c2}.ss-step:nth-child(2) .ss-fig{animation-name:ss-f2}
    .ss-step:nth-child(3) .ss-copy{animation-name:ss-c3}.ss-step:nth-child(3) .ss-fig{animation-name:ss-f3}
    .ss-step:nth-child(4) .ss-copy{animation-name:ss-c4}.ss-step:nth-child(4) .ss-fig{animation-name:ss-f4}
    .ss-dots{display:flex;position:absolute;left:0;right:0;bottom:6vh;justify-content:center;gap:10px}
    .ss-dots i{display:block;height:6px;border-radius:6px;animation-timeline:--ss;animation-range:cover 20% cover 80%;animation-timing-function:linear;animation-fill-mode:both}
    .ss-dots i:nth-child(1){animation-name:ss-d1}.ss-dots i:nth-child(2){animation-name:ss-d2}
    .ss-dots i:nth-child(3){animation-name:ss-d3}.ss-dots i:nth-child(4){animation-name:ss-d4}
    @media(max-width:833px){
      .ss-stick{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:22px;padding:0 20px;text-align:center}
      .ss-copy{grid-column:1;grid-row:2;margin:0 auto}
      .ss-copy p{margin-left:auto;margin-right:auto}
      .ss-fig{grid-column:1;grid-row:1;justify-self:center;width:min(62vw,36svh)}
    }
  }
}