/* Efekti za crnu verziju (verzija 4):
   1 tegla se naginje za mišem + zlatni odsjaj na staklu, 3 brojač MGO + stubići rastu, 4 sekcije se pojavljuju pri skrolanju,
   5 med se cijedi pri promjeni jačine, 6 saće (varijanta A) svijetli oko kursora, 7 zlatni odsjaj preko dugmeta "Dodaj u korpu",
   8 traka za kupovinu na dnu telefona, 15 boja nove jačine se razlije kao med, 16 prevlačenje prstom / strelice mijenjaju jačinu,
   17 zlatne čestice iza tegle, (18 dubina pri skrolanju je isključena), 19 zlatna linija napretka na vrhu, 20 glatko otvaranje pitanja,
   23 magnetna dugmad. (22, pčela, je izbačena po Nickovoj želji.) (2, leteća tegla, je u leti.js.)
   Sve se gasi kad je na uređaju uključeno "smanji animacije". */

/* 1 – tegla u 3D */
.stage{perspective:1000px}
.stage .jarwrap{position:absolute;left:50%;top:48%;height:min(54%,290px);transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform;z-index:1}
.stage.tilting .jarwrap{transition:transform .12s linear}
.stage .jarwrap img{position:static;display:block;height:100%;width:auto;transform:none;filter:drop-shadow(0 34px 40px rgba(0,0,0,.85));transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
.stage .jarwrap img.swap{opacity:0;transform:translateY(16px) scale(.95)}
.stage .jglare{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  background:linear-gradient(105deg,transparent 0%,transparent calc(var(--gx,30%) - 14%),rgba(255,244,214,.55) var(--gx,30%),transparent calc(var(--gx,30%) + 14%),transparent 100%);
  mix-blend-mode:screen;opacity:.0;transition:opacity .4s}
.stage:hover .jglare,.stage .jglare.sweep{opacity:.9}
.stage .jglare.sweep{animation:jsweep 1.1s ease-out}
@keyframes jsweep{from{--gx:-20%}to{--gx:120%}}
@property --gx{syntax:'<percentage>';inherits:false;initial-value:30%}

/* 3 – stubići MGO rastu kad se dođe do njih */
.bars div{transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1),outline .2s}
.bars:not(.grown) div{transform:scaleY(0)}
.bars.grown div:nth-child(2){transition-delay:.08s}.bars.grown div:nth-child(3){transition-delay:.16s}.bars.grown div:nth-child(4){transition-delay:.24s}
.bars.grown.done div{transition-delay:0s}

/* 4 – pojavljivanje pri skrolanju */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

/* 5 – med se cijedi niz gornji rub glavnog bloka */
.drip{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:3}
.drip i{position:absolute;top:-2px;width:var(--w,14px);height:0;border-radius:0 0 999px 999px;
  background:linear-gradient(180deg,#5A3008 0%,#B8701A 45%,#F0B24A 80%,#FFE2A0 100%);box-shadow:inset 2px 0 3px rgba(255,236,190,.5);
  animation:drip 1.6s cubic-bezier(.5,0,.3,1) forwards}
.drip i::after{content:"";position:absolute;left:50%;bottom:-6px;width:calc(var(--w,14px) * .9);height:calc(var(--w,14px) * 1.1);transform:translateX(-50%);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#FFE9B8,#E09A33 45%,#8A4E0E 100%);animation:dropfall 1.6s cubic-bezier(.5,0,.75,0) forwards}
@keyframes drip{0%{height:0;opacity:1}45%{height:var(--h,46px)}80%{height:var(--h,46px);opacity:1}100%{height:var(--h,46px);opacity:0}}
@keyframes dropfall{0%,45%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,180px);opacity:0}}

