/*!
 * WellMade BG Effects v2.1
 * All colors are driven by CSS custom properties
 * (injected inline per-page from plugin settings).
 *
 * v2.1 — Stacking context fix:
 * Properly contained behind content; respects header/footer/section backgrounds.
 */

.wma-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--wma-bg, #F4F4F1);
  transition: background .5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====================================================
   STACKING CONTEXT FIX (v2.1)
   ====================================================
   Ensures site content is layered above .wma-bg even
   when transparent. Solid backgrounds will cover the
   ambient effect; transparent ones will let it show.
   ==================================================== */
.site-header,
.site-footer,
.site-content,
.entry-content,
.wp-block-kadence-rowlayout,
main {
  position: relative;
  z-index: 1;
}

/* ====================================================
   GRAIN
   ==================================================== */
.wma-grain {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: var(--wma-grain-opacity, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  animation: wma-grain-drift 4s steps(1) infinite;
  mix-blend-mode: var(--wma-grain-blend, multiply);
  pointer-events: none;
}

@keyframes wma-grain-drift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-5%, -6%); }
  20%  { transform: translate(4%, 5%); }
  30%  { transform: translate(-6%, 2%); }
  40%  { transform: translate(2%, -5%); }
  50%  { transform: translate(5%, 6%); }
  60%  { transform: translate(-3%, 3%); }
  70%  { transform: translate(6%, -2%); }
  80%  { transform: translate(-2%, 6%); }
  90%  { transform: translate(3%, -3%); }
  100% { transform: translate(0, 0); }
}

/* ====================================================
   ORBS
   ==================================================== */
.wma-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform, opacity;
  transition: background .5s;
}
.wma-orb-1 {
  width: 110vw; height: 110vw; max-width: 1800px; max-height: 1800px;
  background: radial-gradient(ellipse at 40% 40%, rgba(var(--wma-orb-rgb), .28) 0%, rgba(var(--wma-orb-rgb), .15) 35%, transparent 70%);
  top: -45%; left: -35%;
  filter: blur(80px);
  animation: wma-orb-mega-1 14s ease-in-out infinite;
}
.wma-orb-2 {
  width: 90vw; height: 90vw; max-width: 1400px; max-height: 1400px;
  background: radial-gradient(ellipse at 60% 50%, rgba(var(--wma-orb-rgb), .22) 0%, rgba(var(--wma-orb-rgb), .12) 40%, transparent 70%);
  top: 10%; right: -40%;
  filter: blur(70px);
  animation: wma-orb-mega-2 18s ease-in-out infinite;
}
.wma-orb-3 {
  width: 120vw; height: 70vw; max-width: 2000px; max-height: 1100px;
  background: radial-gradient(ellipse at 50% 60%, rgba(var(--wma-orb-rgb), .2) 0%, rgba(var(--wma-orb-rgb), .1) 45%, transparent 75%);
  bottom: -30%; left: -10%;
  filter: blur(100px);
  animation: wma-orb-mega-3 22s ease-in-out infinite;
}
.wma-orb-4 {
  width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(ellipse at center, rgba(var(--wma-orb-rgb), .18) 0%, transparent 60%);
  top: 25%; left: 20%;
  filter: blur(60px);
  animation: wma-orb-center-pulse 10s ease-in-out infinite;
}
.wma-orb-5 {
  width: 45vw; height: 45vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(ellipse at center, rgba(var(--wma-orb-rgb), .15) 0%, transparent 55%);
  top: 40%; left: 50%;
  filter: blur(50px);
  animation: wma-orb-float 16s ease-in-out infinite;
}
.wma-orb-6 {
  width: 50vw; height: 40vw; max-width: 750px; max-height: 600px;
  background: radial-gradient(ellipse at center, rgba(var(--wma-orb-rgb), .14) 0%, transparent 60%);
  top: -5%; right: 15%;
  filter: blur(55px);
  animation: wma-orb-drift-top 20s ease-in-out infinite;
}

@keyframes wma-orb-mega-1 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0); }
  25% { transform: translate(15vw, 8vh) scale(1.12) rotate(3deg); }
  50% { transform: translate(10vw, 18vh) scale(.95) rotate(-2deg); }
  75% { transform: translate(20vw, 5vh) scale(1.08) rotate(1deg); }
}
@keyframes wma-orb-mega-2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0); }
  30% { transform: translate(-20vw, 15vh) scale(1.18) rotate(-4deg); }
  60% { transform: translate(-12vw, -10vh) scale(.88) rotate(2deg); }
  80% { transform: translate(-25vw, 5vh) scale(1.1) rotate(-1deg); }
}
@keyframes wma-orb-mega-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(-15vw, -18vh) scale(1.15); }
  65% { transform: translate(12vw, -25vh) scale(.92); }
  85% { transform: translate(5vw, -10vh) scale(1.05); }
}
@keyframes wma-orb-center-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.25); opacity: 1; }
}
@keyframes wma-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0); }
  25% { transform: translate(18vw, -12vh) scale(1.2) rotate(5deg); }
  50% { transform: translate(-8vw, 8vh) scale(.85) rotate(-3deg); }
  75% { transform: translate(10vw, 15vh) scale(1.1) rotate(2deg); }
}
@keyframes wma-orb-drift-top {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(15vh) scale(1.15); }
}

