/* iConnect: the card effect on product pages (8/11/2026; effects picked by Nikolaos from the card effects lab
   on 9/11/2026: plain B, holo B, reverse holo B a little stronger, full art C, gold A, rainbow A, slabs A + C).
   card-fx.js tilts the main picture's link and lays a foil over the card inside the picture. The tier comes
   from the server (catalog/model/catalog/ic_card_fx.php).
   Variables set by the script on .ic-cfx: --rx --ry (tilt, deg), --px --py (light, %), --o (strength 0..1),
   --hyp (light from the centre, 0..1), --ax --ay --aw --ah (the art box, px), --gl and --stars (textures). */

/* The foil fades in with --f on each layer, never with the opacity of .ic-cfx itself (11/11/2026): while a
   parent's opacity is below 1 its layers blend only with each other, so the glare and the chrome showed as a
   gray film over the card for the first second (Nikolaos: "a gray overlay that is shown 1 time"). */
@property --f{syntax:'<number>';inherits:true;initial-value:0}
.ic-cfx-host{position:relative;transform-origin:50% 50%;will-change:transform;}
.ic-cfx{--rx:0;--ry:0;--px:50%;--py:50%;--o:0;--hyp:0;position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;border-radius:5.2% / 3.8%;overflow:hidden;--f:0;transition:--f .9s ease;}
/* no z-index on .ic-cfx: it would make its own stacking context, and the blend modes below would mix with
   nothing instead of with the card picture under them (it comes after the picture, so it paints above it) */
.ic-cfx.is-on{--f:1;}
.ic-cfx>span{position:absolute;inset:0;border-radius:inherit;}

/* the light that follows the tilt */
.ic-cfx__glare{background:radial-gradient(farthest-corner circle at var(--px) var(--py),rgba(255,255,255,.8) 6%,rgba(255,255,255,.35) 24%,rgba(0,0,0,.35) 95%);mix-blend-mode:overlay;opacity:calc((calc(var(--o) * .55)) * var(--f));}

