/* Reel → cup: animated production line infographic (SVG + CSS, scroll-armed) */
.reelfig svg g[stroke]{stroke:inherit!important;filter:none}
.reelfig text{fill:var(--ink3)!important;font-family:var(--mono)!important;font-weight:500!important;letter-spacing:.16em;font-size:11px;text-transform:uppercase}
.reelfig text.hi{fill:var(--tan)!important}
.reelfig .stn text{fill:var(--ink)!important;font-size:9.5px}
.rl{--dur:9s}
.rl *{transform-box:fill-box;transform-origin:center}
.rl .paper{fill:#f3eee6}.rl .paperD{fill:#d8d0c2}.rl .brd{stroke:#9a8e78;stroke-width:1.1;fill:none}
.rl .ink-o{fill:#F15A24}.rl .ink-t{fill:#00695C}.rl .ink-g{fill:#F9B233}.rl .ink-k{fill:#1a1816}
/* reel */
.rl .reel{animation:rlspin 6s linear infinite}
@keyframes rlspin{to{transform:rotate(360deg)}}
.rl .reelring{stroke:#a9a298;stroke-width:1.2;fill:none;stroke-dasharray:4 7}
/* moving web + guides */
.rl .web{stroke-dasharray:14 10;animation:rlweb 1.1s linear infinite}
@keyframes rlweb{to{stroke-dashoffset:-24}}
.rl .flow{stroke:#c8b89a;stroke-width:1;stroke-dasharray:3 9;opacity:.7;animation:rlweb 1.4s linear infinite}
/* print stations — rollers spin, ink laid down as coloured bars flowing right */
.rl .roller{animation:rlspin 2.4s linear infinite}
.rl .roller.r{animation-direction:reverse}
.rl .inkbar{animation:rlink var(--dur) linear infinite;transform-origin:left center}
@keyframes rlink{0%{transform:scaleX(0);opacity:0}8%{opacity:1}22%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:1}}
.rl .swatch{animation:rlpulse 2.4s ease-in-out infinite}
@keyframes rlpulse{0%,100%{opacity:.55}50%{opacity:1}}
/* slitter blades */
.rl .blade{animation:rlblade 1.3s ease-in-out infinite}
@keyframes rlblade{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* die-cut blank: outline draws, then fill snaps in, then the blank lifts and travels */
.rl .blank{stroke-dasharray:640;stroke-dashoffset:640;animation:rldraw var(--dur) ease-in-out infinite}
@keyframes rldraw{0%,28%{stroke-dashoffset:640}45%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.rl .blankfill{animation:rlfill var(--dur) ease-in-out infinite;transform-origin:center}
@keyframes rlfill{0%,44%{opacity:0;transform:scale(.92)}50%{opacity:1;transform:scale(1)}100%{opacity:1}}
.rl .press{animation:rlpress var(--dur) ease-in-out infinite}
@keyframes rlpress{0%,40%{transform:translateY(-22px)}46%{transform:translateY(0)}52%{transform:translateY(-22px)}100%{transform:translateY(-22px)}}
.rl .spark{animation:rlspark var(--dur) ease-out infinite;opacity:0}
@keyframes rlspark{0%,45%{opacity:0;transform:scale(.4)}48%{opacity:1}56%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
/* forming: cup wall wraps (clip grows around), rim rolls on, bottom seals */
.rl .wallwrap{animation:rlwrap var(--dur) ease-in-out infinite;transform-origin:center bottom}
@keyframes rlwrap{0%,56%{transform:scaleX(0)}70%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.rl .bandwrap{animation:rlwrap2 var(--dur) ease-in-out infinite;transform-origin:left center}
@keyframes rlwrap2{0%,62%{transform:scaleX(0)}74%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.rl .rim{animation:rlrim var(--dur) ease-out infinite}
@keyframes rlrim{0%,72%{opacity:0;transform:translateY(-16px)}80%{opacity:1;transform:translateY(0)}100%{opacity:1}}
.rl .base{animation:rlbase var(--dur) ease-out infinite}
@keyframes rlbase{0%,74%{opacity:0;transform:translateY(12px)}82%{opacity:1;transform:translateY(0)}100%{opacity:1}}
.rl .seam{stroke-dasharray:90;stroke-dashoffset:90;animation:rlseam var(--dur) ease-out infinite}
@keyframes rlseam{0%,68%{stroke-dashoffset:90}76%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.rl .glowring{animation:rlglow var(--dur) ease-out infinite;opacity:0}
@keyframes rlglow{0%,80%{opacity:0;transform:scale(.7)}86%{opacity:.9}100%{opacity:0;transform:scale(1.5)}}
/* step arrows shimmer in sequence */
.rl .arrow{stroke-dasharray:6 6;animation:rlweb 1s linear infinite}
.rl .stn rect{fill:rgba(30,28,26,.85);stroke:var(--border)}
.rl .stn.on rect{stroke:var(--tan)}
/* stage lamps light up as the process reaches them */
.rl .lamp{animation:rllamp var(--dur) linear infinite}
.rl .lamp.l2{animation-delay:calc(var(--dur)*.22)}.rl .lamp.l3{animation-delay:calc(var(--dur)*.44)}.rl .lamp.l4{animation-delay:calc(var(--dur)*.7)}
@keyframes rllamp{0%{fill:#3a3836}4%{fill:#F15A24;filter:drop-shadow(0 0 6px #F15A24)}40%{fill:#F15A24;filter:drop-shadow(0 0 6px #F15A24)}48%,100%{fill:#3a3836;filter:none}}
/* only animate when in view */
.reelfig:not(.in) .rl *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rl .blank{stroke-dashoffset:0}.rl .blankfill,.rl .rim,.rl .base,.rl .inkbar,.rl .wallwrap,.rl .bandwrap{opacity:1;transform:none}.rl .seam{stroke-dashoffset:0}}