/* Scroll showcase + product entrance animations (photos only). Every effect is switched off for people who prefer reduced motion. */
.sc-story { position: relative; height: calc(var(--sc-len, 4) * 100vh); margin: 28px calc(50% - 50vw) 0; }
.sc-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #eef1f7 62%, #e4e9f2 100%); }
.sc-bgword { position: absolute; left: 50%; top: 50%; white-space: nowrap; font-weight: 800; font-size: clamp(90px, 22vw, 340px); letter-spacing: -.02em; line-height: 1; color: rgba(34,34,34,.055); transform: translate(-50%, -50%); will-change: transform; user-select: none; }
.sc-glow { position: absolute; left: 50%; top: 50%; width: min(70vw, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--primary) 0%, rgba(248,182,2,0) 68%); opacity: .38; transform: translate(-50%, -50%); filter: blur(10px); will-change: transform, opacity; }
.sc-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sc-img { position: absolute; max-width: min(78vw, 560px); max-height: 62vh; object-fit: contain; mix-blend-mode: multiply; opacity: 0; will-change: transform, opacity; filter: drop-shadow(0 30px 30px rgba(20,30,50,.18)); }
.sc-img.is-on { opacity: 1; }
.sc-card { position: absolute; top: 50%; max-width: 250px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(20,30,50,.12); opacity: 0; will-change: transform, opacity; }
.sc-card span { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.sc-card strong { display: block; margin-top: 3px; font-size: 20px; line-height: 1.25; color: var(--dark); }
.sc-card.is-left { left: max(4vw, calc(50% - 560px)); }
.sc-card.is-right { right: max(4vw, calc(50% - 560px)); text-align: right; }
.sc-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); transition: opacity .3s; }
.sc-hint i { display: inline-block; font-style: normal; animation: scBob 1.4s ease-in-out infinite; }
.sc-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.05); }
.sc-progress i { display: block; height: 100%; width: 0; background: var(--primary); }
@keyframes scBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding: 40px 0; }
.sc-reveal { margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.sc-reveal.in { opacity: 1; transform: none; }
.sc-reveal img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s ease; }
.sc-reveal:hover img { transform: scale(1.05); }

/* Entrance + gentle float on the main product photo, no click needed */
@keyframes scPop { from { opacity: 0; transform: translateY(26px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes scFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.product-gallery #variantImageDisplay { animation: scPop .9s cubic-bezier(.2,.7,.2,1) both, scFloat 5s ease-in-out .9s infinite; }
.product-info > * { animation: scPop .7s cubic-bezier(.2,.7,.2,1) both; }
.product-info > *:nth-child(2) { animation-delay: .08s; } .product-info > *:nth-child(3) { animation-delay: .14s; } .product-info > *:nth-child(4) { animation-delay: .2s; }
.product-info > *:nth-child(5) { animation-delay: .26s; } .product-info > *:nth-child(6) { animation-delay: .32s; } .product-info > *:nth-child(n+7) { animation-delay: .38s; }

@media (max-width: 720px) {
  .sc-card { top: auto; bottom: 64px; left: 50% !important; right: auto !important; transform: translateX(-50%); width: calc(100vw - 40px); max-width: 340px; text-align: center !important; }
  .sc-img { max-height: 50vh; margin-top: -60px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-gallery #variantImageDisplay, .product-info > * { animation: none; }
  .sc-hint i { animation: none; } .sc-reveal { opacity: 1; transform: none; transition: none; }
}
body { overflow-x: clip; }

/* three-picture row: sized so the whole row fits the screen */
.sc-stage.is-trio .sc-img{width:min(30vw,380px);height:min(58vh,470px);max-width:none;max-height:none;object-fit:contain;opacity:0}
.sc-stage.is-trio .sc-img:first-child{opacity:1}


/* three-picture row, tighter: bigger pictures, less empty space */
.sc-story[data-mode="trio"] .sc-sticky{top:64px;height:calc(100vh - 64px)}
.sc-stage.is-trio .sc-img{width:min(31vw,470px);height:min(72vh,590px)}
.sc-stage.is-trio .sc-img:nth-child(2){z-index:2}

/* phones: the three pictures simply stack top-to-bottom and rise in one after another (no pinned stage, no overlap) */
@media (max-width:720px){
  .sc-story[data-mode="trio"]{height:auto!important;margin:12px 0 0}
  .sc-story[data-mode="trio"] .sc-sticky{position:static;height:auto;background:none;overflow:visible;padding:0}
  .sc-story[data-mode="trio"] .sc-bgword,.sc-story[data-mode="trio"] .sc-glow,.sc-story[data-mode="trio"] .sc-hint,.sc-story[data-mode="trio"] .sc-progress{display:none}
  .sc-stage.is-trio{position:static;display:grid;gap:12px;padding:0 16px}
  .sc-stage.is-trio .sc-img{position:static;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:1/1;margin:0;object-fit:cover;border-radius:16px;mix-blend-mode:normal;filter:none;opacity:1;transform:none}
  .sc-stage.is-trio.rv .sc-img{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  .sc-stage.is-trio.rv .sc-img.in{opacity:1;transform:none}
}