/* SPALL SPORTS SCROLL STORY (teamwear and sportswear pages) */

.story-intro{
  padding:70px 0 40px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 340px at 80% -10%, rgba(200,16,46,.16), transparent 60%),
    var(--bg);
}
.story-intro h1{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,7vw,84px); line-height:.98; letter-spacing:.01em; margin:14px 0 18px;
}
.story-intro h1 span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.story-intro .answer{color:var(--muted); font-size:17px; max-width:720px;}
.story-intro .answer b{color:var(--white); font-weight:600;}

/* stats */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:34px;}
.stat-row div{background:var(--card); padding:20px 18px;}
.stat-row strong{display:block; font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(28px,4vw,44px); color:var(--gold); line-height:1;}
.stat-row span{display:block; margin-top:8px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}

/* ticker */
.ticker{overflow:hidden; border-bottom:1px solid var(--line); background:var(--red); white-space:nowrap;}
.ticker-track{display:inline-flex; gap:0; padding:11px 0; animation:tick 38s linear infinite;}
.ticker-track span{font-family:'Oswald',sans-serif; font-weight:600; font-size:14px; letter-spacing:.16em; text-transform:uppercase; padding:0 26px; color:#fff;}
.ticker-track span::after{content:"/"; margin-left:52px; color:var(--bg); opacity:.55;}
@keyframes tick{to{transform:translateX(-50%);}}

/* chapter chips */
.chapter-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
.chapter-chips a{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line-strong); color:var(--muted);}
.chapter-chips a:hover{color:var(--gold); border-color:var(--gold);}

/* the scroll stage */
.story{position:relative; background:#0b0b0b;}
.story-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;}
.story-ghost{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  font-family:'Anton',sans-serif; font-size:clamp(110px,24vw,380px); line-height:.9; text-transform:uppercase;
  white-space:nowrap; color:transparent; -webkit-text-stroke:1.5px rgba(245,166,35,.22);
  pointer-events:none; user-select:none; will-change:transform;
}
.story-glow{position:absolute; inset:0; background:radial-gradient(520px 520px at 66% 52%, rgba(200,16,46,.28), transparent 70%); pointer-events:none;}

