/* A:ON premium background */
.story,.service,.work{
  isolation:isolate;
}

.story::before,.service::before,.work::before{
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  pointer-events:none;
  background-size:cover;
  background-position:center;
  transform:translate3d(0,0,0) scale(1.08);
  transition:transform 1.5s ease-out;
}

.story::before{
  background:
    radial-gradient(ellipse at 30% 30%,#f6eee2,transparent 65%),
    linear-gradient(130deg,#c4ae95,#eae1d5);
}

.service::before{
  background:
    radial-gradient(ellipse at 75% 35%,#6a5038,transparent 60%),
    linear-gradient(130deg,#17110d,#3a2b20);
}

.work::before{
  background:
    radial-gradient(ellipse at 25% 70%,#f0e1cc,transparent 60%),
    linear-gradient(130deg,#b69e83,#d5c6b4);
}

.story.visible::before,
.service.visible::before,
.work.visible::before{
  transform:translate3d(0,0,0) scale(1);
}

@media(prefers-reduced-motion:reduce){
  .story::before,.service::before,.work::before{
    transition:none;
    transform:none;
  }
}

/* A:ON MODERN PREMIUM */
.story{
  background:#e9e9e7;
  color:#202020;
}
.story::before{
  background:
    radial-gradient(ellipse at 20% 25%,#ffffff,transparent 60%),
    linear-gradient(135deg,#d1d1d1,#f5f5f3);
}

.service{
  background:#111315;
  color:#f5f5f5;
}
.service::before{
  background:
    radial-gradient(ellipse at 75% 30%,#41454a,transparent 60%),
    linear-gradient(135deg,#090a0c,#292d31);
}

.work{
  background:#d9d9d6;
  color:#202020;
}
.work::before{
  background:
    radial-gradient(ellipse at 25% 65%,#ffffff,transparent 60%),
    linear-gradient(135deg,#b9bbbd,#ededeb);
}

.story .label,
.work .label{
  color:#777;
}