/* ═══════════════════════════════════════════════════════
   SMOOTH MESH GRADIENT SYSTEM — FINAL
   Modern mesh backgrounds 2025
   ═══════════════════════════════════════════════════════ */

.chapter.light,
.chapter.warm,
.chapter.light-warm,
.chapter.cool,
.chapter.default-gradient,
.chapter.white-gradient,
.chapter.dark-atmosphere{
  position:relative;
  overflow:hidden;
}

/* ======================================================
   ANIMACE
====================================================== */

//@keyframes meshFloat{
  0%,100%{transform:translate(0,0) rotate(0) scale(1);}
  25%{transform:translate(-3%,2%) rotate(1deg) scale(1.02);}
  50%{transform:translate(2%,-2%) rotate(-1deg) scale(.98);}
  75%{transform:translate(-2%,3%) rotate(.5deg) scale(1.01);}
}

//@keyframes meshPulse{
  0%,100%{
    transform:translate(0,0) scale(1);
    opacity:.7;
  }
  33%{
    transform:translate(3%,-2%) scale(1.05);
    opacity:.6;
  }
  66%{
    transform:translate(-2%,3%) scale(.95);
    opacity:.8;
  }
}

/* ======================================================
   BASE PSEUDO ELEMENTS (shared)
====================================================== */

.chapter.light::before,
.chapter.warm::before,
.chapter.light-warm::before,
.chapter.cool::before,
.chapter.default-gradient::before,
.chapter.white-gradient::before,
.chapter.dark-atmosphere::before,

.chapter.light .full-col::after,
.chapter.warm .full-col::after,
.chapter.light-warm .full-col::after,
.chapter.cool .full-col::after,
.chapter.default-gradient .full-col::after,
.chapter.white-gradient .full-col::after,
.chapter.dark-atmosphere .full-col::after{
  content:'';
  position:absolute;
  pointer-events:none;
  will-change:transform;
  backface-visibility:hidden;
  transform:translateZ(0);
}


/* ======================================================
   FLOAT LAYER
====================================================== */

.chapter.light::before,
.chapter.warm::before,
.chapter.light-warm::before,
.chapter.cool::before,
.chapter.default-gradient::before,
.chapter.white-gradient::before,
.chapter.dark-atmosphere::before{
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  z-index:-2;
//  animation:meshFloat 28s ease-in-out infinite;
}


/* ======================================================
   PULSE LAYER
====================================================== */

.chapter.light .full-col::after,
.chapter.warm .full-col::after,
.chapter.light-warm .full-col::after,
.chapter.cool .full-col::after,
.chapter.default-gradient .full-col::after,
.chapter.white-gradient .full-col::after,
.chapter.dark-atmosphere .full-col::after{
  top:-30%;
  right:-30%;
  width:160%;
  height:160%;
  z-index:-1;
//  animation:meshPulse 32s ease-in-out infinite;
  filter:blur(80px);
  opacity:.6;
}

/* ======================================================
   DEFAULT GRADIENT
====================================================== */