/* 6 – saće (varijanta A): pravilno složeni šestouglovi, jedva vidljivi po cijeloj stranici; oko miša zasvijetle */
:root{--hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 52 90'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M-26.00 -90.00 L0.00 -75.00 L0.00 -45.00 L-26.00 -30.00 L-52.00 -45.00 L-52.00 -75.00 Z'/%3E%3Cpath d='M-52.00 -45.00 L-26.00 -30.00 L-26.00 0.00 L-52.00 15.00 L-78.00 0.00 L-78.00 -30.00 Z'/%3E%3Cpath d='M26.00 -90.00 L52.00 -75.00 L52.00 -45.00 L26.00 -30.00 L0.00 -45.00 L0.00 -75.00 Z'/%3E%3Cpath d='M0.00 -45.00 L26.00 -30.00 L26.00 0.00 L0.00 15.00 L-26.00 0.00 L-26.00 -30.00 Z'/%3E%3Cpath d='M78.00 -90.00 L104.00 -75.00 L104.00 -45.00 L78.00 -30.00 L52.00 -45.00 L52.00 -75.00 Z'/%3E%3Cpath d='M52.00 -45.00 L78.00 -30.00 L78.00 0.00 L52.00 15.00 L26.00 0.00 L26.00 -30.00 Z'/%3E%3Cpath d='M130.00 -90.00 L156.00 -75.00 L156.00 -45.00 L130.00 -30.00 L104.00 -45.00 L104.00 -75.00 Z'/%3E%3Cpath d='M104.00 -45.00 L130.00 -30.00 L130.00 0.00 L104.00 15.00 L78.00 0.00 L78.00 -30.00 Z'/%3E%3Cpath d='M-26.00 0.00 L0.00 15.00 L0.00 45.00 L-26.00 60.00 L-52.00 45.00 L-52.00 15.00 Z'/%3E%3Cpath d='M-52.00 45.00 L-26.00 60.00 L-26.00 90.00 L-52.00 105.00 L-78.00 90.00 L-78.00 60.00 Z'/%3E%3Cpath d='M26.00 0.00 L52.00 15.00 L52.00 45.00 L26.00 60.00 L0.00 45.00 L0.00 15.00 Z'/%3E%3Cpath d='M0.00 45.00 L26.00 60.00 L26.00 90.00 L0.00 105.00 L-26.00 90.00 L-26.00 60.00 Z'/%3E%3Cpath d='M78.00 0.00 L104.00 15.00 L104.00 45.00 L78.00 60.00 L52.00 45.00 L52.00 15.00 Z'/%3E%3Cpath d='M52.00 45.00 L78.00 60.00 L78.00 90.00 L52.00 105.00 L26.00 90.00 L26.00 60.00 Z'/%3E%3Cpath d='M130.00 0.00 L156.00 15.00 L156.00 45.00 L130.00 60.00 L104.00 45.00 L104.00 15.00 Z'/%3E%3Cpath d='M104.00 45.00 L130.00 60.00 L130.00 90.00 L104.00 105.00 L78.00 90.00 L78.00 60.00 Z'/%3E%3Cpath d='M-26.00 90.00 L0.00 105.00 L0.00 135.00 L-26.00 150.00 L-52.00 135.00 L-52.00 105.00 Z'/%3E%3Cpath d='M-52.00 135.00 L-26.00 150.00 L-26.00 180.00 L-52.00 195.00 L-78.00 180.00 L-78.00 150.00 Z'/%3E%3Cpath d='M26.00 90.00 L52.00 105.00 L52.00 135.00 L26.00 150.00 L0.00 135.00 L0.00 105.00 Z'/%3E%3Cpath d='M0.00 135.00 L26.00 150.00 L26.00 180.00 L0.00 195.00 L-26.00 180.00 L-26.00 150.00 Z'/%3E%3Cpath d='M78.00 90.00 L104.00 105.00 L104.00 135.00 L78.00 150.00 L52.00 135.00 L52.00 105.00 Z'/%3E%3Cpath d='M52.00 135.00 L78.00 150.00 L78.00 180.00 L52.00 195.00 L26.00 180.00 L26.00 150.00 Z'/%3E%3Cpath d='M130.00 90.00 L156.00 105.00 L156.00 135.00 L130.00 150.00 L104.00 135.00 L104.00 105.00 Z'/%3E%3Cpath d='M104.00 135.00 L130.00 150.00 L130.00 180.00 L104.00 195.00 L78.00 180.00 L78.00 150.00 Z'/%3E%3Cpath d='M-26.00 180.00 L0.00 195.00 L0.00 225.00 L-26.00 240.00 L-52.00 225.00 L-52.00 195.00 Z'/%3E%3Cpath d='M-52.00 225.00 L-26.00 240.00 L-26.00 270.00 L-52.00 285.00 L-78.00 270.00 L-78.00 240.00 Z'/%3E%3Cpath d='M26.00 180.00 L52.00 195.00 L52.00 225.00 L26.00 240.00 L0.00 225.00 L0.00 195.00 Z'/%3E%3Cpath d='M0.00 225.00 L26.00 240.00 L26.00 270.00 L0.00 285.00 L-26.00 270.00 L-26.00 240.00 Z'/%3E%3Cpath d='M78.00 180.00 L104.00 195.00 L104.00 225.00 L78.00 240.00 L52.00 225.00 L52.00 195.00 Z'/%3E%3Cpath d='M52.00 225.00 L78.00 240.00 L78.00 270.00 L52.00 285.00 L26.00 270.00 L26.00 240.00 Z'/%3E%3Cpath d='M130.00 180.00 L156.00 195.00 L156.00 225.00 L130.00 240.00 L104.00 225.00 L104.00 195.00 Z'/%3E%3Cpath d='M104.00 225.00 L130.00 240.00 L130.00 270.00 L104.00 285.00 L78.00 270.00 L78.00 240.00 Z'/%3E%3C/g%3E%3C/svg%3E")}
.hexbase,.hexglow{position:fixed;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:var(--hex);mask-image:var(--hex);-webkit-mask-size:52px 90px;mask-size:52px 90px;-webkit-mask-repeat:repeat;mask-repeat:repeat}
.hexbase{background:#E9C46A;opacity:.07}
.hexglow{opacity:0;transition:opacity .5s;background:radial-gradient(101px circle at var(--mx,-500px) var(--my,-500px),#F6D58A 0%,rgba(242,199,102,.45) 42%,transparent 74%)}
.hexglow.on{opacity:1}

/* 7 – zlatni odsjaj preko dugmeta "Dodaj u korpu" */
#addBtn{position:relative;overflow:hidden}
#addBtn::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-160%) skewX(-18deg);animation:shine 5.5s ease-in-out 1.5s infinite}
@keyframes shine{0%,72%{transform:translateX(-160%) skewX(-18deg)}88%,100%{transform:translateX(330%) skewX(-18deg)}}
#addBtn[disabled]::after{display:none}

/* 8 – traka za kupovinu na dnu telefona */
.sbar{display:none}
@media (max-width:760px){
  .sbar{position:fixed;left:10px;right:10px;bottom:10px;z-index:700;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:18px;
    background:rgba(14,12,9,.92);border:1px solid rgba(233,196,106,.28);box-shadow:0 18px 40px rgba(0,0,0,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .sbar.on{transform:none}
  .sbar .sw{flex:0 0 auto;width:14px;height:14px;border-radius:4px;background:var(--g);box-shadow:0 0 12px rgba(var(--g-rgb),.6)}
  .sbar .t{flex:1;min-width:0;line-height:1.2}
  .sbar .t b{display:block;color:#F4ECDA;font-size:15px}
  .sbar .t small{color:#CFC6B4;font-size:13px}
  .sbar button{min-height:44px;padding:0 16px;border:0;border-radius:13px;font:inherit;font-weight:800;font-size:14px;color:#140F05;background:linear-gradient(180deg,#F8DC95,#E2B654 52%,#B98A2E);cursor:pointer}
  body.has-sbar{--sbar:72px}
  body.has-sbar footer{padding-bottom:96px}
}

/* 15 – boja nove jačine se razlije preko glavnog bloka kao med (donja ivica sa kapima) */
.pour{position:absolute;left:-2%;right:-2%;top:0;height:140%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 62%,transparent) 0%,color-mix(in srgb,var(--pc) 36%,transparent) 62%,color-mix(in srgb,var(--pc) 16%,transparent) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V16C97 16 96 22 95 30C94 38 90 38 89 30C88 22 86 16 80 16C74 16 73 20 72 44C71 54 66 54 65 44C64 20 62 16 55 16C48 16 47 19 46 26C45 33 41 33 40 26C39 19 37 16 30 16C24 16 23 21 22 36C21 48 16 48 15 36C14 21 12 16 6 16C3 16 1 16 0 16Z'/%3E%3C/svg%3E") bottom/100% 70px no-repeat,linear-gradient(#000,#000) top/100% calc(100% - 69px) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V16C97 16 96 22 95 30C94 38 90 38 89 30C88 22 86 16 80 16C74 16 73 20 72 44C71 54 66 54 65 44C64 20 62 16 55 16C48 16 47 19 46 26C45 33 41 33 40 26C39 19 37 16 30 16C24 16 23 21 22 36C21 48 16 48 15 36C14 21 12 16 6 16C3 16 1 16 0 16Z'/%3E%3C/svg%3E") bottom/100% 70px no-repeat,linear-gradient(#000,#000) top/100% calc(100% - 69px) no-repeat;
  mix-blend-mode:screen;animation:pour 1.6s cubic-bezier(.45,0,.2,1) forwards}
@keyframes pour{0%{transform:translateY(-100%);opacity:1}55%{transform:translateY(-14%);opacity:.95}100%{transform:translateY(4%);opacity:0}}

/* 16 – na telefonu: natpis da se tegla može prevući */
.swipe-hint{position:absolute;left:50%;top:16px;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.35);border:1px solid rgba(233,196,106,.25);color:#E9DFC8;font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none}
.swipe-hint i{font-style:normal;color:var(--g);font-size:16px;line-height:1}

/* 17 – zlatne čestice iza tegle */
.stage .motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* 19 – zlatna linija napretka na vrhu stranice */
.readline{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#B98A2E,#F6D58A 60%,#FFF4D6);box-shadow:0 0 12px rgba(246,213,138,.55)}

/* 20 – glatko otvaranje pitanja: plus se vraća čim se pitanje počne zatvarati */
.faq details.closing summary i{transform:none}

/* 23 – magnetna dugmad */
.mag{transition:translate .35s cubic-bezier(.2,.8,.2,1),transform .2s,box-shadow .25s,background .2s}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}.bars:not(.grown) div{transform:none}.drip,.hexglow,.pour,.motes{display:none}#addBtn::after{animation:none;display:none}
  .stage .jarwrap{transition:none}
}