*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#061b31;color:#f6f9fc;font-family:Inter,Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.header{height:96px;padding:0 clamp(22px,5vw,90px);display:flex;align-items:center;gap:40px;justify-content:space-between;position:absolute;z-index:10;top:0;left:0;right:0}.brand{display:flex;align-items:center;gap:15px;font-size:clamp(23px,2.4vw,36px);font-weight:850;letter-spacing:-1px;white-space:nowrap}.brand img{height:53px;width:55px;object-fit:contain}.header nav{display:flex;gap:clamp(15px,2.1vw,38px);align-items:center}.header nav a{font-size:15px;font-weight:600;transition:color .2s}.header nav a:hover{color:#ff454b}.headerphone{border:1px solid #a6b7ca;border-radius:7px;padding:13px 16px;white-space:nowrap;font-size:14px}.hamburger{display:none;color:white;background:transparent;border:0;font-size:28px}.hero{min-height:850px;position:relative;overflow:hidden;background:#061c34;display:flex;flex-direction:column;justify-content:space-between;padding-top:180px}.hero-art{position:absolute;inset:80px 0 0;background-size:cover;background-position:center bottom;opacity:.92;animation:reveal 1.5s ease both}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#061c34 0%,#061c34 19%,rgba(6,28,52,.93) 33%,rgba(6,28,52,.36) 55%,transparent 85%),linear-gradient(0deg,#061c34 0%,transparent 24%)}.hero-copy{position:relative;z-index:2;padding:0 clamp(22px,5.4vw,96px);max-width:900px}.eyebrow,.section-tag{font-size:13px;letter-spacing:.28em;font-weight:700;color:#c8d6e6}.eyebrow i{display:inline-block;background:#ed182c;width:30px;height:2px;vertical-align:middle;margin-left:12px}.hero h1{font-size:clamp(42px,4.45vw,76px);line-height:1.06;letter-spacing:-.05em;margin:28px 0 26px;font-weight:850}.hero h1 span{color:#ec1730}.hero-copy p{font-size:clamp(16px,1.45vw,22px);line-height:1.65;color:#d7e1ee}.actions{display:flex;gap:15px;margin-top:36px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:30px;padding:16px 26px;border-radius:6px;font-weight:750;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-3px)}.primary{background:#e71930;color:white}.primary:hover{background:#ff3045}.outline{border-color:#b8cadb;background:rgba(4,22,42,.38)}.hero-bottom{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);padding:26px clamp(22px,5.4vw,96px);background:rgba(2,18,35,.88);border-top:1px solid rgba(255,255,255,.2);gap:25px}.hero-bottom>div{border-right:1px solid #405267;padding-right:18px}.hero-bottom>div:last-child{border:0}.hero-bottom b{display:block;font-size:15px;margin-bottom:8px}.hero-bottom small{color:#9bb1c8;font-size:12px}.section{padding:115px clamp(22px,6vw,110px)}.section-tag{color:#ed2b3b;margin-bottom:44px}.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,8vw,150px)}h2{font-size:clamp(38px,4vw,66px);letter-spacing:-.055em;line-height:1.1;margin:0 0 34px}h2 em{font-style:normal;color:#9caec4}.section p{font-size:17px;line-height:1.85;color:#b7c6d6}.intro{background:#f4f6f8;color:#0a2036}.intro p{color:#43566a}.intro h2 em{color:#7a8a9d}.textlink{display:inline-block;margin-top:22px;color:#d71c31;font-weight:750}.services{background:#091f37}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #35506a;border-left:1px solid #35506a;margin-top:45px}.service-grid article{min-height:245px;padding:34px;border-right:1px solid #35506a;border-bottom:1px solid #35506a;transition:background .2s}.service-grid article:hover{background:#102b47}.service-grid article span{color:#ef3145;font-size:13px;font-weight:800}.service-grid h3{font-size:24px;margin:38px 0 10px}.service-grid p{font-size:15px;margin:0}.info{background:#f4f6f8;color:#0a2036}.info p{color:#526477}.info details{border-bottom:1px solid #cad3dc;padding:19px 0}.info summary{font-weight:750;cursor:pointer;font-size:17px}.info details p{font-size:15px}.contact{background:#081d34}.contact-details{display:flex;flex-direction:column;gap:18px;margin-top:38px;font-size:19px}.contact-details a:hover{color:#ff4050}.contact-details .maplink{font-size:14px;color:#e64658}.contact form{background:#102b46;padding:32px;border:1px solid #2e4b65;display:grid;gap:18px}.contact label{display:grid;gap:8px;font-size:13px;color:#c7d5e3}.contact input,.contact textarea{background:#071d34;border:1px solid #42617c;color:#fff;border-radius:4px;padding:13px;outline:none;width:100%}.contact input:focus,.contact textarea:focus{border-color:#f03b4c}.contact form button{justify-self:start}.trap{position:absolute;left:-9999px}#formstatus{font-size:14px;margin:0}footer{padding:40px clamp(22px,6vw,110px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #34516a}footer .brand{font-size:22px}footer .brand img{width:35px;height:36px}footer p,footer small{font-size:13px;color:#a2b5c8}@keyframes reveal{from{opacity:0;transform:scale(1.04)}to{opacity:.92;transform:scale(1)}}@media(max-width:1100px){.header{gap:20px}.header nav{gap:13px}.header nav a{font-size:13px}.headerphone{display:none}.hero{min-height:790px}.hero-art{background-position:60% bottom}}@media(max-width:760px){.header{height:76px}.brand{font-size:25px}.brand img{width:42px;height:42px}.hamburger{display:block}.header nav{display:none;position:absolute;top:76px;left:0;right:0;background:#061b31;padding:25px;flex-direction:column;align-items:flex-start;gap:22px;box-shadow:0 15px 30px #0005}.header nav.open{display:flex}.header nav a{font-size:16px}.hero{min-height:830px;padding-top:135px}.hero-art{inset:0;background-size:auto 65%;background-repeat:no-repeat;background-position:60% 88%;opacity:.75}.hero-shade{background:linear-gradient(180deg,#061c34 4%,rgba(6,28,52,.98) 24%,rgba(6,28,52,.75) 47%,rgba(6,28,52,.16) 73%,#061c34 92%)}.hero-copy{padding:0 24px}.hero h1{font-size:clamp(38px,8vw,56px);margin:23px 0}.hero h1 br{display:none}.hero-copy p br{display:none}.hero-copy p{font-size:16px}.hero-bottom{grid-template-columns:1fr 1fr;gap:16px;padding:23px}.hero-bottom>div{border:0}.hero-bottom b{font-size:12px}.hero-bottom small{font-size:11px}.section{padding:75px 24px}.split{grid-template-columns:1fr;gap:20px}.section-heading{display:block}.service-grid{grid-template-columns:1fr 1fr}.service-grid article{padding:24px;min-height:220px}.service-grid h3{font-size:19px}.service-grid p{font-size:14px}footer{flex-direction:column;align-items:flex-start}}@media(max-width:440px){.hero{min-height:890px}.actions{gap:10px}.btn{padding:14px 17px;gap:10px;font-size:14px}.service-grid{grid-template-columns:1fr}.service-grid article{min-height:0}.hero-bottom{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Final approved blueprint artwork: visible container, pallets and office */
.hero{min-height:920px;padding-top:175px;background:#061c34}
.hero-art{inset:75px 0 90px;background-image:url(scene.webp);background-size:100% 100%;background-position:center;opacity:1;animation:none}
.hero-shade{background:linear-gradient(90deg,rgba(6,28,52,.96) 0%,rgba(6,28,52,.92) 28%,rgba(6,28,52,.32) 48%,transparent 70%)}
.hero-copy{max-width:810px}.hero h1{font-size:clamp(42px,4.1vw,70px)}
.hero-bottom{background:rgba(2,18,35,.94)}
@media(max-width:760px){.hero{min-height:850px;padding-top:130px}.hero-art{inset:285px 0 120px;background-size:auto 100%;background-position:64% center;opacity:.9}.hero-shade{background:linear-gradient(180deg,#061c34 0%,#061c34 30%,rgba(6,28,52,.4) 57%,rgba(6,28,52,.1) 78%,#061c34 94%)}.hero-copy{max-width:none}}
/* Revision: expose most of the container without changing approved artwork */
@media(min-width:761px){
.hero{padding-top:151px}
.hero h1{font-size:clamp(40px,3.65vw,62px);line-height:1.08;margin:23px 0 22px}
.hero-copy p{font-size:clamp(16px,1.25vw,20px)}
.hero-art{inset:75px 0 145px;background-size:100% 100%}
.hero-shade{background:linear-gradient(90deg,rgba(6,28,52,.96) 0%,rgba(6,28,52,.90) 22%,rgba(6,28,52,.56) 35%,rgba(6,28,52,.08) 53%,transparent 68%);pointer-events:none}
.hero-copy{max-width:770px}
}

/* Interaktivni nacrti – slojevi su poravnati s izvornom scenom. */
.hero{padding-top:112px}
.hero-copy{max-width:760px;z-index:5}
.hero h1{font-size:clamp(39px,3.55vw,60px);margin:19px 0 19px}
.hero-copy p{line-height:1.5}
.actions{margin-top:26px}
.hero-shade{background:linear-gradient(90deg,rgba(6,28,52,.95) 0%,rgba(6,28,52,.88) 20%,rgba(6,28,52,.38) 36%,rgba(6,28,52,.05) 52%,transparent 65%);pointer-events:none}

/* Hand-drawn animation: doors are cut from the original artwork, not rectangles drawn over it. */
.hero{padding-top:148px}
.hero-copy{max-width:760px;z-index:5}
.hero h1{font-size:clamp(41px,4.0vw,68px);margin:22px 0 22px}
.hero-copy p{font-size:clamp(16px,1.25vw,20px);line-height:1.5}
.hero-art{inset:75px 0 145px;background-image:url(scene-open.webp);background-size:100% 100%;background-position:center;opacity:1;animation:none}
.hero-shade{background:linear-gradient(90deg,rgba(6,28,52,.92) 0%,rgba(6,28,52,.85) 19%,rgba(6,28,52,.32) 35%,rgba(6,28,52,.04) 51%,transparent 64%);pointer-events:none}
.scene-interactions{position:absolute;inset:75px 0 145px;z-index:4;pointer-events:none}
.sketch-hotspot{position:absolute;pointer-events:auto;cursor:pointer;border:0;background:transparent;color:white;padding:0;outline-offset:4px;touch-action:manipulation}
.sketch-hotspot:focus-visible{outline:2px solid #ff4659}
.real-container{left:3.7%;top:50%;width:11.2%;height:33%;z-index:4}
.door-layer{position:absolute;inset:0;pointer-events:none;perspective:900px;transform-style:preserve-3d}
.real-door{position:absolute;height:auto;backface-visibility:visible;transform-style:preserve-3d;transition:transform .8s steps(12,end),filter .3s;filter:drop-shadow(0 0 1px #d1e7f1)}
.left-door{left:3.77%;top:52.39%;width:5.5%;transform-origin:0% 50%}
.right-door{left:8.85%;top:50.79%;width:5.5%;transform-origin:100% 50%}
.scene-interactions.container-open .left-door{transform:perspective(460px) rotateY(-125deg)}
.scene-interactions.container-open .right-door{transform:perspective(460px) rotateY(125deg)}
.interaction-hint{position:absolute;bottom:100%;left:0;white-space:nowrap;background:#08253ddc;color:#f3f7fb;border:1px solid #df5365;padding:6px 8px;border-radius:3px;font-size:10px;font-weight:800;letter-spacing:.08em;opacity:0;transition:opacity .2s}
.sketch-hotspot:hover .interaction-hint,.sketch-hotspot:focus-visible .interaction-hint{opacity:1}
.real-pallet{left:33.3%;top:61%;width:10%;height:17%;z-index:4}
.box-animation{position:absolute;left:5%;top:0;width:90%;height:100%;opacity:0;transition:opacity .15s;overflow:visible;filter:drop-shadow(0 2px 4px #041626)}
.real-pallet:hover .box-animation,.real-pallet:focus-visible .box-animation,.real-pallet[aria-pressed="true"] .box-animation{opacity:1}
.flap{transform-box:fill-box;transition:transform .7s steps(10,end)}
.flap-a{transform-origin:80% 80%}.flap-b{transform-origin:15% 80%}
.real-pallet:hover .flap-a,.real-pallet[aria-pressed="true"] .flap-a{transform:rotate(-40deg) translate(-8px,-13px)}
.real-pallet:hover .flap-b,.real-pallet[aria-pressed="true"] .flap-b{transform:rotate(32deg) translate(8px,-12px)}
.real-monitor{left:68.2%;top:52.8%;width:6.3%;height:8.5%;transform:rotate(5deg);z-index:4}
.monitor-display{display:flex;flex-direction:column;gap:4px;padding:6px;background:#092c44;color:#d5edf9;width:100%;height:100%;border:1px solid #b7d4e6;box-shadow:0 0 18px #3eaad144;opacity:0;transition:opacity .3s}
.monitor-display b{font-size:clamp(5px,.45vw,8px);text-align:left;white-space:nowrap}.monitor-display i{display:block;height:2px;background:#9bc4d9;width:0;transition:width .7s steps(9,end)}.monitor-display i:nth-child(3){transition-delay:.13s}.monitor-display i:nth-child(4){transition-delay:.23s}.monitor-display em{font-size:clamp(5px,.4vw,8px);font-style:normal;color:#ff5363;white-space:nowrap}
.real-monitor:hover .monitor-display,.real-monitor:focus-visible .monitor-display,.real-monitor[aria-pressed="true"] .monitor-display{opacity:1}
.real-monitor:hover .monitor-display i,.real-monitor[aria-pressed="true"] .monitor-display i,.real-monitor:focus-visible .monitor-display i{width:90%}
@media(max-width:760px){.hero{padding-top:120px}.hero-copy{max-width:none}.hero h1{font-size:clamp(36px,7.6vw,52px)}.hero-art{inset:285px 0 120px;background-size:auto 100%;background-position:64% center;opacity:.9}.hero-shade{background:linear-gradient(180deg,#061c34 0%,rgba(6,28,52,.96) 30%,rgba(6,28,52,.3) 58%,rgba(6,28,52,.1) 78%,#061c34 94%)}.scene-interactions{display:none}}
@media(prefers-reduced-motion:reduce){.real-door,.flap,.monitor-display i{transition:none}}

.real-container .interaction-hint{bottom:auto;top:100%;margin-top:8px}

/* ===== CEL ANIMACIJE (stepenasti frejmovi, bez glatkog 3D) ===== */
.hero-copy{pointer-events:none}
.hero-copy a,.hero-copy button,.hero-copy p,.hero-copy h1{pointer-events:auto}
.cel-scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cel{cursor:pointer;outline:none}
.cel .hit{fill:transparent;stroke:none;pointer-events:all}
.cel *:not(.hit){pointer-events:none}
.cel:focus-visible .hit{stroke:#ff4659;stroke-width:2;stroke-dasharray:6 5}
@keyframes boil{0%{transform:translate(0,0)}33%{transform:translate(.6px,-.5px)}66%{transform:translate(-.5px,.6px)}}

/* Lampe: ugašene dok ne dođeš mišem */
.lamp .tube-off{fill:#0a2038;stroke:#5d7f9c;stroke-width:1.2;opacity:.92}
.lamp .tube-on{fill:#fffbe8;opacity:0;filter:url(#glow)}
.lamp .cone{fill:url(#coneg);opacity:0}
.lamp.on .tube-off{opacity:0}
.lamp.on .tube-on{animation:flick .7s steps(1,end) forwards}
.lamp.on .cone{animation:flickcone .7s steps(1,end) forwards,boil .42s steps(1,end) .7s infinite}
@keyframes flick{0%{opacity:0}15%{opacity:1}28%{opacity:.15}42%{opacity:1}55%{opacity:.35}70%,100%{opacity:1}}
@keyframes flickcone{0%{opacity:0}15%{opacity:.8}28%{opacity:0}42%{opacity:.8}55%{opacity:.2}70%,100%{opacity:.85}}

/* Monitori: tamni dok ne dodjes; pale se kao stari DOS, bijelo kredom kao ostatak crteza (bez boje) */
.mon .scr-off,.mon-row .scr-off{fill:#000;opacity:.6}
.mon .crt{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.mon .dos,.mon-row .dos{opacity:0}
.mon .dos text{fill:#f2f7fb;font:700 9px "Courier New",Courier,monospace;letter-spacing:.02em}
.cel .cur{fill:#f2f7fb}
.cel .ln,.mon .ok{fill:none;stroke:#eef5fa;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120}
.mon .ok{stroke-width:3;stroke-dasharray:40;stroke-dashoffset:40}
.mon.on .scr-off{animation:offdim .5s steps(1,end) forwards}
.mon.on .crt{animation:crt .45s steps(1,end) forwards}
.mon.on .dos{animation:uiin .01s .4s forwards,boil .42s steps(1,end) .5s infinite}
.mon.on .ln{transition:stroke-dashoffset .5s steps(5,end) .55s;stroke-dashoffset:0}
.mon.on .l2{transition-delay:.85s}.mon.on .l3{transition-delay:1.15s}
.mon.on .ok{transition:stroke-dashoffset .3s steps(3,end) 1.5s;stroke-dashoffset:0}
.cel.on .cur{animation:blink .8s steps(1,end) infinite}
.mon-row.on .scr-off{animation:offdim .5s steps(1,end) var(--d) forwards}
.mon-row.on .dos{animation:uiin .01s calc(var(--d) + .3s) forwards}
.mon-row.on .ln{transition:stroke-dashoffset .4s steps(4,end) .4s;stroke-dashoffset:0}
@keyframes offdim{0%{opacity:.6}25%{opacity:.15}45%{opacity:.5}65%,100%{opacity:.82}}
@keyframes crt{0%{opacity:0;transform:scaleX(.1)}25%{opacity:1;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1) scaleY(6)}75%{opacity:.4;transform:scaleY(14)}100%{opacity:0}}
@keyframes blink{0%{opacity:1}50%{opacity:0}}
@keyframes uiin{to{opacity:1}}

/* Prozor: prava krila s crteza otvaraju se na sarkama u 3 frejma, iza je nocno nebo */
.win .gap{fill:#05162a;opacity:0}
.win .sky{opacity:0}
.win .sky circle{fill:#fff}
.win .sky path{fill:#f3f7ff}
.win .sky .hz{fill:none;stroke:#7fa6c4;stroke-width:1.2}
.win .sash{transform-box:fill-box;transition:transform .45s steps(3,end)}
.win .sA{transform-origin:0% 50%}
.win .sB{transform-origin:100% 50%}
.win.on .gap{opacity:1}
.win.on .sky{opacity:1;animation:boil .42s steps(1,end) .45s infinite}
.win.on .sA{transform:scaleX(.28) skewY(-10deg)}
.win.on .sB{transform:scaleX(.28) skewY(10deg)}

/* Kontejner: prazan, vrata se otvaraju prema van (preko 90 st.), unutra zatreperi lampa */
.box .in-bg{fill:#030d1a}
.box .in-wall{fill:#08192c}.box .in-ceil{fill:#050f1d}.box .in-floor{fill:#0a1e33}.box .in-edge{stroke:#7fa3bf;stroke-width:1.2;fill:none}.box .in-deep{fill:#01060d;opacity:.9}
.box .in-line{stroke:#2c4b6a;stroke-width:1;fill:none}
.box .in-rib{stroke:#35587a;stroke-width:1.1;fill:none}
.box .wire{stroke:#9fbad0;stroke-width:1.2}
.box .bulb-off{fill:#1a3550;stroke:#9fbad0;stroke-width:1}
.box .bulb-on{fill:#fff6d6;opacity:0;filter:url(#glow)}
.box .cone-c{fill:url(#coneb);opacity:0}

/* Kutija na paleti: poskoci u frejmovima (cucanj, skok, doskok) */
.hop .patch{fill:#021e3c;opacity:0}
.hop .shadow{fill:#000;opacity:0}
.hop .speed path{stroke:#e8f2fa;stroke-width:2;stroke-linecap:round;opacity:0}
.hop .lift{transform-box:fill-box;transform-origin:50% 100%}
.hop.on .patch{opacity:1}
.hop.on .lift{animation:hop .9s steps(1,end) forwards}
.hop.on .shadow{animation:hopsh .9s steps(1,end) forwards}
.hop.on .speed path{animation:hopsp .9s steps(1,end) forwards}
@keyframes hop{0%{transform:none}12%{transform:scale(1.04,.92)}24%{transform:translateY(-14px) scale(.97,1.05)}36%{transform:translateY(-24px) rotate(-2deg)}48%{transform:translateY(-28px) rotate(-3deg)}60%{transform:translateY(-16px) rotate(-1deg)}72%{transform:scale(1.05,.92)}84%{transform:translateY(-3px)}100%{transform:none}}
@keyframes hopsh{0%,12%{opacity:0}24%{opacity:.35}36%,60%{opacity:.25}72%,100%{opacity:0}}
@keyframes hopsp{0%,12%{opacity:0}24%,48%{opacity:.9}60%,100%{opacity:0}}

/* Ladice: izlaze jedna za drugom, unutra se vide dokumenti */
.dr .hole{fill:#020c18;opacity:0}
.dr .tray{fill:#0a2742;stroke:#dbeaf5;stroke-width:1.2;opacity:0}
.dr .docs{stroke:#eaf4fb;stroke-width:1.4;fill:none;opacity:0}
.dr .front{transform-box:fill-box}
.drawers.on .dr .hole{opacity:1}
.drawers.on .dr .tray,.drawers.on .dr .docs{animation:uiin .01s .15s forwards}
.drawers.on .dr .front{animation:drawer .45s steps(3,end) forwards}
.drawers.on .d2 .front{animation-delay:.15s}.drawers.on .d2 .tray,.drawers.on .d2 .docs{animation-delay:.3s}
.drawers.on .d3 .front{animation-delay:.3s}.drawers.on .d3 .tray,.drawers.on .d3 .docs{animation-delay:.45s}
@keyframes drawer{to{transform:translate(-16px,11px) scale(1.03)}}
.drawers2.on .dr .front{animation-name:drawer2}
@keyframes drawer2{to{transform:translate(-10px,7px) scale(1.03)}}
.dr .tray{stroke-width:1}

@media (prefers-reduced-motion:reduce){.cel *{animation:none!important;transition:none!important}}

/* Vrata kontejnera: pravo 3D okretanje na sarkama (bez iskrivljavanja), u stepenastim frejmovima */
.doors3d{position:absolute;inset:0;pointer-events:none;perspective:700px;perspective-origin:9% 66%;z-index:3}
.d3{position:absolute;transform-style:preserve-3d;transition:transform .9s steps(7,end)}
.d3 i{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.d3 .b{transform:rotateY(180deg)}
.d3l{transform-origin:0% 50%}
.d3r{transform-origin:100% 50%}
.scene-interactions.container-open .d3l{transform:rotateY(-118deg)}
.scene-interactions.container-open .d3r{transform:rotateY(118deg)}
.cel-scene{z-index:2}
.box.on .bulb-on{animation:flick .7s steps(1,end) .8s forwards}
.box.on .cone-c{animation:flickcone .7s steps(1,end) .8s forwards,boil .42s steps(1,end) 1.5s infinite}

/* Stolice: lijeva se zavrti oko svoje ose, desna se odgurne od stola (cel frejmovi) */
.chair .patch{opacity:0}
.chair .obj{transform-box:fill-box}
.spin .obj{transform-origin:56% 50%}
.spin .whoosh path,.roll .speed path{fill:none;stroke:#e8f2fa;stroke-width:2;stroke-linecap:round;opacity:0}
.spin.on .patch,.roll.on .patch{opacity:1}
.spin.on .obj{animation:swivel 1.05s steps(1,end) forwards}
.spin.on .whoosh path{animation:hopsp 1.05s steps(1,end) forwards}
@keyframes swivel{0%{transform:none}12%{transform:scaleX(.6)}24%{transform:scaleX(.15)}36%{transform:scaleX(-.5)}48%{transform:scaleX(-1)}60%{transform:scaleX(-.55)}72%{transform:scaleX(-.1)}84%{transform:scaleX(.6)}92%{transform:scaleX(1.04)}100%{transform:none}}
.roll .obj{transition:transform .5s steps(4,end)}
.roll.on .obj{transform:translate(-22px,15px) rotate(-2deg);animation:boil .42s steps(1,end) .5s infinite}
.roll.on .speed path{animation:hopsp .9s steps(1,end) forwards}