.story-media{position:absolute; top:0; bottom:0; right:0; width:58%; display:flex; align-items:center; justify-content:center;}
.layer{position:absolute; inset:7% 4% 11% 3%; display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity,transform;}
.layer canvas,.layer img{max-width:100%; max-height:100%; width:auto; height:100%; object-fit:contain;
  -webkit-mask-image:radial-gradient(closest-side, #000 72%, transparent 100%); mask-image:radial-gradient(closest-side, #000 72%, transparent 100%);}
.layer.zoom img{width:100%; height:auto; max-height:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line-strong);
  -webkit-mask-image:none; mask-image:none; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.layer.is-first{opacity:1;}

.story-text{position:absolute; left:0; bottom:0; top:0; width:42%; display:flex; align-items:center; padding:0 0 0 max(28px, calc((100vw - var(--maxw)) / 2 + 28px));}
.story-copy{max-width:420px;}
.story-copy .count{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.2em; color:var(--gold);}
.story-copy h2{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(30px,3.6vw,52px); line-height:1.02; margin:12px 0 14px;}
.story-copy p{color:var(--muted); font-size:16px;}
.story-copy .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.story-copy .chips span{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border:1px solid var(--line-strong); color:var(--gold);}
.story-copy.swap{animation:swapIn .45s ease both;}
@keyframes swapIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* controls */
.story-bar{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px max(28px, calc((100vw - var(--maxw)) / 2 + 28px)); background:linear-gradient(0deg, rgba(10,10,10,.92), rgba(10,10,10,0)); }
.story-btn{display:inline-flex; align-items:center; gap:10px; font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); background:transparent; border:1px solid var(--line-strong); padding:11px 16px; cursor:pointer;}
.story-btn:hover:not(:disabled){border-color:var(--gold); color:var(--gold);}
.story-btn:disabled{opacity:.3; cursor:default;}
.story-dots{display:flex; gap:10px;}
.story-dots button{width:10px; height:10px; border-radius:50%; border:1px solid var(--gold); background:transparent; cursor:pointer; padding:0;}
.story-dots button.on{background:var(--gold);}
.story-progress{position:absolute; left:0; top:0; height:3px; width:100%; transform-origin:left; transform:scaleX(0); background:var(--grad);}
.scroll-hint{position:absolute; left:50%; bottom:78px; transform:translateX(-50%); font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; transition:opacity .4s;}

/* sticky quote + whatsapp */
.sticky-cta{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; gap:10px; align-items:center;}
.sticky-cta .quote{background:var(--red); color:#fff; font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:14px; padding:14px 20px; box-shadow:0 10px 30px rgba(0,0,0,.5);}
.sticky-cta .quote:hover{background:#e0132f;}
.sticky-cta .wa{width:50px; height:50px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:26px; box-shadow:0 10px 30px rgba(0,0,0,.5);}

/* SEO text under the story */
.story-after{padding:80px 0; border-top:1px solid var(--line);}
.story-after h2{font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(28px,4vw,46px); margin-bottom:16px;}
.story-after h2 span{color:var(--red);}
.story-after p{color:var(--muted); max-width:780px; margin-bottom:14px;}
.fact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0;}
.fact{background:var(--card); border:1px solid var(--line); padding:22px;}
.fact h3{font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px; color:var(--gold);}
.fact p{font-size:14.5px; margin:0;}
.faq details{border-top:1px solid var(--line); padding:16px 0;}
.faq details:last-child{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:.02em;}
.faq details p{margin:10px 0 0;}

/* mobile */
@media (max-width:820px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .fact-grid{grid-template-columns:1fr;}
  .story-media{width:100%; top:0; bottom:42%; }
  .layer{inset:3% 4% 0 4%;}
  .story-text{width:100%; top:auto; height:42%; align-items:flex-start; padding:0 24px; background:linear-gradient(0deg, #0a0a0a 55%, rgba(10,10,10,0));}
  .story-copy{padding-top:22px;}
  .story-copy h2{font-size:26px; margin:8px 0 8px;}
  .story-copy p{font-size:14px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}
  .sticky-cta .quote{padding:10px 14px; font-size:12px;}
  .sticky-cta .wa{width:42px; height:42px; font-size:22px;}
  .story-copy .chips{display:none;}
  .story-ghost{top:34%;}
  .scroll-hint{display:none;}
  .story-bar{padding:12px 18px;}
  .story-btn span{display:none;}
  .sticky-cta{right:12px; bottom:66px;}
}

/* reduced motion: no scroll scrubbing, show every view as a plain stack */
.story.static .story-stage{position:static; height:auto; overflow:visible;}
.story.static{height:auto !important;}
.story.static .story-ghost,.story.static .story-bar,.story.static .story-glow,.story.static .scroll-hint,.story.static .story-progress{display:none;}
.story.static .story-media{position:static; width:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; padding:28px;}
.story.static .layer{position:static; opacity:1 !important; transform:none !important; inset:auto;}
.story.static .layer canvas{display:none;}
.story.static .story-text{position:static; width:auto; padding:0 28px 28px;}
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} .story-copy.swap{animation:none;} }
.layer .static-img{display:none;}
.story.static .layer .static-img{display:block; max-height:70vh; width:auto;}
.note-small{font-size:13px !important; color:var(--muted-dim) !important;}

/* still photo steps (no 360 turn) */
.layer.zoom.contain img{width:auto; height:100%; max-width:100%; aspect-ratio:auto; object-fit:contain; background:#0b0b0b;}
.story.static .layer.zoom.contain img{height:auto; max-height:70vh;}

/* per step stage colour and light stage (white background garment videos) */
.story-stage{background:var(--stage-bg,#0b0b0b); transition:background .5s ease;}
.story.light .story-glow{opacity:0;}
.story.light .story-ghost{-webkit-text-stroke-color:rgba(10,10,10,.13);}
.story.light .story-copy h2{color:#0a0a0a;}
.story.light .story-copy p{color:#4a4a4a;}
.story.light .story-copy .count{color:var(--red);}
.story.light .story-copy .chips span{color:#0a0a0a; border-color:rgba(10,10,10,.35);}
.story.light .story-bar{background:linear-gradient(0deg, rgba(254,254,254,.95), rgba(254,254,254,0));}
.story.light .story-btn{color:#0a0a0a; border-color:rgba(10,10,10,.35);}
.story.light .story-btn:hover:not(:disabled){color:var(--red); border-color:var(--red);}
.story.light .story-dots button{border-color:var(--red);}
.story.light .story-dots button.on{background:var(--red);}
.story.light .scroll-hint{color:#555;}
@media (max-width:820px){ .story.light .story-text{background:linear-gradient(0deg, #fefefe 55%, rgba(254,254,254,0));} }

/* flat stage: frame background equals stage colour, so no glow and only a soft rectangular edge fade */
.story.flat .story-glow{display:none;}
.story.flat .layer canvas{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent), linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent), linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent); mask-composite:intersect;}
/* keep the picture clear of the sticky header and the control bar */
.layer{inset:88px 4% 76px 3%;}
@media (max-width:820px){ .layer{inset:80px 4% 6px 4%;} }

.story.flat .layer canvas.wide{-webkit-mask-image:none; mask-image:none;}

/* first frame shows straight away while the rest of the frames load */
.layer .static-img{display:block; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); height:100%; width:auto; max-width:100%; object-fit:contain; z-index:0;}
.layer canvas{position:relative; z-index:1;}
.layer.ready .static-img{visibility:hidden;}
.story.static .layer .static-img{position:static; transform:none; visibility:visible; height:auto; max-height:70vh;}