/* Vendi le tue carte – animated banner (vltc). Markup: modules/custom/SellCards.ascx · Script: vltc.js */
.vltc{--c1:#4296c8;--c2:#c84d8c;position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;container-type:inline-size;contain:layout paint;isolation:isolate;
  background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);color:#fff;text-decoration:none;font-family:inherit;-webkit-tap-highlight-color:transparent;user-select:none}
.vltc:hover,.vltc:focus{color:#fff;text-decoration:none}
.vltc *,.vltc *::before,.vltc *::after{box-sizing:border-box}
.vltc img{display:block;max-width:none}
.vltc__float,.vltc__flip{display:block}

/* ambient background */
.vltc__blob{position:absolute;border-radius:50%;filter:blur(9cqi);opacity:.55;pointer-events:none;z-index:0;animation:vltc-drift 10s ease-in-out infinite alternate}
.vltc__blob--a{width:70cqi;height:70cqi;left:-20cqi;top:-22cqi;background:#7fd0ff}
.vltc__blob--b{width:75cqi;height:75cqi;right:-25cqi;bottom:-28cqi;background:#ff79b8;animation-duration:5s}
.vltc__blob--c{width:46cqi;height:46cqi;left:27cqi;top:30cqi;background:#8a5cd6;opacity:.35;animation-duration:2.5s}
@keyframes vltc-drift{to{transform:translate(8cqi,6cqi) scale(1.12)}}
.vltc__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vltc__spark{position:absolute;z-index:1;width:var(--s,2.4cqi);aspect-ratio:1;background:#fff;pointer-events:none;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);animation:vltc-twinkle var(--d,2.5s) ease-in-out var(--dl,0s) infinite;opacity:.2}
@keyframes vltc-twinkle{50%{opacity:.85;transform:scale(1.25) rotate(45deg)}}

/* scene 1: cards */
.vltc__cards{position:absolute;inset:0;z-index:2}
.vltc__card{position:absolute;left:50%;top:50%;width:21cqi;aspect-ratio:63/88;margin:-14.67cqi 0 0 -10.5cqi;
  transform:translate(calc(var(--x)*1cqi),calc(var(--y)*1cqi)) rotate(calc(var(--r)*1deg))}
.vltc.is-playing .vltc__card{will-change:transform,opacity}
.vltc__float{width:100%;height:100%;perspective:110cqi;animation:vltc-float var(--fd,5s) ease-in-out var(--fdl,0s) infinite alternate}
@keyframes vltc-float{to{transform:translate(.7cqi,-1.1cqi) rotate(2.2deg)}}
.vltc__flip{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.vltc__face,.vltc__back{position:absolute;inset:0;width:100%;height:100%;border-radius:1cqi;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 1.6cqi 3.2cqi rgba(35,12,70,.45),0 0 0 .15cqi rgba(255,255,255,.25)}
.vltc__face{object-fit:cover;background:#2f3a6e}
.vltc__back{transform:rotateY(180deg);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 6%,transparent 6.5%),
    radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(255,255,255,.55) 17.5% 19%,transparent 19.5% 27%,rgba(255,255,255,.35) 27.5% 29%,transparent 29.5%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1.2cqi,transparent 1.2cqi 2.4cqi),linear-gradient(150deg,#2f5f9a,#7a3c8a 55%,#a8336f);
  outline:.5cqi solid rgba(255,255,255,.18);outline-offset:-1.6cqi}
.vltc__shine{position:absolute;inset:0;border-radius:1cqi;pointer-events:none;backface-visibility:hidden;mix-blend-mode:screen;opacity:.9;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 48%,rgba(190,240,255,.25) 52%,transparent 62%) 130% 0/260% 100% no-repeat}

/* scene 1: headline */
.vltc__scrim{position:absolute;z-index:3;left:12cqi;right:12cqi;top:31cqi;bottom:31cqi;border-radius:50%;background:rgba(40,28,92,.42);filter:blur(7cqi);pointer-events:none}
.vltc__title{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqi;pointer-events:none}
.vltc__vendi{display:flex;font-weight:800;font-size:19cqi;line-height:.9;letter-spacing:-.03em;
  text-shadow:0 .7cqi 0 rgba(43,38,120,.55),0 1.6cqi 3.5cqi rgba(40,10,70,.4)}
.vltc__l{display:inline-block;transform-origin:50% 100%}
.vltc__sub{position:relative;padding:1.4cqi 4.2cqi 1.8cqi;font-weight:800;font-size:7.4cqi;line-height:1;letter-spacing:-.02em}
.vltc__subbg{position:absolute;inset:0;border-radius:99cqi;background:#fff;box-shadow:0 1.4cqi 3cqi rgba(40,10,70,.35)}
.vltc__subtxt{position:relative;display:block;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* scene 2: games */
.vltc__games{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:10cqi;opacity:0;pointer-events:none}
.vltc__gtitle{font-weight:800;font-size:6.6cqi;line-height:1;letter-spacing:-.02em;text-shadow:0 .9cqi 2.4cqi rgba(40,10,70,.35)}
.vltc__kicker{margin-top:2.2cqi;font-weight:600;font-size:2.8cqi;letter-spacing:.28em;text-transform:uppercase;opacity:.92}
.vltc__rule{width:16cqi;height:.6cqi;margin:1.8cqi 0 3.4cqi;border-radius:9cqi;background:#fff;opacity:.9}
.vltc__list{display:flex;flex-direction:column;gap:2.2cqi;width:70cqi}
.vltc__pill{position:relative;height:10.4cqi;border-radius:99cqi;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.93);box-shadow:0 1.2cqi 3cqi rgba(40,10,70,.28),inset 0 0 0 .25cqi rgba(255,255,255,.9)}
.vltc__pill img{height:6.6cqi;width:auto;max-width:42cqi;object-fit:contain}
.vltc__pill::after{content:"";position:absolute;right:2cqi;top:50%;width:6.2cqi;height:6.2cqi;margin-top:-3.1cqi;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2))}
.vltc__arrow{position:absolute;right:2cqi;top:50%;width:6.2cqi;height:6.2cqi;margin-top:-3.1cqi;z-index:1;display:grid;place-items:center}
.vltc__arrow svg{width:3.2cqi;height:3.2cqi;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vltc__sheen{position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(66,150,200,.18) 45%,rgba(200,77,140,.18) 55%,transparent 65%)}

/* states: is-js = script attached · is-playing = on screen and running · is-reduced = calm mode */
/* before the script starts (or without JS) the markup itself is the poster: scene 1 at rest */
.vltc:not(.is-playing) *{animation-play-state:paused}
.vltc.is-reduced .vltc__blob,.vltc.is-reduced .vltc__spark,.vltc.is-reduced .vltc__float{animation:none}
.vltc:focus-visible{outline:.6cqi solid #fff;outline-offset:-.6cqi}