/* ============================================================
   EFFECTS — “Wow layer” applied site-wide
   - Animated starfield canvas (JS)
   - Ambient glow + subtle grain
   - Gradient borders + hover lift
   - CTA shine + section separators
   Keep this file focused on visual effects so the rest of the
   CSS stays clean and maintainable.
============================================================ */

/* ---------- Star canvas layer (JS inserts or 404 provides) ---------- */
#ccseoStars,
.ccseo-stars{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.88;
}

/* Keep the site above the starfield */
.cc-nav,
#ccseo-progress-wrapper,
.cc-main,
.ccseo-footer{
  position: relative;
  z-index: 2;
}

/* When the JS starfield is active, turn off the CSS dot-stars fallback */
body.cc-has-stars::before{ display:none !important; }
body.cc-has-stars .ccv2-home::before{ display:none !important; }

/* ---------- Ambient glow (pointer-follow) ---------- */
:root{
  --cc-mx: 50vw;
  --cc-my: 24vh;
}

/* A soft spotlight that follows the cursor (driven by ambient.js) */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(900px circle at var(--cc-mx) var(--cc-my), rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(700px circle at calc(var(--cc-mx) + 12vw) calc(var(--cc-my) + 18vh), rgba(168,85,247,0.10), transparent 62%),
    radial-gradient(900px circle at 18% 82%, rgba(249,115,22,0.08), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Subtle grain layer (SVG noise) */
body::before{
  /* pages.css defines ::before as a fallback star layer; we keep that.
     This grain layer is applied on a wrapper so we don't fight with pages.css.
  */
}

.cc-main::before,
.ccv2-home::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* Prevent duplicate grain on the home wrapper since cc-main isn't present */
body.home .cc-main::before{ display:none; }

/* ---------- Gradient border “glass” treatment ---------- */
.cc-surface,
.ccv2-card,
.ccv2-mock-card,
.ccv2-optimizer-shell{
  position: relative;
  overflow: hidden;
}

.cc-surface::before,
.ccv2-card::before,
.ccv2-mock-card::before,
.ccv2-optimizer-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(34,211,238,0.55),
    rgba(168,85,247,0.50),
    rgba(249,115,22,0.45),
    rgba(236,72,153,0.40)
  );
  opacity: 0.55;
  pointer-events: none;

  /* Show gradient only on the border */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.cc-surface::after,
.ccv2-card::after,
.ccv2-mock-card::after,
.ccv2-optimizer-shell::after{
  content: "";
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 20% 10%, rgba(34,211,238,0.18), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(168,85,247,0.14), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(249,115,22,0.12), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.cc-surface:hover::after,
.ccv2-card:hover::after,
.ccv2-mock-card:hover::after,
.ccv2-optimizer-shell:hover::after{
  opacity: 1;
}

/* Lift on hover (kept subtle) */
.cc-surface,
.ccv2-card,
.ccv2-mock-card,
.ccv2-optimizer-shell{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc-surface:hover,
.ccv2-card:hover,
.ccv2-mock-card:hover,
.ccv2-optimizer-shell:hover{
  transform: translateY(-2px);
  box-shadow: 0 34px 120px rgba(0,0,0,0.62);
}

/* ---------- CTA shine ---------- */
.cc-nav-btn,
.ccv2-btn-primary,
button,
input[type="submit"],
.wp-block-button__link{
  position: relative;
  overflow: hidden;
}

.cc-nav-btn::after,
.ccv2-btn-primary::after,
button::after,
input[type="submit"]::after,
.wp-block-button__link::after{
  content: "";
  position: absolute;
  inset: -120% -40%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 45%, transparent 60%);
  transform: rotate(18deg) translateX(-30%);
  opacity: 0;
  transition: opacity .18s ease;
}

.cc-nav-btn:hover::after,
.ccv2-btn-primary:hover::after,
button:hover::after,
input[type="submit"]:hover::after,
.wp-block-button__link:hover::after{
  opacity: 1;
  animation: ccShine 1.1s ease;
}

@keyframes ccShine{
  from{ transform: rotate(18deg) translateX(-35%); }
  to{ transform: rotate(18deg) translateX(35%); }
}

/* ---------- Section separators (home) ---------- */
.ccv2-section{
  position: relative;
}
.ccv2-section::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(980px, 86vw);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.10),
    rgba(34,211,238,0.18),
    rgba(255,255,255,0.10),
    transparent
  );
  opacity: 0.9;
}

/* ---------- Reveal animation ---------- */
.cc-reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.cc-reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  #ccseoStars, .ccseo-stars{ display:none !important; }
  body::after{ display:none !important; }
  .cc-surface,
  .ccv2-card,
  .ccv2-mock-card,
  .ccv2-optimizer-shell,
  .cc-reveal{ transition: none !important; }
  .cc-nav-btn::after,
  .ccv2-btn-primary::after,
  button::after,
  input[type="submit"]::after,
  .wp-block-button__link::after{ display:none !important; }
}