.chapter.default-gradient::before{
  background:
    radial-gradient(ellipse at 20% 30%,rgba(99,102,241,.25),transparent 50%),
    radial-gradient(ellipse at 80% 20%,rgba(168,85,247,.20),transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(236,72,153,.22),transparent 50%),
    radial-gradient(ellipse at 30% 70%,rgba(59,130,246,.18),transparent 50%),
    linear-gradient(135deg,#0f1020,#1a1d35 50%,#12152a);
  filter:blur(60px);
}

.chapter.default-gradient .full-col::after{
  background:
    radial-gradient(circle at 85% 15%,rgba(251,146,60,.15),transparent 45%),
    radial-gradient(circle at 15% 85%,rgba(34,211,238,.18),transparent 45%),
    radial-gradient(ellipse at 60% 60%,rgba(244,63,94,.12),transparent 55%);
  mix-blend-mode:screen;
}

/* ======================================================
   WHITE GRADIENT
====================================================== */

.chapter.white-gradient{
  background:#fff;
}

.chapter.white-gradient::before{
  background:
    radial-gradient(ellipse at 15% 20%,rgba(219,234,254,.35),transparent 55%),
    radial-gradient(ellipse at 85% 25%,rgba(233,213,255,.28),transparent 55%),
    radial-gradient(ellipse at 75% 80%,rgba(254,226,226,.30),transparent 55%),
    radial-gradient(ellipse at 25% 75%,rgba(224,242,254,.25),transparent 55%);
  filter:blur(100px);
}

.chapter.white-gradient .full-col::after{
  background:
    radial-gradient(circle at 80% 15%,rgba(254,243,199,.20),transparent 50%),
    radial-gradient(circle at 20% 85%,rgba(207,250,254,.22),transparent 50%),
    radial-gradient(ellipse at 50% 50%,rgba(252,231,243,.18),transparent 60%);
  opacity:.4;
}

/* ======================================================
   LIGHT
====================================================== */

.chapter.light::before{
  background:
    radial-gradient(ellipse at 25% 25%,rgba(147,197,253,.3),transparent 50%),
    radial-gradient(ellipse at 75% 25%,rgba(196,181,253,.25),transparent 50%),
    radial-gradient(ellipse at 65% 75%,rgba(251,207,232,.28),transparent 50%),
    radial-gradient(ellipse at 35% 65%,rgba(165,243,252,.22),transparent 50%),
    linear-gradient(135deg,#f8fafc,#f1f5f9 50%,#e2e8f0);
}

.chapter.light .full-col::after{
  background:
    radial-gradient(circle at 80% 20%,rgba(254,215,170,.25),transparent 45%),
    radial-gradient(circle at 20% 80%,rgba(165,243,252,.28),transparent 45%),
    radial-gradient(ellipse at 50% 50%,rgba(251,113,133,.18),transparent 55%);
}

/* ======================================================
   WARM
====================================================== */

.chapter.warm::before{
  background:
    radial-gradient(ellipse at 30% 20%,rgba(251,146,60,.28),transparent 50%),
    radial-gradient(ellipse at 70% 30%,rgba(244,63,94,.25),transparent 50%),
    radial-gradient(ellipse at 60% 70%,rgba(251,191,36,.22),transparent 50%),
    radial-gradient(ellipse at 40% 80%,rgba(236,72,153,.20),transparent 50%),
    linear-gradient(135deg,#1e1b2e,#2d1f3a 50%,#1f1628);
}

.chapter.warm .full-col::after{
  background:
    radial-gradient(circle at 15% 15%,rgba(253,224,71,.18),transparent 45%),
    radial-gradient(circle at 85% 85%,rgba(249,115,22,.20),transparent 45%);
}

/* ======================================================
   LIGHT-WARM
====================================================== */

.chapter.light-warm::before{
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,183,77,.35),transparent 50%),
    radial-gradient(ellipse at 70% 30%,rgba(255,138,128,.30),transparent 50%),
    radial-gradient(ellipse at 60% 70%,rgba(255,213,79,.25),transparent 50%),
    linear-gradient(135deg,#fff7ed,#ffe4e6 50%,#fff1f2);
}

.chapter.light-warm .full-col::after{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,204,128,.35),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(255,138,101,.30),transparent 50%);
}

/* ======================================================
   COOL
====================================================== */

.chapter.cool::before{
  background:
    radial-gradient(ellipse at 25% 35%,rgba(59,130,246,.25),transparent 50%),
    radial-gradient(ellipse at 75% 25%,rgba(20,184,166,.22),transparent 50%),
    radial-gradient(ellipse at 65% 75%,rgba(99,102,241,.20),transparent 50%),
    radial-gradient(ellipse at 35% 65%,rgba(6,182,212,.18),transparent 50%),
    linear-gradient(135deg,#0a1628,#0f2942 50%,#0d1b2a);
}

.chapter.cool .full-col::after{
  background:
    radial-gradient(circle at 80% 20%,rgba(34,211,238,.20),transparent 45%),
    radial-gradient(circle at 20% 80%,rgba(16,185,129,.18),transparent 45%);
}

/* ======================================================
   DARK ATMOSPHERE
====================================================== */

.chapter.dark-atmosphere::before{
  background:
    radial-gradient(ellipse at 25% 25%,rgba(88,28,135,.30),transparent 45%),
    radial-gradient(ellipse at 75% 30%,rgba(20,83,45,.25),transparent 45%),
    radial-gradient(ellipse at 65% 75%,rgba(30,58,138,.28),transparent 45%),
    linear-gradient(135deg,#050510,#0a0a18 30%,#0d0d1a 70%,#080812);
  filter:blur(70px);
}

.chapter.dark-atmosphere .full-col::after{
  background:
    radial-gradient(circle at 80% 20%,rgba(79,70,229,.18),transparent 40%),
    radial-gradient(circle at 20% 80%,rgba(16,185,129,.15),transparent 40%);
  mix-blend-mode:screen;
}

/* ======================================================
   REDUCED MOTION
====================================================== */

@media(prefers-reduced-motion:reduce){
  .chapter::before,
  .chapter .full-col::after{
    animation:none;
  }
}

/* ======================================================
   MOBILE OPTIMIZATION
====================================================== */

@media(max-width:768px){

  .chapter.light::before,
.chapter.warm::before,
.chapter.light-warm::before,
.chapter.cool::before,
.chapter.default-gradient::before,
.chapter.white-gradient::before,
.chapter.dark-atmosphere::before{
    filter:blur(40px);
    animation-duration:20s;
  }

  .chapter.white-gradient::before{
    filter:blur(80px);
  }

  .chapter.light .full-col::after,
.chapter.warm .full-col::after,
.chapter.light-warm .full-col::after,
.chapter.cool .full-col::after,
.chapter.default-gradient .full-col::after,
.chapter.white-gradient .full-col::after,
.chapter.dark-atmosphere .full-col::after{
    filter:blur(50px);
    opacity:.5;
  }
}