/*!
 * HolographicEffect — companion stylesheet
 *
 * Include this once per page, alongside holographic-effect.js. You
 * generally shouldn't need to edit class names here directly — the JS
 * adds/removes them for you. Per-instance colours, opacities, sizes and
 * sensitivities are configured via JS options or data-holo-* attributes
 * (see the comment block at the top of holographic-effect.js), not by
 * editing this file.
 */.holo-scene{position:relative;perspective:900px}.holo-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0) rotateY(0) scale(1);transition:transform .45s cubic-bezier(.16,.9,.35,1),filter .45s ease;filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));will-change:transform}.holo-card.is-active{transition:transform .18s ease-out;filter:drop-shadow(0 26px 34px rgba(0,0,0,.65))}.holo-image{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;display:block;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.holo-fill,.holo-shine,.holo-sparkle,.holo-glare{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;-webkit-mask-image:var(--holo-mask-image, none);mask-image:var(--holo-mask-image, none);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center}.holo-fill{mix-blend-mode:normal;transition:opacity .45s ease}.holo-shine{mix-blend-mode:color-dodge;transition:opacity .45s ease}.holo-sparkle{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.4 0.4 0.4 0 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:cover;background-repeat:no-repeat;mix-blend-mode:overlay;transition:opacity .45s ease}.holo-glare{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 30%,transparent 60%);mix-blend-mode:soft-light;transition:opacity .45s ease}.holo-card.is-active .holo-fill{opacity:var(--holo-opacity-fill, .55)}.holo-card.is-active .holo-shine{opacity:var(--holo-opacity-shine, .3)}.holo-card.is-active .holo-sparkle{opacity:var(--holo-opacity-sparkle, .5)}.holo-card.is-active .holo-glare{opacity:var(--holo-opacity-glare, 1)}.holo-tilt-btn{position:absolute;bottom:12px;left:50%;transform:translate(-50%);padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:#00000080;color:#ffffffe6;font:12px/1 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;letter-spacing:.02em;cursor:pointer;z-index:2;width:auto;min-width:160px}.holo-mask--none{--holo-mask-image: none}.holo-mask--6mg{--holo-mask-image: url(/cdn/shop/files/holo-mask--6mg.png?v=1784798183)}.holo-mask--12mg{--holo-mask-image: url(/cdn/shop/files/holo-mask--outline.png?v=1784835855);--holo-mask-image: url(/cdn/shop/files/holo-mask--12mg.png?v=1784798183)}
/*# sourceMappingURL=/cdn/shop/t/80/assets/holographic-effect.css.map */