/*! CardLinkr vCard 3D layer v2. Loaded with vcard-fx.js by vcardTemplates/template/templates.php.
 * Every rule targets a class that vcard-fx.js adds, so if the script does not run nothing changes.
 * Nothing here sets transform, perspective, filter or will-change on html, body, the card column
 * or any element that contains a fixed/sticky element. Decorative layers never take clicks. */

/* Sections waiting for their scroll reveal (only ever set on sections that start below the fold). */
.clfx-pre { opacity: 0 !important; }

/* ---- Full-viewport stage behind the card column (desktop, >= 992px, plain templates only) ---- */
.clfx-bd {
  --h: var(--clfx-h, 235);
  --s: var(--clfx-s, 55%);
  --h2: var(--clfx-h2, calc(var(--h) + 42));
  --h3: var(--clfx-h3, calc(var(--h) - 46));
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background:
    radial-gradient(1100px 680px at 50% -14%, hsla(var(--h), var(--s), 40%, .62), transparent 70%),
    radial-gradient(900px 520px at 50% 118%, hsla(var(--h2), var(--s), 30%, .5), transparent 72%),
    linear-gradient(180deg, hsl(var(--h), 36%, 11%) 0%, hsl(var(--h), 34%, 7%) 58%, hsl(var(--h2), 30%, 4.5%) 100%);
}
.clfx-bd i { position: absolute; display: block; pointer-events: none; }
/* Two parallax planes: far (orbs, aurora) moves little, near (light motes) moves more. */
.clfx-par, .clfx-near {
  position: absolute;
  inset: -8%;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.clfx-par { transform: translate3d(calc(var(--clfx-px, 0) * -22px), calc(var(--clfx-py, 0) * -16px + var(--clfx-sy, 0) * -60px), 0); }
.clfx-near { transform: translate3d(calc(var(--clfx-px, 0) * -54px), calc(var(--clfx-py, 0) * -38px + var(--clfx-sy, 0) * -160px), 0); }

/* Gradient mesh: slow drifting light pools in the card's accent colour and two neighbours. */
.clfx-orb {
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, hsla(var(--h), 88%, 62%, .52), hsla(var(--h), 88%, 62%, 0));
  animation: clfx-drift 26s ease-in-out infinite alternate;
}
.clfx-o1 { left: -14vmax; top: -14vmax; }
.clfx-o2 {
  right: -16vmax; top: 12vh; width: 52vmax; height: 52vmax;
  background: radial-gradient(closest-side, hsla(var(--h2), 88%, 64%, .40), hsla(var(--h2), 88%, 64%, 0));
  animation-duration: 32s; animation-delay: -11s;
}
.clfx-o3 {
  left: 14vw; bottom: -30vmax; width: 50vmax; height: 50vmax;
  background: radial-gradient(closest-side, hsla(var(--h3), 82%, 60%, .32), hsla(var(--h3), 82%, 60%, 0));
  animation-duration: 38s; animation-delay: -19s;
}
.clfx-o4 {
  right: 8vw; bottom: -18vmax; width: 34vmax; height: 34vmax;
  background: radial-gradient(closest-side, hsla(calc(var(--h) + 180), 70%, 62%, .16), hsla(calc(var(--h) + 180), 70%, 62%, 0));
  animation-duration: 44s; animation-delay: -7s;
}
/* A wide, soft ribbon of light that sways slowly behind the card. */
.clfx-aur {
  left: -20%; right: -20%; top: 22%;
  height: 46vh;
  border-radius: 50%;
  background:
    radial-gradient(60% 50% at 30% 50%, hsla(var(--h2), 90%, 66%, .24), transparent 70%),
    radial-gradient(55% 45% at 72% 50%, hsla(var(--h), 90%, 66%, .20), transparent 70%);
  transform: rotate(-11deg);
  animation: clfx-sway 22s ease-in-out infinite alternate;
}
/* Soft light directly behind the card, so it reads as lit from behind. */
.clfx-halo {
  left: 50%; top: 50%;
  width: min(1180px, 92vw); height: 104vh;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, hsla(var(--h), 92%, 68%, .34), hsla(var(--h), 92%, 68%, 0));
  animation: clfx-breathe 10s ease-in-out infinite;
}
/* Light motes that float upward at different depths. */
.clfx-mote {
  bottom: -4vh;
  width: var(--m, 4px); height: var(--m, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, hsla(var(--h), 100%, 92%, .95) 0, hsla(var(--h), 100%, 80%, .5) 40%, hsla(var(--h), 100%, 80%, 0) 72%);
  opacity: 0;
  animation: clfx-rise var(--t, 22s) linear var(--dl, 0s) infinite;
}
/* Faint perspective floor that slowly glides toward the viewer. */
.clfx-floor {
  position: absolute;
  left: -30%; right: -30%; bottom: 0;
  height: 42vh;
  perspective: 520px;
  perspective-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 94%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 94%);
}
.clfx-grid {
  left: 0; right: 0; bottom: 0;
  height: 200%;
  background-image:
    linear-gradient(hsla(var(--h), 90%, 80%, .17) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--h), 90%, 80%, .17) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center bottom;
  transform-origin: 50% 100%;
  transform: rotateX(64deg);
  animation: clfx-glide 9s linear infinite;
}
.clfx-horizon {
  left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, hsla(var(--h), 95%, 78%, .55) 30%, hsla(var(--h), 95%, 86%, .8) 50%, hsla(var(--h), 95%, 78%, .55) 70%, transparent);
  box-shadow: 0 0 24px 4px hsla(var(--h), 95%, 70%, .35);
}
.clfx-vig { inset: 0; background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 56%, rgba(0, 0, 0, .45)); }