/* the art box only (holo), or everything but the art box (reverse holo: four bands, no mask compositing) */
.ic-cfx--holo .ic-cfx__tint,.ic-cfx--holo .ic-cfx__stars1,.ic-cfx--holo .ic-cfx__stars2{
  -webkit-mask:linear-gradient(#000 0 0) var(--ax,0) var(--ay,0) / var(--aw,100%) var(--ah,45%) no-repeat;
  mask:linear-gradient(#000 0 0) var(--ax,0) var(--ay,0) / var(--aw,100%) var(--ah,45%) no-repeat;
}
.ic-cfx--reverse .ic-cfx__chrome,.ic-cfx--reverse .ic-cfx__cool{
  -webkit-mask:linear-gradient(#000 0 0) 0 0 / 100% var(--ay,10%) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--ay,10%) + var(--ah,40%)) / 100% 100% no-repeat,linear-gradient(#000 0 0) 0 0 / var(--ax,8%) 100% no-repeat,linear-gradient(#000 0 0) calc(var(--ax,8%) + var(--aw,84%)) 0 / 100% 100% no-repeat;
  mask:linear-gradient(#000 0 0) 0 0 / 100% var(--ay,10%) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--ay,10%) + var(--ah,40%)) / 100% 100% no-repeat,linear-gradient(#000 0 0) 0 0 / var(--ax,8%) 100% no-repeat,linear-gradient(#000 0 0) calc(var(--ax,8%) + var(--aw,84%)) 0 / 100% 100% no-repeat;
}

/* ---- plain (B, laminated gloss): a band of light slides across with the tilt, the edge facing it catches it ---- */
.ic-cfx__gloss{background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.62) 46%,rgba(255,255,255,.12) 53%,transparent 62%);background-size:320% 100%;background-position:calc(100% + var(--px) * -1) 0;mix-blend-mode:screen;opacity:calc((calc(.25 + var(--o) * .75)) * var(--f));}
.ic-cfx__bevel{box-shadow:inset calc(var(--ry) * -.18px) calc(var(--rx) * .18px) 0 1.5px rgba(255,255,255,.55);opacity:var(--f);}

/* ---- holo (B, starlight): four point stars at two depths that twinkle, over a soft colour tint ---- */
.ic-cfx__tint{background:linear-gradient(135deg,rgba(120,180,255,.5),rgba(255,120,220,.45),rgba(255,230,140,.4));background-size:200% 200%;background-position:var(--px) var(--py);mix-blend-mode:overlay;opacity:calc((calc(var(--o) * .5)) * var(--f));}
.ic-cfx__stars1{background-image:var(--stars,none);background-size:38% 38%;background-position:calc(var(--px) * .9) calc(var(--py) * .7);mix-blend-mode:color-dodge;opacity:calc((calc(.25 + var(--o) * .75)) * var(--f));animation:ic-cfx-twinkle 2.6s ease-in-out infinite alternate;}
.ic-cfx__stars2{background-image:var(--stars,none);background-size:22% 22%;background-position:calc(var(--px) * -1.4) calc(var(--py) * 1.6);mix-blend-mode:color-dodge;opacity:calc((calc(var(--o) * .8)) * var(--f));animation:ic-cfx-twinkle 1.7s ease-in-out infinite alternate-reverse;}
@keyframes ic-cfx-twinkle{from{filter:brightness(.6)}to{filter:brightness(1.5)}}
/* cosmos holo: bigger, denser stars */
.ic-cfx--cosmos .ic-cfx__stars1{background-size:30% 30%;}
.ic-cfx--cosmos .ic-cfx__stars2{background-size:16% 16%;opacity:calc((calc(var(--o) * .95)) * var(--f));}

/* ---- reverse holo (B, chrome, a little stronger than in the lab): silver bands slide across the body ---- */
.ic-cfx__chrome{background:repeating-linear-gradient(110deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.88) 5%,rgba(190,205,230,.36) 9%,rgba(255,255,255,0) 15%,rgba(255,255,255,0) 22%);background-size:260% 260%;background-position:calc(var(--px) * 1.2) calc(var(--py) * .8);mix-blend-mode:overlay;opacity:calc((calc(.3 + var(--o) * .7)) * var(--f));}
.ic-cfx__cool{background:linear-gradient(180deg,rgba(170,200,255,.32),rgba(255,255,255,0));mix-blend-mode:soft-light;opacity:calc((var(--o)) * var(--f));}

/* ---- full art (C, aurora): slow coloured light waves over the illustration, a glint at the light ---- */
.ic-cfx__aurora{inset:-30% !important;border-radius:0 !important;background:radial-gradient(30% 22% at 30% 30%,rgba(80,220,255,.8),transparent 70%),radial-gradient(28% 24% at 70% 55%,rgba(255,80,200,.75),transparent 70%),radial-gradient(26% 20% at 45% 75%,rgba(255,220,90,.6),transparent 70%);filter:blur(10px) hue-rotate(calc(var(--ry) * 5deg));mix-blend-mode:soft-light;opacity:calc((calc(.35 + var(--o) * .65)) * var(--f));animation:ic-cfx-aurora 9s ease-in-out infinite alternate;}
@keyframes ic-cfx-aurora{from{transform:translate(-6%,-4%) rotate(0)}to{transform:translate(6%,5%) rotate(12deg)}}
.ic-cfx__glint{background:radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.85) 0,rgba(255,255,255,0) 14%);mix-blend-mode:overlay;opacity:calc((var(--o)) * var(--f));}

