/* =============================================================================
 *  fx.css: motion & atmosphere (hover pops, parallax background, line
 *  animations, scroll reveals). Shared by index.html and success.html.
 *  Everything here is disabled for visitors with "reduce motion" turned on.
 * ========================================================================== */

/* ---------- Background layer (behind all content) ---------- */
#bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.site { position: relative; z-index: 1; }

/* Pixel grid: moves slower than the page (parallax via --scroll set in main.js) */
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(34,197,94,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,.07) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 0 calc(var(--scroll, 0px) * -0.25);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 100%);
}

/* Soft green aura that drifts slowly */
.bg-glow {
  position: absolute; left: 50%; top: 10%; width: 900px; height: 900px; max-width: 160vw;
  transform: translate(-50%, calc(var(--scroll, 0px) * -0.1));
  background: radial-gradient(circle, rgba(34,197,94,.14) 0%, rgba(34,197,94,.05) 35%, transparent 65%);
  filter: blur(10px);
  animation: glow-breathe 9s ease-in-out infinite;
}
@keyframes glow-breathe { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* Floating pixel particles canvas */
#bg-particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Animated lines ---------- */
/* A thin light sweep travelling along a line (header border, dividers) */
.fx-line { position: relative; overflow: hidden; }
.fx-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,.9), transparent);
  width: 30%; transform: translateX(-120%);
  animation: line-sweep 4.5s ease-in-out infinite;
}
.fx-line.delay::after { animation-delay: 1.6s; }
@keyframes line-sweep { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(420%); } }

/* Line under the header */
.header-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(34,197,94,.25); }

/* Heading underline that draws in when revealed */
.fx-underline { position: relative; display: inline-block; }
.fx-underline::after {
  content: ""; position: absolute; left: 0; bottom: -10px; height: 3px; width: 100%;
  background: linear-gradient(90deg, #16A34A, #4ADE80, #16A34A);
  box-shadow: 0 0 10px rgba(34,197,94,.7);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.2,.8,.2,1) .2s;
}
.is-visible .fx-underline::after, .fx-underline.is-visible::after { transform: scaleX(1); }

/* ---------- Hover "pop" ---------- */
.mc-btn { will-change: transform; transition: transform .22s cubic-bezier(.3,1.6,.5,1), box-shadow .2s ease, background-color .2s ease; }
.mc-btn:hover {
  transform: translateY(-2px) scale(1.02);
}
.mc-btn:active { transform: translateY(1px) scale(.99) !important; }

/* Cards lift slightly */
.lift { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 10px 30px -12px rgba(34,197,94,.45); }

/* Pixel icons bob a little on hover of their card */
.lift:hover .pixel-icon, .pop-icon:hover .pixel-icon { animation: icon-bob .6s ease-in-out; }
@keyframes icon-bob { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px) rotate(-4deg); } 70% { transform: translateY(0) rotate(2deg); } }

/* Product image: gentle zoom on hover */
.zoom-wrap img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.zoom-wrap:hover img { transform: scale(1.04); }

/* ---------- Scroll reveal ---------- */
.js-fx [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js-fx [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .fx-line::after { animation: none; }
  .fx-line::after { display: none; }
  .mc-btn:hover, .lift:hover { transform: none; }
  .lift:hover .pixel-icon, .pop-icon:hover .pixel-icon { animation: none; }
  .zoom-wrap:hover img { transform: none; }
  .js-fx [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fx-underline::after { transform: scaleX(1); transition: none; }
}