/**
 * Great Solutions — Site-wide graphic effects.
 * Loads after all page CSS so it can refine existing styles.
 *
 * Includes:
 *  - Page transition overlay
 *  - Custom cursor
 *  - Magnetic button transitions
 *  - Title clip-path reveal
 *  - Image hover zoom
 *  - Floating decorative blobs (DOM-injected)
 *  - Animated section divider shimmer
 *  - Underline-grow nav link
 *  - Reduced-motion + touch-device fallbacks
 */

/* ───────────────────────────────────────────────────
   PAGE TRANSITION OVERLAY
─────────────────────────────────────────────────── */
.gs-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: linear-gradient(135deg, var(--gs-purple, #4B44CC), var(--gs-blue, #2F6FE0));
  opacity: 1;
  pointer-events: none;
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1);
}
.gs-page-overlay.gs-page-overlay-loaded {
  opacity: 0;
}
.gs-page-overlay.gs-page-overlay-leaving {
  opacity: 1;
}

/* ───────────────────────────────────────────────────
   CUSTOM CURSOR (desktop only)
─────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.gs-fx-active {
    cursor: none;
  }
  body.gs-fx-active a,
  body.gs-fx-active button,
  body.gs-fx-active input,
  body.gs-fx-active textarea,
  body.gs-fx-active select,
  body.gs-fx-active label,
  body.gs-fx-active .gs-tab,
  body.gs-fx-active .gs-hamburger {
    cursor: none;
  }
  .gs-cursor-dot,
  .gs-cursor-ring {
    position: fixed;
    left: 0; top: 0;
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transform: translate3d(-100px, -100px, 0);
    mix-blend-mode: normal;
  }
  .gs-cursor-dot {
    width: 8px; height: 8px;
    margin-left: -4px; margin-top: -4px;
    background: var(--gs-purple, #4B44CC);
    border-radius: 50%;
    transition: width .22s ease, height .22s ease,
                background .22s ease, opacity .2s ease;
  }
  .gs-cursor-dot.gs-cursor-hover {
    width: 4px; height: 4px;
    margin-left: -2px; margin-top: -2px;
    background: var(--gs-blue, #2F6FE0);
  }
  .gs-cursor-dot.gs-cursor-text {
    width: 2px; height: 18px;
    margin-left: -1px; margin-top: -9px;
    border-radius: 1px;
    background: var(--gs-purple, #4B44CC);
  }
  .gs-cursor-ring {
    width: 32px; height: 32px;
    margin-left: -16px; margin-top: -16px;
    border: 1.5px solid rgba(75, 68, 204, 0.45);
    border-radius: 50%;
    transition: width .25s ease, height .25s ease,
                border-color .25s ease, background .25s ease,
                margin .25s ease;
  }
  .gs-cursor-ring.gs-cursor-hover {
    width: 56px; height: 56px;
    margin-left: -28px; margin-top: -28px;
    border-color: var(--gs-purple, #4B44CC);
    background: rgba(75, 68, 204, 0.06);
  }
  .gs-cursor-ring.gs-cursor-click {
    width: 22px; height: 22px;
    margin-left: -11px; margin-top: -11px;
    background: rgba(75, 68, 204, 0.18);
  }
}

/* ───────────────────────────────────────────────────
   MAGNETIC BUTTONS
─────────────────────────────────────────────────── */
.gs-nav-cta,
.gs-form-submit,
.gs-btn-primary,
.gs-btn-white,
.gs-btn-outline,
.gs-btn-secondary,
.gs-svc-btn {
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    box-shadow .25s ease,
    background .3s ease,
    color .3s ease,
    border-color .3s ease;
  will-change: transform;
}

/* ───────────────────────────────────────────────────
   TITLE CLIP-PATH REVEAL
   Uses .gs-fx-reveal class added by JS on intersection.
─────────────────────────────────────────────────── */
.gs-title,
.gs-cta-strip-title,
.gs-form-title,
.gs-ty-title {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1);
}
.gs-title.gs-fx-reveal,
.gs-cta-strip-title.gs-fx-reveal,
.gs-form-title.gs-fx-reveal,
.gs-ty-title.gs-fx-reveal {
  clip-path: inset(0 0 0 0);
}

/* ───────────────────────────────────────────────────
   IMAGE HOVER ZOOM
─────────────────────────────────────────────────── */
.gs-intro-img,
.gs-img,
.gs-team-grid img,
.gs-gallery-img,
.gs-proj-img img,
.gs-page-link-card img {
  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    filter .5s ease,
    box-shadow .4s ease;
  will-change: transform;
}
.gs-intro-img-wrap:hover .gs-intro-img,
.gs-team-grid img:hover,
.gs-img:hover,
.gs-gallery-img:hover,
.gs-proj-img:hover img,
.gs-page-link-card:hover img {
  transform: scale(1.05);
  filter: saturate(1.05);
}

/* ───────────────────────────────────────────────────
   DECORATIVE FLOATING BLOBS (injected by JS)
─────────────────────────────────────────────────── */
.gs-fx-blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
  z-index: 1;
  will-change: transform;
}
.gs-fx-blob-a {
  top: 56%; right: -8%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(108, 99, 255, 0.07), transparent 70%);
  animation: gs-fx-blob-a 18s ease-in-out infinite;
}
.gs-fx-blob-b {
  bottom: -10%; left: -8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(47, 111, 224, 0.06), transparent 70%);
  animation: gs-fx-blob-b 22s ease-in-out infinite;
}
@keyframes gs-fx-blob-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-50px, -40px, 0) scale(1.12); }
}
@keyframes gs-fx-blob-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(40px, -30px, 0) scale(1.18); }
}

/* ───────────────────────────────────────────────────
   ANIMATED SECTION DIVIDER SHIMMER
   Builds on existing .gs-divider::before.
─────────────────────────────────────────────────── */
.gs-divider::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(75, 68, 204, 0.35) 25%,
    rgba(108, 99, 255, 0.7) 50%,
    rgba(75, 68, 204, 0.35) 75%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: gs-fx-divider-flow 7s linear infinite;
}
@keyframes gs-fx-divider-flow {
  from { background-position: 250% 0; }
  to   { background-position: -250% 0; }
}

/* ───────────────────────────────────────────────────
   NAV LINK UNDERLINE GROW (on hover)
─────────────────────────────────────────────────── */
.gs-nav-link::after {
  background: linear-gradient(90deg, var(--gs-purple, #4B44CC), var(--gs-blue, #2F6FE0));
  height: 2px;
}

/* ───────────────────────────────────────────────────
   ACCESSIBILITY — reduced motion + touch
─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gs-page-overlay { display: none !important; }
  .gs-cursor-dot,
  .gs-cursor-ring { display: none !important; }
  body { cursor: auto !important; }
  .gs-fx-blob { display: none !important; }
  .gs-title,
  .gs-cta-strip-title,
  .gs-form-title,
  .gs-ty-title {
    clip-path: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (hover: none) {
  body { cursor: auto !important; }
  .gs-cursor-dot,
  .gs-cursor-ring { display: none !important; }
}