/* ══════════════════════════════════════════════════════════
   NobleClicks — DC-FX : shared premium motion + art utility layer
   Enqueued globally. Pairs with dc-fx.js. All animation is
   GPU-friendly (transform/opacity) and honors reduced-motion.
   Namespaced .fx-* so it never collides with .cs-* or page scopes.
══════════════════════════════════════════════════════════ */

:root{
  /* Multi-accent system (DotCreative secondaries, now activated) */
  --fx-pink:#ff497c;  --fx-pink-d:#e63467;
  --fx-teal:#00bea3;  --fx-lime:#a0ce4e;  --fx-orange:#f1894c;
  --fx-ink:#1f2732;
  --fx-g-pink:linear-gradient(135deg,#ff7aa0,#ff497c 55%,#e63467);
  --fx-g-teal:linear-gradient(135deg,#5fe0cd,#00bea3 60%,#018f7d);
  --fx-g-lime:linear-gradient(135deg,#cde98f,#a0ce4e 60%,#7aa92f);
  --fx-g-orange:linear-gradient(135deg,#ffb784,#f1894c 60%,#d76a2c);
  --fx-g-aurora:linear-gradient(120deg,#ff497c,#f1894c,#a0ce4e,#00bea3);
  --fx-glass:rgba(255,255,255,.7);
  --fx-glass-brd:rgba(255,255,255,.66);
  --fx-shadow-soft:0 22px 55px -16px rgba(31,39,50,.26);
  --fx-shadow-glow:0 24px 60px -16px rgba(255,73,124,.45);
}

/* ── GRAIN OVERLAY (premium texture, whole page) ── */
.fx-grain::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── AURORA / MESH GRADIENT BACKDROP ── */
.fx-aurora{position:relative;isolation:isolate}
.fx-aurora::before{
  content:"";position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;filter:blur(60px);opacity:.55;
  background:
    radial-gradient(40% 50% at 18% 28%,rgba(255,73,124,.55),transparent 60%),
    radial-gradient(38% 45% at 82% 22%,rgba(0,190,163,.45),transparent 60%),
    radial-gradient(45% 55% at 70% 85%,rgba(241,137,76,.40),transparent 60%),
    radial-gradient(40% 50% at 25% 80%,rgba(160,206,78,.38),transparent 60%);
  animation:fxAurora 18s ease-in-out infinite alternate;
}
@keyframes fxAurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2%,-2%,0) scale(1.08)}
  100%{transform:translate3d(-2%,2%,0) scale(1.04)}
}

/* ── MORPHING BLOBS (decorative, pure CSS) ── */
.fx-blob{position:absolute;z-index:-1;pointer-events:none;filter:blur(2px);opacity:.85;
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  animation:fxBlobMorph 14s ease-in-out infinite,fxFloat 9s ease-in-out infinite}
.fx-blob.pink{background:var(--fx-g-pink)}
.fx-blob.teal{background:var(--fx-g-teal)}
.fx-blob.lime{background:var(--fx-g-lime)}
.fx-blob.orange{background:var(--fx-g-orange)}
@keyframes fxBlobMorph{
  0%,100%{border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
  33%{border-radius:67% 33% 38% 62% / 63% 38% 62% 37%}
  66%{border-radius:38% 62% 56% 44% / 49% 61% 39% 51%}
}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.fx-float{animation:fxFloat 7s ease-in-out infinite}
.fx-float-slow{animation:fxFloat 11s ease-in-out infinite}

/* ── DOTTED GRID + RINGS (decorative) ── */
.fx-dots{background-image:radial-gradient(currentColor 1.4px,transparent 1.4px);
  background-size:18px 18px;color:rgba(31,39,50,.14)}

/* ── SCROLL-REVEAL ENGINE ── */
[data-fx]{opacity:0;will-change:transform,opacity;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--fx-i,0)*90ms)}
[data-fx="up"]{transform:translateY(34px)}
[data-fx="down"]{transform:translateY(-34px)}
[data-fx="left"]{transform:translateX(40px)}
[data-fx="right"]{transform:translateX(-40px)}
[data-fx="scale"]{transform:scale(.9)}
[data-fx="zoom"]{transform:scale(1.08)}
[data-fx="blur"]{filter:blur(12px)}
[data-fx].fx-in{opacity:1;transform:none;filter:none}

/* ── GRADIENT TEXT ── */
.fx-gtext{background:var(--fx-g-pink);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.fx-gtext.aurora{background:var(--fx-g-aurora);-webkit-background-clip:text;background-clip:text;
  background-size:200% auto;animation:fxShift 6s linear infinite}
@keyframes fxShift{to{background-position:200% center}}

/* ── GLASSMORPHISM CARD ── */
.fx-glass{
  background:linear-gradient(150deg,rgba(255,255,255,.22),transparent 60%),var(--fx-glass);
  border:1px solid var(--fx-glass-brd);
  backdrop-filter:blur(16px) saturate(165%);-webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:var(--fx-shadow-soft),inset 0 1px 0 rgba(255,255,255,.6)}

/* ── GRADIENT BORDER (animated) ── */
.fx-gborder{position:relative;background-clip:padding-box;border:2px solid transparent}
.fx-gborder::before{content:"";position:absolute;inset:0;z-index:-1;margin:-2px;border-radius:inherit;
  background:var(--fx-g-aurora);background-size:300% 300%;animation:fxBorder 6s linear infinite}
@keyframes fxBorder{0%{background-position:0 50%}100%{background-position:300% 50%}}

/* ── BUTTON SHINE (add .fx-shine to any pill) ── */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transition:left .6s}
.fx-shine:hover::after{left:140%}

/* ── MAGNETIC + TILT (JS-driven; CSS just smooths) ── */
.fx-magnetic{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.fx-tilt{transition:transform .25s ease;transform-style:preserve-3d;will-change:transform}
.fx-tilt-inner{transform:translateZ(40px)}

/* ── CARD LIFT (hover) ── */
.fx-lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.fx-lift:hover{transform:translateY(-8px);box-shadow:var(--fx-shadow-soft)}
.fx-lift.glow:hover{box-shadow:var(--fx-shadow-glow)}

/* ── IMAGE/MEDIA ZOOM ON HOVER ── */
.fx-zoom{overflow:hidden}
.fx-zoom>*{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.fx-zoom:hover>*{transform:scale(1.07)}

/* ── SCROLL PROGRESS BAR (top of viewport) ── */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99995;
  background:var(--fx-g-aurora);background-size:200% auto;animation:fxShift 4s linear infinite;
  box-shadow:0 0 12px rgba(255,73,124,.6);transition:width .1s linear}
.admin-bar .fx-progress{top:32px}
@media screen and (max-width:782px){.admin-bar .fx-progress{top:46px}}

/* ── MARQUEE (infinite ticker) ── */
.fx-marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee-track{display:flex;width:max-content;animation:fxMarquee 28s linear infinite}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* ── COUNT-UP NUMBER ── */
.fx-count{font-variant-numeric:tabular-nums}

/* ── SECTION DIVIDERS (clip-path) ── */
.fx-slant-top{clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%)}
.fx-slant-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 4vw),0 100%)}

/* ── REDUCED MOTION : disable all motion, keep content visible ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-fx]{opacity:1 !important;transform:none !important;filter:none !important}
  .fx-blob,.fx-aurora::before{animation:none !important}
}