/* ============================================================
   VARTEX interactive component  (embed in any hero section)
   Copy this file + the assets/ folder into your project.
   All rules are scoped under .vartex — no global resets here.
   ============================================================ */

.vartex{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;
  touch-action:none;background:transparent;
  --vx-size:min(66vmin,540px)
}

.vartex-circle{
  height:88%;height:min(88%, var(--vx-size));
  width:auto;aspect-ratio:1;
  position:relative;z-index:2;opacity:.8;
  border-radius:50%;overflow:hidden;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent
}
.vartex-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.vartex-half{position:absolute;inset:0;z-index:2;background-size:cover;background-position:center}
.vartex-button{clip-path:inset(0 50% 0 0)}
.vartex-reel{clip-path:inset(0 0 0 50%)}
.vartex-mask{position:absolute;inset:0;z-index:4;border-radius:50%;border:2px solid rgba(255,255,255,.25);pointer-events:none}

.vartex-intro{height:88%;height:min(88%, var(--vx-size));aspect-ratio:1;width:auto;position:absolute;z-index:50;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;background:transparent}
.vartex-intro img{width:100%;height:100%;object-fit:cover;border-radius:50%;max-width:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.vartex:has(.vartex-intro) .vartex-circle{opacity:0;visibility:hidden}

.vartex-filter{position:absolute;inset:0;pointer-events:none}
.vartex.art-on .vartex-filter{isolation:isolate}
.vartex.art-on .vartex-filter .vartex-bg,
.vartex.art-on .vartex-filter .vartex-button,
.vartex.art-on .vartex-filter .vartex-reel{filter:grayscale(1) contrast(1.6) brightness(.95)}
.vartex.art-on .vartex-filter:has(.vartex-button),
.vartex.art-on .vartex-filter:has(.vartex-reel){clip-path:inset(0 50% 0 0)}
.vartex.art-on .vartex-filter:has(.vartex-reel){clip-path:inset(0 0 0 50%)}
.vartex.art-on .vartex-filter::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,#6b3fd9,#ff5058);
  mix-blend-mode:screen;opacity:.95;pointer-events:none
}
.vartex.art-on .vartex-filter::after{
  content:"";position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20seed='5'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='1%201%201%200%20-1%201%201%201%200%20-1%201%201%201%200%20-1%200%200%200%201%200'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E"),repeating-linear-gradient(60deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 2px,transparent 4px);
  background-size:180px 180px,cover;
  mix-blend-mode:overlay;opacity:.6;pointer-events:none;
  animation:vartex-grain 20s steps(4) infinite
}
@keyframes vartex-grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}
  75%{transform:translate(-1%,2%)}
  100%{transform:translate(0,0)}
}

.vartex-spark{position:absolute;z-index:1;pointer-events:none;opacity:0;transform-origin:center;will-change:transform,opacity}