/* ====================================================
   RINGS
   ==================================================== */
.wma-ering {
  position: absolute;
  width: 80vw; height: 80vw;
  max-width: 1200px; max-height: 1200px;
  border-radius: 50%;
  border: 1px solid rgba(var(--wma-ring-rgb), .1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: wma-ring-pulse 8s ease-in-out infinite;
  transition: border-color .5s;
}
.wma-ering-2 {
  width: 100vw; height: 100vw;
  max-width: 1600px; max-height: 1600px;
  animation: wma-ring-pulse 12s ease-in-out infinite reverse;
}
.wma-ering-3 {
  width: 60vw; height: 60vw;
  max-width: 900px; max-height: 900px;
  animation: wma-ring-pulse 6s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes wma-ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.95); opacity: .4; }
  50% { transform: translate(-50%, -50%) scale(1.1); opacity: .8; }
}

/* ====================================================
   GUIDE LINES
   ==================================================== */
.wma-gl {
  position: absolute;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--wma-line-rgb), .15) 20%, rgba(var(--wma-line-rgb), .25) 50%, rgba(var(--wma-line-rgb), .15) 80%, transparent 100%);
  pointer-events: none;
  transition: background .5s;
}
.wma-glh { left: 0; right: 0; height: 1px; }
.wma-glv {
  top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--wma-line-rgb), .15) 20%, rgba(var(--wma-line-rgb), .25) 50%, rgba(var(--wma-line-rgb), .15) 80%, transparent 100%);
}
.wma-glh1 { top: 30%; animation: wma-gsh 12s ease-in-out infinite; }
.wma-glh2 { top: 50%; animation: wma-gsh 16s ease-in-out infinite reverse; }
.wma-glh3 { top: 70%; animation: wma-gsh 14s ease-in-out infinite 3s; }
.wma-glv1 { left: 25%; animation: wma-gsv 15s ease-in-out infinite; }
.wma-glv2 { left: 50%; animation: wma-gsv 18s ease-in-out infinite reverse; }
.wma-glv3 { left: 75%; animation: wma-gsv 13s ease-in-out infinite 2s; }

@keyframes wma-gsh {
  0%, 100% { transform: translateY(0) scaleX(.9); opacity: .4; }
  50% { transform: translateY(-8vh) scaleX(1.1); opacity: 1; }
}
@keyframes wma-gsv {
  0%, 100% { transform: translateX(0) scaleY(.9); opacity: .3; }
  50% { transform: translateX(-5vw) scaleY(1.05); opacity: .8; }
}

/* ====================================================
   SWEEP
   ==================================================== */
.wma-sweep {
  position: absolute;
  width: 200%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--wma-sweep-rgb), .15), rgba(var(--wma-sweep-rgb), .3), rgba(var(--wma-sweep-rgb), .15), transparent);
  transform-origin: center;
  transition: background .5s;
}
.wma-sweep-1 {
  top: 40%; left: -50%;
  transform: rotate(15deg);
  animation: wma-sw 20s linear infinite;
}
.wma-sweep-2 {
  top: 60%; left: -50%;
  transform: rotate(-10deg);
  animation: wma-sw 25s linear infinite reverse;
}

@keyframes wma-sw {
  0% { transform: rotate(15deg) translateX(-30%); }
  100% { transform: rotate(15deg) translateX(30%); }
}

/* ====================================================
   PARTICLES
   ==================================================== */
.wma-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ====================================================
   A11Y
   ==================================================== */
@media (prefers-reduced-motion: reduce) {
  .wma-bg * { animation: none !important; }
  .wma-sweep, .wma-ering, .wma-particles { display: none !important; }
}

/* ====================================================
   MOBILE (≤768px)
   ----------------------------------------------------
   Όλα τα effects ορατά και σε mobile (consistency
   desktop ↔ mobile). Μόνο οι vertical lines αλλάζουν
   θέση από 25/50/75% σε 8/50/92% για να μην πέφτουν
   πάνω σε content (πχ μεγάλα γράμματα "01" σε narrow
   viewports).
   ==================================================== */
@media (max-width: 768px) {
  .wma-glv1 { left: 8%; }
  .wma-glv2 { left: 50%; }
  .wma-glv3 { left: 92%; }
}