@keyframes clfx-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); }
  100% { transform: translate3d(-4vmax, 7vmax, 0) scale(.94); }
}
@keyframes clfx-sway {
  0% { transform: rotate(-11deg) translate3d(-4vw, 0, 0) scale(1); }
  100% { transform: rotate(-6deg) translate3d(5vw, -3vh, 0) scale(1.12); }
}
@keyframes clfx-breathe { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes clfx-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--o, .7); }
  80% { opacity: var(--o, .7); }
  100% { transform: translate3d(var(--dx, 0px), -112vh, 0); opacity: 0; }
}
@keyframes clfx-glide {
  from { transform: rotateX(64deg) translate3d(0, 0, 0); }
  to { transform: rotateX(64deg) translate3d(0, 64px, 0); }
}

/* The card column floats over the stage: depth shadow, a hairline rim and an accent glow.
   Only box-shadow is used (no transform, so fixed buttons and modals inside keep working). */
html.clfx-stage .clfx-col {
  box-shadow:
    0 0 0 1px hsla(var(--clfx-h, 235), 80%, 88%, .16),
    0 70px 140px -40px rgba(0, 0, 0, .8),
    0 28px 56px -26px rgba(0, 0, 0, .5),
    0 0 160px -24px hsla(var(--clfx-h, 235), 90%, 62%, .5) !important;
}
/* Templates that bring their own background keep it; the column gets depth and a soft accent glow. */
html.clfx-lift .clfx-col {
  box-shadow:
    0 0 0 1px hsla(var(--clfx-h, 235), 60%, 55%, .16),
    0 70px 120px -44px rgba(0, 0, 0, .55),
    0 26px 50px -26px rgba(0, 0, 0, .32),
    0 0 90px -6px hsla(var(--clfx-h, 235), 88%, 58%, .45),
    0 0 220px 10px hsla(var(--clfx-h, 235), 88%, 62%, .22);
}

/* ---- Glare on tilted cards (added on hover by vcard-fx.js, mouse only) ---- */
.clfx-glare {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(circle at var(--clfx-gx, 50%) var(--clfx-gy, 0%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%);
}
.clfx-tilting > .clfx-glare { opacity: 1; }

@media (max-width: 991.98px) {
  .clfx-bd { display: none; }
  html.clfx-stage .clfx-col, html.clfx-lift .clfx-col { box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .clfx-pre { opacity: 1 !important; }
  .clfx-bd *, .clfx-glare { animation: none !important; transition: none !important; }
  .clfx-mote, .clfx-glare { display: none !important; }
}
@media print {
  .clfx-bd, .clfx-glare { display: none !important; }
  .clfx-pre { opacity: 1 !important; }
  html.clfx-stage .clfx-col, html.clfx-lift .clfx-col { box-shadow: none !important; }
}