/* ---- gold (A, gold leaf) ---- */
.ic-cfx__leaf{background:repeating-linear-gradient(115deg,#fff1b8 0%,#e6b54a 6%,#fff6d2 12%,#b8861b 18%,#ffe7a0 24%),radial-gradient(farthest-corner circle at var(--px) var(--py),rgba(0,0,0,.05) 12%,rgba(0,0,0,.25) 120%);background-blend-mode:hard-light;background-size:400% 400%,100% 100%;background-position:calc(50% + (var(--px) + -50%) * .55) calc(50% + (var(--py) + -50%) * .55),center;mix-blend-mode:overlay;opacity:calc((calc(var(--o) * .42)) * var(--f));}
.ic-cfx__glitter{background-image:var(--gl,none);background-size:46% 46%;background-position:calc(var(--px) * 1.6) calc(var(--py) * 1.3);mix-blend-mode:color-dodge;opacity:calc((calc(var(--o) * .55)) * var(--f));}
.ic-cfx--rainbow .ic-cfx__glitter{opacity:calc((calc(var(--o) * .5)) * var(--f));}

/* ---- rainbow (A, rainbow sheen) ---- */
.ic-cfx__shine{
  background:
    repeating-linear-gradient(115deg,#ff3fa8 0%,#c04dff 5%,#5a7dff 10%,#3fd6e0 14%,#ffd36e 18%,#ff3fa8 25%),
    repeating-linear-gradient(-45deg,rgba(14,12,20,.65) 0%,rgba(190,200,215,.42) 3.8%,rgba(220,232,240,.42) 4.5%,rgba(190,200,215,.42) 5.2%,rgba(14,12,20,.65) 10%,rgba(14,12,20,.65) 12%),
    radial-gradient(farthest-corner circle at var(--px) var(--py),rgba(0,0,0,.05) 12%,rgba(0,0,0,.15) 30%,rgba(0,0,0,.3) 120%);
  background-blend-mode:screen,hue,hard-light;background-size:400% 400%,300% 300%,100% 100%;
  background-position:calc(50% + (var(--px) + -50%) * .55) calc(50% + (var(--py) + -50%) * .55),calc(50% + (var(--px) + -50%) * .55) calc(50% + (var(--py) + -50%) * .55),center;
  mix-blend-mode:color-dodge;filter:brightness(.8) contrast(1.4) saturate(1.5);opacity:calc((calc(var(--o) * .32)) * var(--f));
}

/* ---- graded slabs (A + C) ---- */
.ic-cfx--slab{border-radius:3%;}
/* A, the plastic glare. The band moves as a whole (background-position) instead of shifting its colour stops,
   which crossed over each other and left a hard edge when the pointer was on the left */
.ic-cfx__plastic{background:linear-gradient(calc(100deg + var(--ry) * 2deg),transparent 30%,rgba(255,255,255,.28) 40%,rgba(255,255,255,.08) 52%,transparent 64%);background-size:200% 100%;background-position:calc(50% + var(--ry) * -2%) 0;mix-blend-mode:screen;opacity:calc((calc(var(--o) * .9)) * var(--f));}
/* C, the spotlight sweep with prism edges, 1.6 times wider than in the lab */
.ic-cfx__sweep{background:linear-gradient(100deg,transparent 37.2%,rgba(80,220,255,.35) 46%,rgba(255,255,255,.85) 50%,rgba(255,90,210,.35) 54%,transparent 62.8%);background-size:300% 100%;mix-blend-mode:screen;animation:ic-cfx-sweep 4.2s cubic-bezier(.45,0,.55,1) infinite;opacity:var(--f);}
@keyframes ic-cfx-sweep{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
.ic-cfx--slab .ic-cfx__glare{opacity:calc((calc(var(--o) * .35)) * var(--f));}

/* ---- the one-time load effect (11/11/2026, Nikolaos picked the holo sweep; the level comes from the price) ----
   card-fx.js lays .ic-cload over the card beside the foil and plays it once as the page opens. A light passes,
   and each level adds what the one below has not: 1 a pink light and a small glow, 2 a magenta holo on the
   art, 3 the full rainbow with glitter and a few stars, 4 two passes, a rainbow line round the edge and many
   stars. The magenta glow grows and saturates with the level. Every layer fades on its own opacity. */
.ic-cload{left:0;top:0;width:0;height:0;pointer-events:none;border-radius:5.2% / 3.8%}
.ic-cload.is-slab{border-radius:3%}
.ic-cload>span{position:absolute;inset:0;border-radius:inherit}
.ic-cload__fx{overflow:hidden}
.ic-cload__fx>span{position:absolute;inset:0;opacity:0;border-radius:inherit}
.ic-cload__halo{opacity:0}
.ic-cload--0{--holo:0;--glit:0;--glow:0;--sw:.5;--dur:1.1s}
.ic-cload--1{--holo:0;--glit:0;--glow:.55;--sw:.82;--dur:1.3s}
.ic-cload--2{--holo:.42;--glit:0;--glow:.7;--sw:.85;--dur:1.6s}
.ic-cload--3{--holo:.62;--glit:.68;--glow:.85;--sw:1;--dur:2.1s}
.ic-cload--4{--holo:.7;--glit:.85;--glow:1;--sw:1;--dur:2.4s}
.ic-cload__holo{mix-blend-mode:color-dodge;filter:brightness(.85) contrast(1.35) saturate(1.3);background-size:300% 300%}
.ic-cload--2 .ic-cload__holo{background-image:repeating-linear-gradient(115deg,#ff3fa8 0%,#AA076B 6%,#ff9ad6 12%,#ff3fa8 18%)}
.ic-cload--3 .ic-cload__holo,.ic-cload--4 .ic-cload__holo{background-image:repeating-linear-gradient(115deg,#ff3fa8 0%,#c04dff 5%,#5a7dff 10%,#3fd6e0 14%,#ffd36e 18%,#ff3fa8 25%)}
.ic-cload__sweep{background-size:250% 100%;background-position:140% 0;mix-blend-mode:overlay}
.ic-cload--0 .ic-cload__sweep{background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.8) 49%,rgba(255,255,255,.5) 51%,transparent 58%)}
.ic-cload--1 .ic-cload__sweep{background-image:linear-gradient(105deg,transparent 33%,rgba(255,150,210,.6) 43%,rgba(255,255,255,.88) 49%,rgba(255,63,168,.55) 55%,transparent 67%)}
.ic-cload--2 .ic-cload__sweep{background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.8) 47%,rgba(255,215,240,.55) 52%,transparent 64%)}
.ic-cload--3 .ic-cload__sweep,.ic-cload--4 .ic-cload__sweep{background-image:linear-gradient(105deg,transparent 33%,rgba(120,200,255,.4) 42%,rgba(255,255,255,.9) 48%,rgba(255,120,220,.45) 54%,transparent 64%)}
.ic-cload__glit{background-image:var(--ltex,none);background-size:46% 46%;mix-blend-mode:color-dodge}
.ic-cload--1 .ic-cload__halo{box-shadow:0 0 14px 2px hsl(325 45% 60% / .5),0 0 30px 6px hsl(325 45% 68% / .25)}
.ic-cload--2 .ic-cload__halo{box-shadow:0 0 22px 4px hsl(325 62% 50% / .58),0 0 46px 10px hsl(325 62% 60% / .3)}
.ic-cload--3 .ic-cload__halo{box-shadow:0 0 32px 6px hsl(325 80% 45% / .66),0 0 68px 15px hsl(325 80% 54% / .34),0 0 104px 24px hsl(318 72% 60% / .16)}
.ic-cload--4 .ic-cload__halo{box-shadow:0 0 44px 10px hsl(325 100% 42% / .8),0 0 104px 26px hsl(325 100% 50% / .44),0 0 170px 44px hsl(318 95% 58% / .22)}
/* level 4: a rainbow line runs once round the edge; its glow sits on the holder, the ring's own mask would cut it */
@property --icp{syntax:'<percentage>';inherits:false;initial-value:0%}
.ic-cload__rim{filter:drop-shadow(0 0 8px rgba(170,7,107,.7)) drop-shadow(0 0 16px rgba(192,77,255,.35))}
.ic-cload__ring{position:absolute;inset:-3px;border-radius:calc(5.2% + 3px) / calc(3.8% + 3px);padding:3.5px;opacity:0;
  background:conic-gradient(from 200deg,#ff3fa8 0%,#c04dff calc(var(--icp) * .2),#5a7dff calc(var(--icp) * .4),#3fd6e0 calc(var(--icp) * .6),#ffd36e calc(var(--icp) * .8),#ff3fa8 var(--icp),transparent var(--icp));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ic-cload__sp{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);background:var(--c);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 4px var(--c));transform:scale(0)}
.ic-cload.is-play .ic-cload__sweep{animation:ic-cl-sweep 1.25s cubic-bezier(.45,0,.55,1) .15s 1 both}
.ic-cload--0.is-play .ic-cload__sweep{animation-duration:1s}
.ic-cload--4.is-play .ic-cload__sweep{animation-iteration-count:2}
.ic-cload.is-play .ic-cload__holo{animation:ic-cl-holo var(--dur) ease-out .05s 1 both}
.ic-cload.is-play .ic-cload__glit{animation:ic-cl-glit var(--dur) ease-out .25s 1 both}
.ic-cload.is-play .ic-cload__halo{animation:ic-cl-halo var(--dur) ease-out .1s 1 both}
.ic-cload--4.is-play .ic-cload__ring{animation:ic-cl-trace 1.7s cubic-bezier(.5,0,.3,1) .35s 1 both}
@keyframes ic-cl-sweep{0%{opacity:var(--sw);background-position:140% 0}100%{opacity:var(--sw);background-position:-40% 0}}
@keyframes ic-cl-holo{0%{opacity:0;background-position:0% 10%}35%{opacity:var(--holo)}100%{opacity:0;background-position:100% 90%}}
@keyframes ic-cl-glit{0%{opacity:0;background-position:0 0}35%{opacity:var(--glit)}100%{opacity:0;background-position:30px 46px}}
@keyframes ic-cl-halo{0%{opacity:0}30%{opacity:var(--glow)}100%{opacity:0}}
@keyframes ic-cl-trace{0%{opacity:1;--icp:0%}62%{opacity:1;--icp:100%}100%{opacity:0;--icp:100%}}
@keyframes ic-cl-pop{0%{transform:scale(0) rotate(0)}45%{transform:scale(1) rotate(60deg)}100%{transform:scale(0) rotate(120deg)}}
@media (prefers-reduced-motion:reduce){.ic-cload{display:none}}