/* ===========================================================
   Lava animated background system
   Two complementary effects:
   1. #lamp-bg — fixed full-page ambient glow (blob divs)
   2. .lava-bg — section-level animated radial gradient via ::before
   =========================================================== */

/* ---- Effect 1: Full-page ambient glow ---- */
#lamp-bg{position:fixed;inset:0;z-index:-1;background:#090909;overflow:hidden;pointer-events:none}
.lv{position:absolute;border-radius:50%;filter:blur(80px);will-change:transform}
.lv:nth-child(1){width:650px;height:580px;background:var(--orange,#E8911A);top:-12%;left:-8%;opacity:.08;animation:l1 22s ease-in-out infinite alternate}
.lv:nth-child(2){width:500px;height:620px;background:var(--orange2,#f5a020);bottom:-10%;right:-6%;opacity:.06;animation:l2 25s ease-in-out infinite alternate}
.lv:nth-child(3){width:380px;height:350px;background:var(--brown,#8B5E2A);top:50%;left:45%;opacity:.04;animation:l3 20s ease-in-out infinite alternate}
.lv:nth-child(4){width:550px;height:480px;background:var(--orange,#E8911A);bottom:15%;left:-8%;opacity:.08;animation:l4 24s ease-in-out infinite alternate}
.lv:nth-child(5){width:300px;height:350px;background:#d4850f;top:65%;right:3%;opacity:.05;animation:l5 19s ease-in-out infinite alternate}
.lv:nth-child(6){width:450px;height:420px;background:var(--orange2,#f5a020);top:-3%;right:15%;opacity:.05;animation:l6 28s ease-in-out infinite alternate}

@keyframes l1{0%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(50px,-60px) scale(1.18) rotate(12deg)}66%{transform:translate(-35px,25px) scale(.88) rotate(-8deg)}100%{transform:translate(20px,-40px) scale(1.06) rotate(6deg)}}
@keyframes l2{0%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(-60px,40px) scale(1.12) rotate(-14deg)}66%{transform:translate(25px,-50px) scale(.82) rotate(10deg)}100%{transform:translate(-35px,15px) scale(1.1) rotate(-6deg)}}
@keyframes l3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.25)}100%{transform:translate(25px,-25px) scale(.92)}}
@keyframes l4{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}100%{transform:translate(-45px,20px) scale(.88)}}
@keyframes l5{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-25px,-35px) scale(1.3)}100%{transform:translate(20px,30px) scale(.82)}}
@keyframes l6{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,25px) scale(1.12)}100%{transform:translate(-20px,-40px) scale(.92)}}

/* ---- Effect 2: Section-level animated lava glow via @property ---- */
@supports (background: radial-gradient(circle, red 0%, transparent 50%)) {
  @property --lava-x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%;
  }
  @property --lava-y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}

.lava-bg {
  position: relative;
  background: var(--bg, #0a0a0a);
  overflow: hidden;
}

.lava-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 800px 600px at var(--lava-x, 20%) var(--lava-y, 40%),
      rgba(232, 145, 26, 0.25) 0%,
      rgba(232, 145, 26, 0.08) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 600px 800px at calc(100% - var(--lava-x, 20%)) calc(100% - var(--lava-y, 40%)),
      rgba(214, 125, 15, 0.2) 0%,
      rgba(214, 125, 15, 0.06) 40%,
      transparent 70%
    ),
    radial-gradient(
      circle 1000px at 50% 50%,
      rgba(232, 145, 26, 0.12) 0%,
      transparent 60%
    ),
    transparent;
  animation: lavaDrift 18s ease-in-out infinite;
}

@keyframes lavaDrift {
  0%, 100% {
    --lava-x: 20%;
    --lava-y: 40%;
  }
  33% {
    --lava-x: 70%;
    --lava-y: 25%;
  }
  66% {
    --lava-x: 35%;
    --lava-y: 75%;
  }
}

.lava-bg > * {
  position: relative;
  z-index: 1;
}